Creating a layout with two distinct columns and varying rows using Bootstrap

Recently delving into the world of Bootstrap, I encountered a challenge when attempting to replicate an old design created using tables. Here is the design:

https://i.sstatic.net/byoTu.png

Unfortunately, my Bootstrap skills are not quite up to par in achieving this exact design:

https://i.sstatic.net/eEJS6.png

The D rows [D1, D2] are misaligned, which is something I aim to correct. Below is the code snippet I've used, sourced from Bootstrap examples:


<!doctype html>
<html lang="en">
... (rest of HTML code)
</body>
</html>
csshtmltwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

This...

<div class="row mb-2">
  <div class="col-md-4">
    <div class="alert alert-success"> C</div>
  </div>
  <div class="col-md-8">
    <div class="alert alert-warning"> D1</div>
  </div>
  <div class="col-md-8">
    <div class="alert alert-warning"> D2</div>
  </div>
</div>

...needs to be like so: 

<div class="row mb-2">
  <div class="col-md-4">
    <div class="alert alert-success"> C</div>
  </div>
  <div class="col-md-8">
    <div class="row mb-2">
      <div class="col-12">
        <div class="alert alert-warning"> D1</div>
      </div>
    </div>
    <div class="row mb-2">
      <div class="col-12">
        <div class="alert alert-warning"> D2</div>
      </div>
    </div>
    <div class="row mb-2">
      <div class="col-12">
        <div class="alert alert-warning"> etc...</div>
      </div>
    </div>
  </div>
</div>

The proper layout is:

<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>

<body>
  <header>
    <nav></nav>
  </header>
  <main>
    <section class="jumbotron">
      <div class="container">
        jumbotron
      </div>
    </section>
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          left column
        </div>
        <div class="col-md-8">
          <div class="row">
            <div class="col-12">content 1</div>
            <div class="col-12">content 2</div>
          </div>
          <div class="row">
            <div class="col-6">content 3.1</div>
            <div class="col-6">content 3.2</div>
          </div>
          <div class="row">
            <div class="col-md-4">content 4.1</div>
            <div class="col-md-8">content 4.2 (5 below md)</div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer>
    <div class="container">
      <div class="row">
        <div class="col-12">
          footer content...
        </div>
      </div>
    </div>
  </footer>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

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

What is the best way to position a collection of images together for optimal

I'm a new web developer and I'm struggling with aligning images on my page. I've added the images successfully, but I want them to fill the entire space of the previous div. I'm not concerned about the aspect ratio, just the alignment. ...

htmlimagebootstrap-4thumbnails

Using jQuery to dynamically populate a list with the information from a JSON dataset

How can I utilize JSON data to ensure that jquery populates the correct ul in this code snippet, creating 5 ul and populating them with li elements? Expected output: The slides should be assigned to specific modules as indicated in the JSON data, instead ...

javascriptjqueryhtmljson

Creating space between elements in CSS div elements

I've come across numerous resources on this topic that have already been answered, but none of them have provided a satisfactory solution. Here's the scenario: I have created a basic fiddle showcasing the desired behavior: @ See fidlle If I h ...

htmlcss

Slick.js integrated with 3D flip is automatically flipping after the initial rotation

I'm encountering an issue with my CSS3 carousel and 3D flipping. Whenever I navigate through the carousel and flip to the next slide, the first slide seems to automatically flip/flop after completing the rotation. You can see a visual demonstration o ...

javascriptjqueryhtmlcss

My CSS nesting seems to be posing a problem - any idea what

Something unexpected happened while I was working on a project with others. Last night, some files were edited and when I updated my subversion today, the nested divs seemed to have lost their hierarchy. I have been trying all day to fix this issue but wit ...

csshtmlnested

Is it truly unsemantic to use transparent <hr> elements for responsive vertical spacing?

I've recently adopted a unique technique for managing vertical spacing in front-end design by using transparent <hr> elements as spacers. I understand that this method is not favored among most of the web community, but I believe it has its meri ...

htmlcssfrontendsemantic-markup

