Design your website with a sleek and modern Bootstrap 4 grid layout

I'm attempting to create a layout similar to the one shown in the linked image, where the left column spans across multiple rows. Currently, my code looks like this:

<div class="row my-row">
    <div class="col-6 my-col">1</div>
    <div class="col-6 my-col">
        <div class="row my-row">
            <div class="col-lg-12 my-col">2</div>
            <div class="col-lg-12 my-col">3</div>
        </div>
    </div>
</div>

Is there a different or better way to achieve this layout? I am also struggling to understand how this code is functioning, so I would appreciate an explanation from someone. Thank you.

cssbootstrap-4

Answer №1

You're on the right track! Bootstrap applies CSS styles to components based on their class names, allowing you to align items horizontally using the "row" class for vertical alignment. Within a "row" element, elements tagged with "col-#" are sized according to the number following "col." For example, col-12 spans the full width of the container, while col-6 takes up half the page. To further divide a column, create additional columns within another row with each column set as col-6 for equal distribution.

To split a row into thirds, use three col-4 elements in a new row (as 4+4+4 = col-12). Additionally, Bootstrap can automatically size columns equally by omitting the number after col, simply adding a col class within a row.

For more guidance, check out Bootstrap's comprehensive documentation!

Answer №2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
  <section>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-md-4 col-lg-4 col-12 col-sm-6 d-flex align-items-center">
             Unique text here
            </div>
            <div class="col-md-8 col-lg-8 col-12 col-sm-6">
              <div class="row">
                <div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
                  Unique text here
                </div>
                <div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
                  Unique text here
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
                  Unique text here
                </div>
                <div class="col-md-6 col-sm-6 col-12 col-lg-6 d-flex align-items-center">
                  Unique text here
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-lg-4 col-sm-4 col-12 d-flex align-items-center">
          Unique text here
        </div>
        <div class="col-md-4 col-lg-4 col-sm-4 col-12 d-flex align-items-center">
          Unique text here
        </div> 
        <div class="col-md-4 col-lg-4 col-sm-4 col-12 d-flex align-items-center">
          Unique text here
        </div> 
      </div>
    </div>
  </section>
</body>
</html>

Try this out! It'll also vertically align your contents as you've showed on the image. For reference go through https://getbootstrap.com/docs/4.0/utilities/flex/ this link. Also if you want it to be centered horizontally use .justify-content-center

Answer №3

To achieve this layout, you can implement the following structure:

<div class="row">
    <div class="col-4">
        1
    </div>
    <div class="col-8">
        <div class="row">
            <div class="col-6">
                2
            </div>
            <div class="col-6">
                3   
            </div>
            <div class="col-6">
                4
            </div>
            <div class="col-6">
                5
            </div>

        </div>
    </div>
    <div class="col-4">
        6
    </div>
    <div class="col-4">
        7
    </div>
    <div class="col-4">
        8
    </div>
</div>

This method allows you to nest rows within existing columns, creating a visually seamless multi-column layout.

For elements 6 to 8, simply insert three col-4 divs in the same row to achieve the desired result.

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

Personalize the color scheme of your HTML template

I recently downloaded a template from html5up.net, specifically the one located here. My intention was to add my own touch by changing the blue color to orange. I managed to do so by tweaking the main.css file and it worked like a charm. However, the res ...

htmlcss

Styling WordPress Ninja Tables with CSS

I am currently seeking a solution to customize each table generated through CSS. In the past, I have utilized tools like TablePress which assigned a unique "id" to each table, allowing for individual customizations when inspecting through Google Chrome - f ...

htmlcsswordpresscss-tablesninja

The drop-down tabs are being covered by my <div> element

I've been struggling with the layout of my website due to issues with the positioning of my div tags. Whenever I hover over the arcade tab or other drop-down menus, they end up behind the div for my movies. I would like to reverse this behavior so tha ...

htmlcss

Complete picture in a circular div with aspect ratio

I'm currently working on creating a profile page and I'd like to have an image inside a circular div. The challenge is that I want the image to maintain its aspect ratio, even though the dimensions are unknown and users can upload images of any s ...

javascriptjqueryhtmlcss

Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10. I am currently facing an issue with getting the confirmation box to display properly across different browsers. To begin, please visit and l ...

javascriptjqueryhtmlcsssafari

Having trouble applying the alternate style sheet to handheld devices

