CODEWITHSUNDEEP
htmlcss
Prem Kishore Gupta
Prem Kishore Gupta

Reputation: 1

How to create a responsive layout for 2 columns inside each column I want another 2 columns?

How to create a 4-column responsive layout?

| column left | column right | column left| column right|

I am expecting a single row like the given below on a large devices

| column left | column right | column left| column right|

like the given below on a medium & small devices

| column left | column right |

| column left | column right |

Upvotes: 0

Views: 55

Answers (2)

prinkpan
prinkpan

Reputation: 2247

You can use bootstrap grid as follows:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">col 1</div>
<div class="col-lg-3 col-md-6 col-sm-6">col 2</div>
<div class="col-lg-3 col-md-6 col-sm-6">col 3</div>
<div class="col-lg-3 col-md-6 col-sm-6">col 4</div>
</div>

Try to click on "Run code snippet" you will see the demo for small screens. Then click on "Full page" you will see it for large screens.

The bootstrap grid uses 4 screen sizes, they are:

  1. lg for laptops and desktops - screens equal to or greater than 1200px wide
  2. md for small laptops - screens equal to or greater than 992px wide
  3. sm for tablets - screens equal to or greater than 768px wide
  4. xs for phones - screens less than 768px wide

The screen is divided into 12 parts, so the number after screen sizes specifies how many parts the div should cover.

So, in the example above, the divs will cover 3 parts on large screens and 6 parts on small screens.

More information on bootstrap grid system can be found here

Upvotes: 1

Seba Cherian
Seba Cherian

Reputation: 1793

Try using bootstrap grid. Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-6 col-sm-6"">
      One of three columns
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6"">
      One of three columns
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6"">
      One of three columns
    </div>
    <div class="col-lg-3 col-md-6 col-sm-6"">
      One of four columns
    </div>
  </div>
</div>

Upvotes: 0

Related Questions