I want to adjust the columns in Twitter Bo?tstrap.
I know in bootstrap there are 12 columns grid. Is there any way to manipulate the grids to have 1.5 3.5 3.5 3.5 instead of 3 3 3 3?
This question is related to
html
twitter-bootstrap
Bootstrap 4 uses flex-box and you can create your own column definitions
This is close to a 1.5, tweak to your own needs.
.col-1-5 {
flex: 0 0 12.3%;
max-width: 12.3%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
Bootstrap has column offsets, so if you want columns with equal width without specifying size use this.
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Also check out this link https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints
According to Rex Bloom response I have write a bootstrap helper:
//8,33333333% col-1
.extra-col {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.col-0-5 {
@extend .extra-col;
flex: 0 0 4.16666667%;
max-width: 4.16666667%;
}
.col-1-5 {
@extend .extra-col;
flex: 0 0 12.5%;
max-width: 12.5%;
}
.col-2-5 {
@extend .extra-col;
flex: 0 0 20.833333325%;
max-width: 20.833333325%;
}
.col-3-5 {
@extend .extra-col;
flex: 0 0 29.166666655%;
max-width: 29.166666655%;
}
.col-4-5 {
@extend .extra-col;
flex: 0 0 37.499999985%;
max-width: 37.499999985%;
}
.col-5-5 {
@extend .extra-col;
flex: 0 0 45.833333315%;
max-width: 45.833333315%;
}
.col-6-5 {
@extend .extra-col;
flex: 0 0 54.166666645%;
max-width: 54.166666645%;
}
.col-7-5 {
@extend .extra-col;
flex: 0 0 62.499999975%;
max-width: 62.499999975%;
}
.col-8-5 {
@extend .extra-col;
flex: 0 0 70.833333305%;
max-width: 70.833333305%;
}
.col-9-5 {
@extend .extra-col;
flex: 0 0 79.166666635%;
max-width: 79.166666635%;
}
.col-10-5 {
@extend .extra-col;
flex: 0 0 87.499999965%;
max-width: 87.499999965%;
}
.col-11-5 {
@extend .extra-col;
flex: 0 0 95.8333333%;
max-width: 95.8333333%;
}
The short answer is no (technically you can give whatever name of the class you want, but this will have no effect, unless you define your own CSS class - and remember - no dots in the class selector). The long answer is again no, because Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or view port size increases.
Rows must be placed within a .container
(fixed-width) or .container-fluid
(full-width) for proper alignment and padding.
.row
and .col-xs-4
are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts..rows
..col-xs-4
..col-md-*
class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-*
class is not present.A possible solution to your problem is to define your own CSS class with desired width, let's say .col-half{width:XXXem !important}
then add this class to elements you want along with original Bootstrap CSS classes.
You cloud also simply override the width of the Column...
<div class="col-md-1" style="width: 12.499999995%"></div>
Since col-md-1
is of width 8.33333333%; simply multiply 8.33333333 * 1.5 and set it as your width.
in bootstrap 4
, you will have to override flex and max-width property too:
<div class="col-md-1" style="width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;"></div>
This question is quite old, but I have made it that way (in TYPO3).
Firstly, I have made a own accessible css-class which I can choose on every content element manually.
Then, I have made a outer three column element with 11 columns (1 - 9 - 1), finally, I have modified the column width of the first and third column with CSS to 12.499999995%.
This is not Bootstrap Standard to give col-md-1.5 and you can not edit bootstrap.min.css because is not right way. you can create like this http://www.bootply.com/125259
As others mentioned in Bootstrap 3, you can use nest/embed techniques.
However it is becoming more obvious to use pretty awesome feature from Bootstrap 4 now. you simple have the option to use the col-{breakpoint}-auto
classes (e.g. col-md-auto
) to make columns size itself automatically based on the natural width of its content. check this for example
Create new classes to overwrite the width. See jFiddle for working code.
<div class="row">
<div class="col-xs-1 col-xs-1-5">
<div class="box">
box 1
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 2
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 3
</div>
</div>
<div class="col-xs-3 col-xs-3-5">
<div class="box">
box 4
</div>
</div>
</div>
.col-xs-1-5 {
width: 12.49995%;
}
.col-xs-3-5 {
width: 29.16655%;
}
.box {
border: 1px solid #000;
text-align: center;
}
you can use this code inside col-md-3 , col-md-9
.col-side-right{
flex: 0 0 20% !important;
max-width: 20%;
}
.col-side-left{
flex: 0 0 80%;
max-width: 80%;
}
Source: Stackoverflow.com