CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Naveed Iqbal
Naveed Iqbal

Reputation: 133

Bootstrap Col width

Please, first have a look on the attached imageenter image description here

I want 20% in first column, but when I used col-md-2, it set width: 16.6667% how I set column 20% using bootstrap. Do I need to make my own CSS or there is a way to customise bootstraps3

Upvotes: 1

Views: 883

Answers (2)

Asim K T
Asim K T

Reputation: 18124

You have to use custom classes (easy way), or customize Bootstrap grid system.

For creating custom class you could use something like:

.col-10p {
  width: 100%;
}

.col-20p {
  width: 100%;
}
@media screen and (min-width: 768px) {

 .col-10p {
  width: 10%;
  float: left;
 }

 .col-20p {
  width: 20%;
  float: left;
 }
}

Then you will get 10% and 20% width containers respectively, and will be responsive like col-md-*s. These can be used just like col-*-* classes.

If you customize Bootstrap or overwrite default grid classes it'll effect the whole project and will make unintended results.

Like this you can overwrite classes:

.col-md-2 {
  width: 10% !important;
}

Since using !important is not a good way to do things: you could use another approach like:

.width-10.col-md-2 {
   width: 10%;
}

which will give you desired effect. Just use the width-10 class in HTML too.

Upvotes: 2

Luca
Luca

Reputation: 153

Bootstrap grid system is based in 12 columns. Here there is the Bootstrap official doc http://getbootstrap.com/css/#grid

col-md-2 means that you want to assign 2/12 of the total width of your container, therefore 16.6667%

If you'd like to assign 20% you can add a class near to col-md-2 and than override the width, or set an in-line style. Please note that if you set 20% is not a multiple of 12 so the near columns would never stretch 100% of width just using bootstrap.

Upvotes: 4

Related Questions