CODEWITHSUNDEEP
htmlbootstrap-4
Слава Иванов
Слава Иванов

Reputation: 495

How to make my layout responsive using Bootstrap 4

I have the following Grid system which looks like this: firstState

<div class="container" style="margin-top: 25px">
  <div class="row">

    <div class="col-8">
      <div class="row">
        <div class="col-12" style="border: 1px solid black">A1</div>
        <div class="col-12" style="border: 1px solid black">A2</div>
        <div class="col-12" style="border: 1px solid black">A3</div>
        <div class="col-12" style="border: 1px solid black">A4</div>
        <div class="col-12" style="border: 1px solid black">A5</div>
      </div>
    </div>

    <div class="col-4">
      <div class="row" style="height: 100%">
        <div class="col-12" style="border: 1px solid black; height: 100%">B</div>
      </div>
    </div>

  </div>
</div>

https://codepen.io/slava4ka/pen/QWWwOax

How can we make it so that when reducing the size of the visibility zone to .col-sm-, the grid looks like this:

secondState

Upvotes: 2

Views: 52

Answers (2)

Aaron
Aaron

Reputation: 1083

I find this way to be a bit cleaner to read the html. But there are probably lots of ways to achieve these results depending on the use case.

<style>

@media (min-width: 768px){
    .special-col{
        position: absolute;
        right: 0;
    }

}
</style>

<div class="container" style="margin-top: 25px">
  <div class="row">

    <div class="col-12">
      <div class="row">
        <div class="col-md-8" style="border: 1px solid black">A1</div>
        <div class="col-md-8" style="border: 1px solid black">A2</div>
        <div class="col-md-8" style="border: 1px solid black">A3</div>
        <div class="col-md-4 special-col" style="border: 1px solid black;height:100%;">B</div>    
        <div class="col-md-8" style="border: 1px solid black">A4</div>
        <div class="col-md-8" style="border: 1px solid black">A5</div>
      </div>
    </div>



  </div>
</div>

Upvotes: 2

connorfahn
connorfahn

Reputation: 26

Since Bootstraps4 uses Flex-Box you could try this:

<div class="container" style="margin-top: 25px">
   <div class="row">
    <div class="col-md-8 col-sm-12">
      <div class="row">
        <div class="col-12" style="border: 1px solid black">A1</div>
        <div class="col-12" style="border: 1px solid black">A2</div>
        <div class="col-12" style="border: 1px solid black">A3</div>     
      </div>   
    </div>
    <div class="col-md-4 col-sm-12">
      <div class="row" style="height: 100%">
        <div class="col-12" style="border: 1px solid black; height: 100%">B</div>
      </div>
    </div>
    <div class="col-md-8 col-sm-12">
      <div class="row">
        <div class="col-12" style="border: 1px solid black">A4</div>
        <div class="col-12" style="border: 1px solid black">A5</div> 
      </div
    </div>
  </div>
</div>

However, your B element would need a fixed height, otherwise it will be as tall as the others

Upvotes: 1

Related Questions