CODEWITHSUNDEEP
htmlbootstrap-4
Jim
Jim

Reputation: 16012

aligning columns in bootstrap 4

I have the following bootstrap layout (with a bootply).

<div class="container">
    <div class="row">
      <item class="col"><div class="card-block"><p>32</p></div></item>
      <item class="col"><div class="card-block"><p>64</p></div></item>
      <item class="col"><div class="card-block"><p>128</p></div></item>
      <item class="col"><div class="card-block"><p>256</p></div></item>
      <item class="col"><div class="card-block"><p>512</p></div></item>
    </div>
    <div class="row">
      <item class="col"><div class="card-block"><p>32</p></div></item>
      <item class="col-9"><div class="card-block"><p>32</p></div></item>
    </div>
</div>

It produces the following:

enter image description here

Is it at all possible to re-arrange the html to produce this?

enter image description here

and for it to remain responsive (the last green 32 can just take up as much space as it can until it has to wrap - which is the default behaviour)?

Upvotes: 3

Views: 64

Answers (2)

Aritz
Aritz

Reputation: 31649

Would this be responsive enough?

<div class="container">
    <div class="row">
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>32</p></div></item>
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>64</p></div></item>
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>128</p></div></item>
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>256</p></div></item>
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>512</p></div></item>
    </div>
    <div class="row">
      <item class="col-md-2 col-sm-12"><div class="card-block"><p>32</p></div></item>
      <item class="col-md-8 col-sm-12"><div class="card-block"><p>32</p></div></item>
  </div>
</div>

Upvotes: 0

Suson Waiba
Suson Waiba

Reputation: 156

<div class="container">
<div class="row">
  <item class="col"><div class="card-block"><p>32</p></div></item>
  <item class="col"><div class="card-block"><p>64</p></div></item>
  <item class="col"><div class="card-block"><p>128</p></div></item>
  <item class="col"><div class="card-block"><p>256</p></div></item>
  <item class="col"><div class="card-block"><p>512</p></div></item>
</div>
<div class="row">
  <item class="col" style="max-width: 20%"><div class="card-block"><p>32</p></div></item>
  <item class="col"><div class="card-block"><p>32</p></div></item>
</div>

This seems to give what you need!

Upvotes: 2

Related Questions