Ways to maintain hover functionality when the submenu is visible

My website features a simple table that displays devices and their characteristics. A condensed version of the table can be found in the link below. import "./styles.css"; import { SubMenu } from "./SubMenu"; const subMenuSlice = <S ...

javascriptcssreactjshoversubmenu

What is the best way to revert the Highcharts bar color back to its default color?

I am currently working with Highcharts version 4.1.10 In my bar chart, I have implemented a feature where the color of the bar changes when its value exceeds a certain threshold. //This function is called at regular intervals by a timeout function myTime ...

javascriptcsshighchartscolors

Not successfully aligning all buttons except for the initial one

HTML code snippet <div class="breadcrumbs row"> <button><a href="#">One</a></button> <button><a href="#">Two</a></button> <h1><button><a href="#">Three</a></button>& ...

css

Engage in a sequence of actions by tapping and retapping on a div element

Is there a way to toggle the color of an element from black to orange with a single click and back again with another click? Additionally, I have set up a hover effect in CSS that changes the color to orange when hovered over. In my current code, the elem ...

javascriptjqueryhtmlcss

What is the best way to split a Bootstrap navbar into two separate rows?

I'm struggling with breaking the navbar to have the navbar-brand in one row and the collapse menu in another. <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d0601060013 ...

htmlcssbootstrap-5

Search for the highest value from the dropdown list in real-time using Selenium with Python

Currently, I am utilizing Python along with Selenium to automate a certain application. My goal is to extract the top value from a drop-down menu, however, the values in the menu are constantly changing. This makes it impossible for me to input a static XP ...

pythonhtmlseleniumxpath

What is the process of adding a phone number with an extension on an iPhone web application?

When building a web application, inserting the following number: <a href="tel:888-123-4567">call now</a> The iPhone will automatically convert that link into an instant call function when clicked. But what should I do if the number includes ...

htmliosphone-numberphone-call

Discover the secret to implementing NavBars in Bootstrap 4 without the need for jQuery or relying on bulky bootstrap.js

On our website, the majority of pages will primarily utilize GRID and NAVBAR. Loading all of jQuery and bootstrap.min.js on every page is unnecessary for us. Essentially, the only JS required is for managing the opening and closing of NAVBAR on mobile req ...

bootstrap-4

Using CSS for layout positioning

This problem has been confounding me for quite some time now, even though the solution is likely very simple. I can't seem to figure out how to align two divs of different sizes side by side without one being pushed down a few lines when text is added ...

htmlcss

Is it possible for a kraken.js backend to manipulate the content of a webpage?

Currently using kraken.js, which is an express.js framework, to construct a localized website. Within the header section, there are 3 language options provided as links. FR | EN | DE My goal is to have the link corresponding to the currently set locale ( ...

javascripthtmlexpressdust.jskraken.js

Update the available choices in one select field based on the choice made in another

I am working on a feature where users can select their country, either USA or Canada. Currently, I have all the American states listed in one dropdown menu. However, I want this dropdown to change to display Canadian provinces when users select Canada. Bel ...

javascriptjqueryhtmlcssjquery-ui

Instead of accessing the HTML page directly, you can view the source page by using the F12

I need to extract both data and IPs from VirusTotal.com using selenium and Beautiful Soup in Python. When I make a get request, I only receive the view-source HTML instead of the complete data-rich HTML shown in Inspect mode (F12). Does anyone have any su ...

pythonhtmlseleniumbeautifulsoup

The output from the Compute function is not showing up in the TextBox as expected

I'm currently working on an HTML page that contains two textboxes and a button. I've created a Compute function to display the result in one of the textboxes, but unfortunately, it's not functioning as expected. No alerts are appearing on th ...

javascripthtml

How to center text both horizontally and vertically in the heart of an HTML/CSS layout

I need to center the text vertically and horizontally in the nav div. Below are both the HTML and CSS code snippets. Here is the HTML snippet: <html> <head> </head> <title> Dom Chronicles </title> <body> <div id=" ...

htmlcss