For a single page, I have implemented two different style sheets. <link rel="stylesheet" href="css/lsharecomplete_mob.css" media="handheld" type="text/css" /> <link rel="stylesheet" href="css/lsharecomplete_dt.css" type="text/css" media="Screen" ...

csshtmlmobile

Guide: Writing code that caters to different types of media in React using Material-UI

After reviewing the documentation, I believed that the optimal solution in later versions of material-ui was to use useMediaQuery, but unfortunately, I am unable to implement it correctly. My objective is to hide a menu when the page is being printed, so I ...

cssreactjsmaterial-ui

CSS KeyFrame animations

My goal is to have my elements gracefully fade in with 2 lines extending out of a circle, one to the left and one to the right. However, I am struggling to achieve this. Every time I attempt to display the lines, it ends up shrinking the entire design. M ...

csscss-animationskeyframe

Leveraging the power of Javascript to trigger 2 functions when a button is clicked

After receiving great answers to my previous questions, I am in search of more valuable insights. The challenge at hand involves 9 buttons on a webpage with text inputs. Upon clicking a button, the text entered by the user is supposed to be transferred to ...

javascriptjqueryhtmlcss

Steps for creating scrollable boxes with uniform size using tailwindcss:1. Define a specific width and height for

<div className="overflow-x-auto p-5 gap-5"> <div className={` bg-orange-700 w-[300px] h-[300px]`}></div> <div className={` bg-orange-700 w-[300px] h-[300px]`}></div> <div className={` bg-orange-700 ...

cssnext.jstailwind-css

"Modifying the content:url() with JavaScript: A step-by-step guide

Hello, I am currently working on creating a traffic light using an array of images. My goal is to change the image path specified in the CSS when a button is clicked, to change the appearance of the traffic light. In this case, the 'content.url()&apos ...

javascripthtmlcss

Creating a list of items using HTML tags should be coded in a way that fits neatly within the main container element

UPDATE: I've come across this code that seems to be functioning somewhat as desired. You can view it live at UPDATE - It's still not aligning properly within the #main div! I've experimented with both 100% and 990px for width in #menu span, ...

htmlcsslistmenu

CSS3 transition jQuery function with browser compatibility and customizable variables

Why is this code not working as expected? I have noticed that it only functions correctly on Chrome when I remove all vendors except for webkit. Interestingly, I have tried a similar example using the 'transform' property with the same method and ...

javascriptjquerycsstransition

By utilizing the body element as the container instead of a div, the content shifts to the left by eight pixels

When the body is used as the wrapper instead of a div, the content shifts eight pixels to the left (on a 1920×1080 display) when it extends below the fold. The examples below illustrate this difference in code snippets. Please note that the variance is on ...

htmlcss

Showing sorting arrows in column headers using Django's tables2

Recently, I began implementing django-tables2 in one of my projects. Everything is functioning correctly, except for one issue that has me stumped -> trying to display an arrow image in the column headers to indicate the current sorting direction (if ap ...

pythonhtmlcssdjango

What's the best way to incorporate mouseenter() and mouseleave() into several elements sharing the same class?

I have a vision for a fun game where players must navigate from one platform to another without falling off the edges. The game starts when you hover over the initial platform, and success is achieved by reaching the final platform. However, failure occurs ...

javascriptjqueryhtmlcss

Eliminating padding from columns results in the appearance of a horizontal scrollbar

I needed to eliminate the padding from the bootstrap grid column classes. So I went ahead and did just that .col-x { padding: 0; } However, this action ended up causing the entire layout to break as a horizontal scrollbar appeared. I've put to ...

htmlcsstwitter-bootstrapbootstrap-4

I am trying to set the text direction to RTL for the window.getSelection value. However, I'm having trouble figuring out how to remove getSelection from the current value

var userInput = document.getElementById('inputText').value; function insertAtCursor() { if (window.getSelection) { selectedText = window.getSelection(); ...

javascripthtmlcss

Navigate down the page until you reach the section that is set to display as a block

Is it possible to make the page automatically scroll to a specific element located in the middle of the page when changing its display property from none to block? ...

jquerycss

The jquery click event is not working as expected

Hey there, I've been working on creating a dropdown menu that can be activated by clicking for better usability on touch screens. $('a.dropsmall2').click(function() { $(this).next('ul').slideToggle(500,'easeInOutQuad'); ...

javascriptjquerycss