html - How to divide bootstrap row into 5 equal parts? -
i want divide bootstrap
row 5 equal parts. includes 12-col-md
, how can divide equal 5 parts?
can me solve problem?
a great way resolve here!
by default bootstrap not provide grid system allows create 5 columns layout, can see it’s quite simple. @ first need create default column definition in way bootstrap it. called classes col-..-15.
.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
next need define width of new classes in case of different media queries.
.col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } }
now ready combine classes original bootstrap classes. example, if create div element behave 5 columns layout on medium screens , 4 columns on smaller ones, need use this:
<div class="row"> <div class="col-md-15 col-sm-3"> ... </div> </div>
Comments
Post a Comment