CODEWITHSUNDEEP
htmlcsstwitter-bootstrapwebtwitter-bootstrap-3
pulitr
pulitr

Reputation: 69

How do I make column bigger and smaller in Bootsrap?

I have this code on my webpage and I made it with Bootstrap.

<div class="row">
  <div class="col-md-11">
    Here I have content
  </div>
  <div class="col-md-1">
    Here I have content
  </div>
</div>

and I need for this column, that first column to be smaller, 10.5 size and second column to be bigger, 1.5 size. Can I do with width in CSS? Can you help me with this?

Thanks

Upvotes: 3

Views: 6559

Answers (4)

bugcat
bugcat

Reputation: 11

Since col-md-1 is of width 8.33333333%;

<div class="col-md-1" style="width: width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;"> # 8.33333333 * 1.5
 Here I have content
</div>

And for the col-md-11, you'd have to adjust it to be 10.5:

<div class="col-md-10" style=" width: 87.499999965%;flex: 0 0 87.499999965%;max-width: 87.499999965%;"> # 8.33333333 * 10.5
 Here I have content
</div>

Upvotes: 0

Andrew B
Andrew B

Reputation: 773

Bootstrap provide you with general purpose components. I believe bootstrap rows and columns are generally designed to contain different website parts or different functionality (e.g. right column with most recent news feed and the main body with current article)

I guess you are trying to build your own component/markup that should not be splitted by bootstraps rows and cols. I suggest to write your own css for it.

<div> <!--some container (e.g. bootstrap container or column)-->
  <div class="my-component">
    <div class="main-part"></div>
    <div class="additional-part"></div>
  </div>
</div>

.my-component {
  /*something*/
}
.my-component > .main-part {
  width: 600px;
  /*some margin or padding*/
}
.my-component > .additional-part {
  width: 200px;
  /*some margin or padding*/
}

And include media queries if necessary. I advise not to override framework grid system.

Upvotes: 0

Justinas
Justinas

Reputation: 43441

Just create your own break points:

@media (min-width: 992px) {
    col-md-10-5 {
        width: 9.523809523809524%; // 100 / 10.5
    }

    col-md-1-5 {
        width: 66.666666666%; // 100 / 1.5
    }
}

Alternative You can increase grid size to 24 columns instead of 12 using Bootstrap generator.

Upvotes: 0

Quentin
Quentin

Reputation: 943152

Bootstrap has no direct provision for partial columns.

You can rewrite the stylesheet to operate on a different number of columns (i.e. 24).

The customize page will let you specify a different number of columns and generate the stylesheet for you.

Alternatively, you can check out Bootstrap from Git and modify the variables file to the same effect.

Upvotes: 1

Related Questions