Search code examples
twitter-bootstrapbootstrap-4flexboxbootstrap-grid

Grid Calculator Bootstrap or Flex Box

I want to build a grid with bootstap or flex-box which should look like this:

grid

Unfortunately my attempt with the bootstrap grid isn't working as excpeted. I want that the amount numbers(11, 2) are aligned right and have the same div-box with. In my expectation the div with the number 2 should have the same width as the div with the number 11, means the width of these div-boxes should be based on the bigger one(11). Giving these two divs a static col width is not what I want.

HTML:

<h6 class="py-2">my attempt</h6>

<div class="row text-right">
 <div class="col col-md-auto width-should-be-equal">11</div>
 <div class="col col-md-auto">*</div>
 <div class="col col-md-auto">50$</div>
 <div class="col col-md-auto text-center">=</div>
 <div class="col col-md-auto">550$</div>
</div>

<div class="row text-right">
 <div class="col col-md-auto width-should-be-equal"> 2</div>
 <div class="col col-md-auto">*</div>
 <div class="col col-md-auto">500$</div>
 <div class="col col-md-auto text-center">=</div>
 <div class="col col-md-auto">1000$</div>
</div>


<h6 class="py-2">not the goal</h6>

<div class="row text-right">
 <div class="col col-md-2 width-should-be-equal">11 </div>
 <div class="col col-md-auto">*</div>
 <div class="col col-md-auto">50$</div>
 <div class="col col-md-auto text-center">=</div>
 <div class="col col-md-auto">550$ </div>
</div>

<div class="row text-right">
 <div class="col col-md-2 width-should-be-equal">2</div>
 <div class="col col-md-auto">*</div>
 <div class="col col-md-auto">500$</div>
 <div class="col col-md-auto text-center">=</div>
 <div class="col col-md-auto">1000$</div>
</div>

CSS:

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
 border: solid 1px #6c757d;
 padding: 10px;
}

.width-should-be-equal {
  border: 1px solid blue;
}

Thanks for the help!

https://jsfiddle.net/6qojnz78/

Solution

  • As explained here there's no flexbox (Bootstrap grid) solution for "fit to width of widest".

    IMO, the closest workaround is to use the display:table-cell. You can still use the grid row/col and override with table-cell only on md and larger (d-md-table-row and d-md-table-cell)...

    <div class="container">
    <div class="row d-md-table-row text-right">
        <div class="col d-md-table-cell width-should-be-equal">11</div>
        <div class="col d-md-table-cell text-center">*</div>
        <div class="col d-md-table-cell">50$</div>
        <div class="col d-md-table-cell  text-center">=</div>
        <div class="col d-md-table-cell">550$</div>
    </div>
    <div class="row d-md-table-row text-right">
        <div class="col d-md-table-cell width-should-be-equal"> 2</div>
        <div class="col d-md-table-cell text-center">*</div>
        <div class="col d-md-table-cell">500$</div>
        <div class="col d-md-table-cell  text-center">=</div>
        <div class="col d-md-table-cell">1000$</div>
    </div>
</div>

    https://codeply.com/p/qwyIJi2PDD