How do I make column bigger and smaller in Bootsrap? - html

Question

I have this code on my webpage and I made it with Bootstrap.
<div class="row">
<div class="col-md-11">
Here I have content
</div>
<div class="col-md-1">
Here I have content
</div>
</div>
and I need for this column, that first column to be smaller, 10.5 size and second column to be bigger, 1.5 size. Can I do with width in CSS? Can you help me with this?
Thanks

Answer 1

Bootstrap has no direct provision for partial columns.
You can rewrite the stylesheet to operate on a different number of columns (i.e. 24).
The customize page will let you specify a different number of columns and generate the stylesheet for you.
Alternatively, you can check out Bootstrap from Git and modify the variables file to the same effect.

Answer 2

Just create your own break points:
#media (min-width: 992px) {
col-md-10-5 {
width: 9.523809523809524%; // 100 / 10.5
}
col-md-1-5 {
width: 66.666666666%; // 100 / 1.5
}
}
Alternative You can increase grid size to 24 columns instead of 12 using Bootstrap generator.

Answer 3

Bootstrap provide you with general purpose components. I believe bootstrap rows and columns are generally designed to contain different website parts or different functionality (e.g. right column with most recent news feed and the main body with current article)
I guess you are trying to build your own component/markup that should not be splitted by bootstraps rows and cols. I suggest to write your own css for it.
<div> <!--some container (e.g. bootstrap container or column)-->
<div class="my-component">
<div class="main-part"></div>
<div class="additional-part"></div>
</div>
</div>
.my-component {
/*something*/
}
.my-component > .main-part {
width: 600px;
/*some margin or padding*/
}
.my-component > .additional-part {
width: 200px;
/*some margin or padding*/
}
And include media queries if necessary.
I advise not to override framework grid system.

Answer 4

Since col-md-1 is of width 8.33333333%;
<div class="col-md-1" style="width: width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;"> # 8.33333333 * 1.5
Here I have content
</div>
And for the col-md-11, you'd have to adjust it to be 10.5:
<div class="col-md-10" style=" width: 87.499999965%;flex: 0 0 87.499999965%;max-width: 87.499999965%;"> # 8.33333333 * 10.5
Here I have content
</div>