Hello,
I’m currently working on my portfolio project and I’ve stumbled on a minor issue.
I’ve read that if the total columns exceeds the number (or sum) 12 then the last or later columns are wrapped in a new line. However in my case the last column is wrapping to a new line at the sum of 12. Please consider my code below:
<div align="center" class="well" id="contact"> <h2> Get in Touch with Me</h2> <div class="container"> <div class="row" style="max-width: 750px; "> <a href="" role="button" class="btn btn-primary col-xs-3 classWithPad"> Twitter </a> <a href="" role="button" class="btn btn-info col-xs-3 classWithPad"> Linkedin </a> <a href="" role="button" class="btn btn-info col-xs-3 classWithPad"> Github </a> <a href="" role="button" class="btn btn-success col-xs-3 classWithPad"> freeCodeCamp </a> </div> </div> </div>
The output of the above code is (with col sum as 12):
However when I change one col value from 3 to 2 (for example:
<a href="" role="button" class="btn btn-info col-xs-2 classWithPad"> Github </a> ),
now with a column sum of 11 the output is that all columns are now in a single row (which is desirable), but now the “Github” button has a reduced size (which is not desirable).
(I’m not allowed to post more than one picture in one post for which I’ve posted the description of the output above rather than pasting the image here.)
Can anyone please make me understand where I’m going wrong?
P.S. classWithPad class is being used to provide space between the columns and its code snippet is below:
.classWithPad { margin:2px;}
Thanks and Regards
AB