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.

Solution

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>