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

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

gradle error "Cannot convert the provided notation to a File or URI" -

python - NameError: name 'subprocess' is not defined -