Html Question posted in
Some basic documentation can be found here.

Html – How to reduce the width of a single div in grid system in Bootstrap

<div class="col-sm-2" style="text-align: right;" >
        mytext1
</div>
<div class="col-sm-2" style="text-align: right;" >
        mytext2
</div>
<div class="col-sm-2" style="text-align: right;" >
        mytext3
</div>

I need to reduce the size of only second div and I don’t want to use col-sm-1 since it’s too small and don’t want col-sm-2 since it’s too big. But I need something inbetween something like col-sm-1.5 is there a way to resolve this.

Tags:

2

Answers


  1. 0

    You can define your Custom class since bootstrap sm-1 and sm-2 corresponds to 8.33% and 16.66% you can create a custom class like so:

    .col-sm-1-5 {
  flex: 0 0 12.5%;
  max-width: 12.5%;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-sm-1" style="text-align: right;">
  col-sm-1
</div>
<div class="col-sm-1-5" style="text-align: right;">
  col-sm-1-5
</div>
<div class="col-sm-2" style="text-align: right;">
  col-sm-2
</div>
    Login or Signup to reply.
  2. 0

    You could create a custom class that calculates the width based off the 12 columns in the grid.

    Here I am dividing 100% by 12 to get the width of one column, and multiplying it by 1.5.

    I have also added padding: 0 15px to the custom class to match Bootstraps default 15px left and right padding for their .col classes.

    .row {
  width: 100%;
}

.column {
  border: 1px solid black;
  text-align: right;
}

.col-sm-1-half {
  width: calc((100% / 12) * 1.5);
  padding: 0 15px;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="column col-sm-2">
    mytext1
  </div>
  <div class="column col-sm-1-half">
    mytext2
  </div>
  <div class="column col-sm-2">
    mytext3
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search