Thursday, 15 April 2010

html - How to divide bootstrap row into 5 equal parts? -


I want to divide the 5 equal parts in the bootstrap line . Contains 12-col-md , so how can I divide it into the same 5 parts?

Can anyone help me solve this problem?

This is a great way to resolve it!

By default the bootstrap does not provide a grid system that allows us to create five column layouts, but as you can see it is quite easy. First of all, you need to create default column definition in bootstrap mode. I call on my classes- -15.

  .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 {status: relative; Minimum height: 1px; Padding-right: 10px; Padding-left: 10px; }  

Next you need to define the width of the new classes in case of various media queries.

  .col-xs-15 {width: 20%; Swim left; } @ Media (minimum width: 768 px) {.col-sm-15 {width: 20%; Swim left; }} @ Media (minimum-width: 992 px) {.col-md-15 {width: 20%; Swim left; }} @ Media (minimum-width: 1200 pixels) {.col-lg-15 {width: 20%; Swim left; }}  

Now you are ready to combine your classes with the original BootStrap classes. For example, if you want to create a div element that behaves like a five column layout on a medium screen and the smaller ones behave like four pillars, then you just have to use something like this:

  & lt; Div class = "row" & gt; & Lt; Div class = "col-md-15 col-sm-3" & gt; ... & lt; / Div & gt; & Lt; / Div & gt;  

No comments:

Post a Comment