What are the steps to create a dynamic grid interface using Bootstrap 5?

I attempted to use the code below but it did not work:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4"><img src="image link"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">11</div>
  </div>
</div>

When using my code, it appears like this: https://i.sstatic.net/41tKT.png

How can I achieve a design that looks like this? https://i.sstatic.net/JFQZs.png

htmlcssbootstrap-5

Answer №1

Bootstrap 5.1 has recently launched featuring an experimental CSS grid option, which simplifies achieving the desired layout...

  <div class="grid">
        <div class="g-col-lg-6 g-col-md-4 g-col-sm-8 g-col-12 g-row-2 bg-danger"></div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">1</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">2</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">3</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">4</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">5</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">6</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">7</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">8</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">9</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">10</div>
        <div class="g-col-lg-2 g-col-md-4 g-col-sm-4 g-col-6 border">11</div>
  </div>

/* for first block to span 2 rows */
.g-row-2 {
    grid-row: 1 / 3;
    min-height: 200px;
}

Bootstrap 5 CSS Grid

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for implementing a toggle feature for an ion-card element

I am looking to create a toggle effect on ion-card, where clicking on the card will highlight it until either unclicked or another card is clicked. Similar to this - https://i.sstatic.net/MH5WA.png How can I achieve this effect on ion-card? Here is my H ...

cssangularionic-frameworkionic3

Issue with the height of nested divs within ion-col not being rendered properly on iOS devices

I am currently using Ionic 2 for my project. Presented below is the template I have: HTML Code <ion-grid> <ion-row> <ion-col width-20> <div> <img src="http://www.kacholy.com/new_site/pic/image_727 ...

htmlioscssionic2

Button placement that feels out of place

I'm looking to style an input-group with a form input and submit button using Bootstrap 5. Here's my current code: .card { margin: auto; width: 50%; padding: 10px; opacity: 0.9!important; top: 250px; } <div class="card-header"> ...

htmlcssbootstrap-5

Using JQuery to toggle a fixed div at the bottom causes all other divs to shift upwards

I'm currently working on a chat feature using node JS, and while the functionality is perfect, I've run into an issue with the CSS aspect of it. The problem arises when we have multiple tabs and clicking on just one causes all the tabs to move u ...

phpjqueryhtmlcssnode.js

What is the best way to make a slanted text div?

After experimenting with different approaches, I'm curious to hear your opinions. Currently, I am utilizing floats to achieve a certain layout, but this method is hindering my ability to use flexbox for styling job postings on the right side. This is ...

htmlcss

HTML Element Split in Two by a Line in the Middle

Greetings to all, after observing for a while I have decided to make my first post here (and just to clarify, I am an electrical engineer, not a programmer). I am in search of creating a unique element in HTML where I can detect clicks on both its upper a ...

javascripthtmlcss

Guide to importing scoped styles into a <NextJS> component

When importing a CSS file, I usually do it like this: import './Login.module.css'; In my component located at components/login/index.js, I define elements with classes such as <div className="authentication-wrapper authentication-basic ...

javascriptcssnext.js

Issue with aligning items vertically using CSS and Javascript

I must admit, I am not well-versed in CSS. My goal is to create a performance bar using CSS and Javascript. So far, I have managed to generate a background bar with another bar inside that fills up to a specific percentage. However, my issue lies in the fa ...

javascriptcssdom

Is it possible to trigger an AJAX validation only after the jQuery validation plugin has successfully validated the input?

I utilized the jQuery validation plugin for form field validation. The goal now is to send an ajax request only when the fields are deemed valid by the jQuery validation plugin. JavaScript: $(function(){ $("#form").validate({ errorPlacement: ...

javascriptphpjqueryhtml

List in Order - Concealed Leading Number in 3-Digit Elements

I am facing an issue with a multi-column ordered list that has hundreds of entries. The problem is with the left-most column - once the numbers reach three digits, the first digit gets hidden. So instead of displaying 97, 98, 99, 00, 01, it shows up as 97, ...

csshtml-lists

Updating CSS when input field value changes using jQuery

var emailFooter = $('footer#footer input.email'); var emailFooterLength = emailFooter.val().length; var hiddenCaptcha = $("footer#footer .captcha-hide"); emailFooter.focus( function() { hiddenCaptcha.css("disp ...

javascriptjquerycsshtml

Troubleshooting a problem with the interactive YouTube player in Safari

I have successfully implemented a custom YouTube player on my website, allowing users to watch videos within a modal box. Below is the code for reference: JS & HTML: <script src="https://www.youtube.com/iframe_api"></script> <script typ ...

javascriptjqueryhtmlyoutubesafari

Executing a component's method using HTML in Vue2

In my development project, there is a .vue file named ServiceList. This file imports the component called Information.vue. My objective is to execute the code from the Information component in a loop within the template of the ServiceList file. Here is an ...

javascripthtmlmethodsvue.jscomponents

When using a Jquery $.each loop with DOM, it may not function properly on every element

I am attempting to create an HTML editor with additional markup capabilities in this demonstration, I am utilizing a jQuery $.each loop however, this loop only functions on the final element Here is the code snippet I am using: // Custom Svg Icon ...

javascripthtmljqueryloopsforeach

How can I make Div elements disappear based on conditions using If/else Statements in a JSP Page?

I've implemented a JSP function that manages user login by verifying their name and password input. However, even if the user enters incorrect information, they can still view the page. I want to hide all content on the page so that the user cannot se ...

jqueryhtmlcssjspif-statement

How can I bring the toolbar to the forefront of the page in an Angular/HTML environment?

I am currently facing an issue with bringing the toolbar to the forefront of the page. When I scroll down, the elements on the page end up covering the toolbar which is not the desired behavior. Below is the CSS code for the toolbar: .maintoolbar.mat-tool ...

htmlcssangularangular-material

Looking for a simple method to generate a text-only dropdown link in Bootstrap 4 without using a button?

Is there a simple method to create a text-only dropdown link in Bootstrap 4 without using a button? Or do I have to adjust the padding and buttons using CSS to make the "Delivery" dropdown blend in with the rest of the text? I've searched online and ...

htmlcssbootstrap-4

What is the best way to position the arrow next to the header of a sorted table?

I've been working with a table and wanted to enable sorting on all table headers, so I decided to refer to the bootstrap example for guidance. The issue I encountered in this example is that the arrow indicating sort direction appears on the left sid ...

angularbootstrap-4angular-materialbootstrap-5angular-ui-bootstrap

jQuery form validation with delay in error prompts

I am experiencing a strange issue with my HTML form validation function. It seems to be showing the alert div twice, and I can't figure out why this is happening. Adjusting the delay time seems to affect which field triggers the problem. Can anyone sp ...

javascriptjqueryhtml

How can I prevent jQuery Explode from changing fonts during the explosion effect?

When you visit , click on any scholarship name. Then, click on the "close" button, and you will notice that while "exploding," the font changes from the default "Trebuchet MS/Trebuchet" to "Times New Roman." Despite trying to define the body as {font-famil ...

jquerycssjquery-uiexplodejquery-effects