Twitter Bootstrap Question posted in

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

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?

Tags:

12

Answers


  1. 0

    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.
    • 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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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.

    in bootstrap 4, you will have to override flex and max-width property too:

    <div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>
    Login or Signup to reply.
  5. 0

    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;
}
    Login or Signup to reply.
  6. 0

    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

    Login or Signup to reply.
  7. 0

    This question is quite old, but I have made it that way (in TYPO3).

    Firstly, I have made a own accessible css-class which I can choose on every content element manually.

    Then, I have made a outer three column element with 11 columns (1 – 9 – 1), finally, I have modified the column width of the first and third column with CSS to 12.499999995%.

    Login or Signup to reply.
  8. 0

    Bootstrap 4 uses flex-box and you can create your own column definitions

    This is close to a 1.5, tweak to your own needs.

    .col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}
    Login or Signup to reply.
  9. 0

    you can use this code inside col-md-3 , col-md-9

    .col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}
    Login or Signup to reply.
  10. 0

    According to Rex Bloom response I have write a bootstrap helper:

    //8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}
    Login or Signup to reply.
  11. 0

    Bootstrap has column offsets, so if you want columns with equal width without specifying size use this.

    <div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

    Also check out this link
    https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

    Login or Signup to reply.
  12. 0

    I have created a custom bootstrap extension that allows you to use the following classes:

    // replace * with a number between 0 and 11
col-*-1qtr
col-*-half
col-*-3qtr

    Also note that you can use responsive classes, such as:

    • col-sm-2-half (2.5)
    • col-md-0-3qtr (0.75)
    • col-lg-11-1qtr (11.25)
    • col-xl-5-half (5.5)

    Here is an example:

    <!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hoomanbahreini/bootstrap-half-and-quarter-grid/fractional-grid.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Using fraction of columns</h2>
  <div class="row">
    <div class="col-2-3qtr bg-success">col-2-3qtr (2.75)</div>
    <div class="col-3-1qtr bg-warning">col-3-1qtr (3.25)</div>
    <div class="col-3-half bg-success">col-3-half (3.5)</div>
    <div class="col-2-half bg-warning">col-2-half (2.5)</div>
  </div>
</div>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search