Question 101460 in Html Question posted in
Some basic documentation can be found here.

Html – Please advise how can I achieve bootstrap design for the below sample using Bootstrap 5

I want to achieve the below screenshot design in bootstrap 5 please advise :

Design

I am new to learning bootstrap please guide me.

Tags:

2

Answers


  1. 0

    Try something like this,

    <!DOCTYPE html>
<html>
  <head>
    <title>Two Grids with Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-8">
          <!-- First grid with 8 columns -->
          <h2>First Grid</h2>
          <p>This grid takes up 8 columns.</p>
          <div class="row">
            <div class="col-md-12">
              <!-- Full-width footer -->
              <p>Scroll bar in this section...</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <!-- Second grid with 4 columns -->
          <h2>Second Grid</h2>
          <p>This grid takes up 4 columns.</p>
        </div>
      </div>
    </div>

  </body>
</html>

    Here is a working fiddle

    Here added grid to medium and hire screens, And for small screens (eg: phones) will look no grid. And even snippet also make sure to look full page view.

    Login or Signup to reply.
  2. 0

    I’ve made an alternative fiddle which also respects the scrolling.

    This uses the bootstrap classes: overflow-auto, overflow-hidden and the approximate height via Viewport Height e.g. height: 77vh

    <!DOCTYPE html>
<html>

  <head>
    <title>Two Grids with Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  </head>

  <body>

    <div class="row">
      <div class="col-md-8 overflow-auto" style="height:77vh">
        <!-- First grid with 8 columns -->
        <h2>First Grid</h2>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
      </div>
      <div class="col-md-4 overflow-hidden" style="height:77vh">
        <!-- Second grid with 4 columns -->
        <h2>Second Grid</h2>
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
        <p>No Scorlling
      </div>
    </div>

    <div class="row">
      <div class="col-md-12 overflow-auto" style="height:23vh">
        <!-- Full-width footer -->
        <h2>Footer</h2>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
        <p>Scrolling</p>
      </div>
    </div>

  </body>

</html>

    Fiddle: https://jsfiddle.net/andyg2/4a2yjd6f/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search