CODEWITHSUNDEEP
htmlgridbootstrap-4
Nitin Karande
Nitin Karande

Reputation: 1325

How to use column wise verticle grid using Bootstrap in HTML

I been trying to display below attached image vertical column wise Grid view using Bootstrap in HTML. Can give me some idea for how we can achieve this .

Now i am normally display row wise column grid with reference of Grid systems on w3school.but this are not responsive to mobile view. So I need to display on vertical Display Grid Like that

Thank you in advance !!

Upvotes: 0

Views: 1081

Answers (3)

Tony Stark
Tony Stark

Reputation: 265

I divided thesection into vertical columns. Inside each column I inserted row class to further divide row into column. 

h2,h1 {
    background-color: #ffffff;
  }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<section class="text-center clearfix">
  
  <!-- Divided sections into column-->
  <div class="col-4 float-left" style="background-color:red">
    <h1>col-1</h1>
    
    <!-- Each column contains row-->
    <div class="row" style="background-color: #ff3333">
    
      <!-- You can further divide vertical column-->
      <div class="col-6"> 
        <h2>item-1(a)</h2> 
      </div>
      <div class="col-6"> 
        <h2>item-1(b)</h2> 
      </div>
    </div>
    <div class="row" style="background-color: #ff4d4d">
      <h2>item-2</h2>
    </div>
  </div>
  
  
  <div class="col-4 float-left" style="background-color:green">
    <h1>col-2</h1>
    <div class="row" style="background-color:#1aff66">
      <h2>item-1</h2>
    </div>
  </div>
  
  
  <div class="col-4 float-left" style="background-color:blue">
    <h1>col-3</h1>
    <div class="row" style="background-color: #0069cc">
      <h2>item-1</h2>
    </div>
    <div class="row" style="background-color: #4d94ff">
      <h2>item-2</h2>
    </div>
    <div class="row" style="background-color: #b3d1ff">
      <h2>item-3</h2>
    </div>
    <div class="row" style="background-color: #cce6ff">
      <h2>item-4</h2>
    </div>
  </div>
  
</section>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Upvotes: 1

Vineeta Mehta
Vineeta Mehta

Reputation: 458

You can use bootstrap 4 flex utility

https://getbootstrap.com/docs/4.0/utilities/flex/

Upvotes: 0

PHP Geek
PHP Geek

Reputation: 4033

For vertical column wise Grid view you can use

$('.grid').masonry({
  // set itemSelector so .grid-sizer is not used in layout
  itemSelector: '.grid-item',
  // use element for option
  columnWidth: '.grid-sizer',
  percentPosition: true
})
.grid-sizer,
.grid-item { width: 20%; }
/* 2 columns */
.grid-item--width2 { width: 40%; }
<div class="grid">
  <!-- width of .grid-sizer used for columnWidth -->
  <div class="grid-sizer"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  ...
</div>

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.

You can use this link for reference https://masonry.desandro.com/

Upvotes: 0

Related Questions