Making a grid on bootstrap 4

user_3733831 0
Viewed 28

Look at the below attached image.

enter image description here

I am trying to create a grid as showing on image using boostrap4. In destop, first column need to be col-5 width and other 3 equal. In mobile 1st col to be col-12 and other 3 equal.

My HTML:

<div class="row">
  <article class="col-5">
    <h1 class="text-uppercase">Some Contents</h1>                
  </article>  

  <article class="col">
    <span class="counter">10</span>
  </article>  
  
  <article class="col">
    <span class="counter">10</span>
  </article> 

  <article class="col">
    <span class="counter">10</span>
  </article>  
</div>

This markup is working on destop. but not in mobile. Hope somebody may help me out.

bootstrap-4 css html
2 Answers

Need to add breakpoints for small devices

.text-uppercase{
        background:#f0f0f0
      }
      .counter{
        background:#f0f0f0;
        font-size:68px
      }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <div class="row">
      <article class="col-md-5 col-sm-12">
        <h1 class="text-uppercase">Some Contents</h1>
      </article>

      <article class="col-md col-sm-4">
        <span class="counter">10</span>
      </article>

      <article class="col-md col-sm-4">
        <span class="counter">10</span>
      </article>

      <article class="col-md col-sm-4">
        <span class="counter">10</span>
      </article>
    </div>

user_145592540

You can do it like this, you have to keep in mind that bootstrap is mobile first.

  <div class="row">
        <article class="col-12 col-md-6">
            <h1 class="text-uppercase">Some Contents</h1>
        </article>

        <article class="col-12 col-sm-4 col-md-2">
            <span class="counter">10</span>
        </article>

        <article class="col-12 col-sm-4 col-md-2">
            <span class="counter">10</span>
        </article>

        <article class="col-12 col-sm-4 col-md-2">
            <span class="counter">10</span>
        </article>
    </div>
user_49587530
Related