Home » Html » Can I give the col-md-1.5 in bootstrap?

Can I give the col-md-1.5 in bootstrap?

Posted by: admin November 29, 2017 Leave a comment

Questions:

I want to adjust the columns in Twitter Boοtstrap.

I know in bootstrap there are 12 columns grid. Is there any way to manipulate the grids to have 1.5 3.5 3.5 3.5 instead of 3 3 3 3?

Answers:

As @bodi0 correctly said, it is not possible. You either have to extent Bootstrap’s grid system (you can search and find various solutions, here is a 7-column example) or use nested rows e.g. http://bootply.com/dd50he9tGe.

In the case of nested rows you might not always get the exact result but a similar one

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Questions:
Answers:

You cloud also simply override the width of the Column…

<div class="col-md-1" style="width: 12.499999995%"></div>

Since col-md-1 is of width 8.33333333%; simply multiply 8.33333333 * 1.5 and set it as your width.

Questions:
Answers:

The short answer is no (technically you can give whatever name of the class you want, but this will have no effect, unless you define your own CSS class – and remember – no dots in the class selector). The long answer is again no, because Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or view port size increases.

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present.

A possible solution to your problem is to define your own CSS class with desired width, let’s say .col-half{width:XXXem !important} then add this class to elements you want along with original Bootstrap CSS classes.

Questions:
Answers:

This is not Bootstrap Standard to give col-md-1.5 and you can not edit bootstrap.min.css because is not right way.
you can create like this http://www.bootply.com/125259

Questions:
Answers:

Create new classes to overwrite the width. See jFiddle for working code.

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

Questions:
Answers:

As others mentioned in Bootstrap 3, you can use nest/embed techniques.

However it is becoming more obvious to use pretty awesome feature from Bootstrap 4 now. you simple have the option to use the col-{breakpoint}-auto classes (e.g. col-md-auto) to make columns size itself automatically based on the natural width of its content. check this for example