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

Html – Need to create a grid with bootstrap

I am looking for a bootstrap chief who can help me building a simple grid … I am too stupid to do so ans even cannot describe it well enough for ChatGPT. I hope this doesn’t take a lot of efforts:

At the top of the page is a banner over full width with a picture (already done and working). Height 80px

Below is a "grid" that has following conditions:

3 columns, col-4 each (responsive not required) The rest of the height (full – the banner height) is split into 8 equal "segments". Column 1 has two "items" (will be cards) one with 4 segments height, and the second one also with 4 segments height. The sound one spans also to column2 (so it has a width of 8) on top of this, also a 4 heights item is available. So the design should be like this:

https://ibb.co/89vWfPF

Column 3 has 3 items with following heights: 1st item height 2 2nd item height 1 3rd item height 5

Maybe someone can easily crate this. Thanks

I tried to work with columns and rows but was not able to make it

Tags:

2

Answers


  1. 0

    I hope this helps you. This code will create a responsive grid with the specified column and item heights. It uses Bootstrap’s grid system to achieve the desired layout.
    Please note that you may need to adjust the column classes (col-md-4) based on your specific requirements. You can modify the content and styling of the items (item class) to suit your needs.

    <html>
<head>
  <title>Bootstrap Grid Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    .banner {
      height: 80px;
      background-color: #f2f2f2;
    }

    .item {
      background-color: #e6e6e6;
      border: 1px solid #cccccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container-fluid">
    <div class="row banner">
      <!-- Your banner content here -->
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="item" style="height: 320px;">Item 1</div>
        <div class="item" style="height: 320px;">Item 2</div>
      </div>
      <div class="col-md-4">
        <div class="item" style="height: 640px;">Item 3</div>
      </div>
      <div class="col-md-4">
        <div class="item" style="height: 160px;">Item 4</div>
        <div class="item" style="height: 80px;">Item 5</div>
        <div class="item" style="height: 400px;">Item 6</div>
      </div>
    </div>
  </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    If you set a suitable, minimum height for your .container you can achieve this by utilizing the bootstrap .rows and .col-*s with the built-in .h-* utility classes and defining two more of your own i.e. .h-one-eighth & .h-five-eighths.
    Below is a fully responsive example of your requirements in action:

    #my-grid {
  height: 100vh;
}

#my-grid [class*="col-"] {
  background-color: rgba(0, 255, 0, .1);
  border: 1px solid black;
  overflow: hidden;
}

.h-one-eighth {
  height: 12.5% !important;
}

.h-five-eighths {
  height: 62.5% !important;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

<div id="my-grid" class="container-fluid text-center">

  <div class="row h-100">
    <div class="col-8 h-100">
      <div class="row h-50">
        <div class="col-6">
          1
          <p>content</p>
        </div>
        <div class="col-6">
          2
          <p>content</p>
        </div>
      </div>
      <div class="row h-50">
        <div class="col-12">
          3
          <p>content</p>
        </div>
      </div>
    </div>
    <div class="col-4 p-0">
      <div class="col-12 h-25">
        4
        <p>content</p>
      </div>
      <div class="col-12 h-one-eighth">
        5
        <p>content</p>
      </div>
      <div class="col-12 h-five-eighths">
        6
        <p>content</p>
      </div>
    </div>
  </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search