Exploring the versatility of Bootstrap 4's grid system with varying column widths

I am encountering an issue with div alignment in my code. The first two col-3 classes seem to have different widths than the next two col-3 classes, causing elements to appear unaligned. Here is the code snippet:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row p-3 w-100">
  <h5 class="text-center w-100">Color Legend</h5>
  <div class="row">
    <div class="col-3 w-100">
      <i class="far fa-circle circle px-2"></i>
    </div>
    <div class="col-9 w-100">
      <p>Not visited topic</p>
    </div>
  </div>
  <div class="row">
    <div class="col-3 w-100">
      <i class="far fa-circle circle px-2" style="color:#016fc9;"></i>
    </div>
    <div class="col-9">
      <p>Visited topic</p>
    </div>
  </div>
  <div class="row">
    <div class="col-3">
      <i class="far fa-circle circle px-2" style="color:#00bfa5"></i>
    </div>
    <div class="col-9">
      <p>Visited topic, pop-up question successfully answered.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-3">
      <i class="far fa-circle circle px-2" style="color:#f44336"></i>
    </div>
    <div class="col-9">
      <p>Visited topic, pop-up question failed after visiting.</p>
    </div>
  </div>
</div>

To see a screenshot of the alignment issue, click here: https://i.stack.imgur.com/LRgqd.png

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

You are not following the proper hierarchy of .row > .col. Each col should have .row as its parent, and vice versa. In your current structure, you have both .row as a parent and child, which is why you had to use .w-100. Please see the corrected code below.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1N" crossorigin="anonymous">
<div class="row p-3">
  <div class="col-12">
    <h5 class="text-center">Color Legend</h5>
  </div>
  <div class="col-12">
    <div class="row">
      <div class="col-3">
        <i class="far fa-circle circle px-2">I</i>
      </div>
      <div class="col-9">
        <p>Not visited topic</p>
      </div>
    </div>
  </div>
  <div class="col-12">
    <div class="row">
      <div class="col-3">
        <i class="far fa-circle circle px-2" style="color:#016fc9;">I</i>
      </div>
      <div class="col-9">
        <p>Visited topic</p>
      </div>
    </div>
  </div>
  <div class="col-12">
    <div class="row">
      <div class="col-3">
        <i class="far fa-circle circle px-2" style="color:#00bfa5">I</i>
      </div>
      <div class="col-9">
        <p>Visited topic, pop-up question <strong>successfully</strong> answered.</p>
      </div>
    </div>
  </div>
  <div class="col-12">
    <div class="row">
      <div class="col-3">
        <i class="far fa-circle circle px-2" style="color:#f44336">I</i>
      </div>
      <div class="col-9">
        <p>Visited topic, pop-up question <strong>failed</strong> after visiting.</p>
      </div>
    </div>
  </div>
</div>

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

Populating a Listview in jqueryMobile with dynamic elements

I am struggling with my listview. Whenever I try to add or remove items from the list, the jquery mobile styling does not get applied to the new content that is added. <ul data-role="listview" id="contributionList"> <li id="l1"><a>5. ...

javascripthtmljquery-mobile

Stop the css animation from playing

I created a slideshow using HTML and CSS, and I'm looking to implement a feature where the slideshow pauses when my mouse hovers over it. I attempted to achieve this by using -webkit-animation-play-state: paused;, but unfortunately, it only pauses one ...

htmlcssanimationslideshow

What is the appropriate title for the css class?

When creating a stylesheet for a website, should the CSS style names be related to the website or its content? For example, if my website is about web development, would it be correct to use style names like: #web-development-header .web-development-comp ...

htmlcssseo

How to center two divs side by side horizontally using Bootstrap

How can I make the layout work on screens 575px and below with the class "col-xs-6 col-sm-6 col-md-8"? <div class="container"> <div class="row align-items-center"> <div class=&q ...

htmlcssbootstrap-4

Using the download attribute with anchor tags in React components

I utilize cloud storage to store my files, and during the upload process, they receive unique prefixes in their names. For instance, if I upload a file called test.txt, it will be saved as 7ea205f01ae5_test.txt. It's worth mentioning that I also captu ...

htmlreactjs

Initiate playing HTML video upon user click

My current situation is quite straightforward. I have an HTML video that plays when I click a div with the class ".play". $('.play').click(function() { $('.video').get(0).paused ? $('.video').get(0).play() : $('.vide ...

htmlvideoclickmp4playback

Flexbox transforms Safari's Horizontal Nav into a Vertical layout

Issue with Horizontal Navigation Bar Turning Vertical in Safari I've been using flexbox to adjust the spacing and size of the li elements as the browser window size changes. Everything works perfectly fine in Chrome and Firefox, but for some reason, i ...

htmlcsssafariflexbox

Disable the time selection feature in the text input field

Despite seeing the same question asked before for this issue, I am looking for a solution that does not involve replacing the textbox with the same ID. When Timepicker is selected in the dropdown menu timepicker, it should activate in the textbox (which i ...

javascriptjqueryhtmlbootstrap-timepicker

Gathering information from a website by using BeautifulSoup in Python

When attempting to scrape data from a table using BeautifulSoup, the issue I'm running into is that the scraped data appears as one long string without any spaces or line breaks. How can this be resolved? The code I am currently using to extract text ...

pythonhtmlweb-scrapinghtml-parsingbeautifulsoup

Unable to add padding to <b> tag

Can anyone explain why the padding-top property is not taking effect for the <b> tag? Check out this link <b>hello world</b>​ b { padding-top: 100px; } ​ ...

css

Rearrange elements within a div by clicking a button

I want to shuffle div elements with a click of a button using a dissolve animation in HTML5. An example of what I am looking for is similar to this website When you scroll on the page, there are links such as All, Intro, Solution. Clicking on any link sh ...

javascriptjqueryhtmlcssbootstrap-4

What is the best way to reduce the size of an image using a URL?

As I work on creating a website in React for a company, my main focus is on developing a drive repository where users can upload files. One issue that has arisen is the performance of the "photos" folder, as it contains numerous high-resolution images th ...

htmlcssreactjsbrowser

Creating an HTML Canvas using an AngularJS template

I am facing an issue with rendering html elements on a canvas using html2canvas JS. I am utilizing AngularJS for data binding on the html page, but unfortunately, the dynamic data is not showing up on the canvas generated from these html elements. For inst ...

javascripthtmlangularjscanvas

Add HTML content individually to each item in the array

I am currently developing a plugin and I need to load a preset in order to populate a form with the relevant data. In an attempt to write concise code, I created a variable called "template" that looks like this: var Fields = '<div c ...

javascriptjqueryhtml

What is the best choice for my CSS: creating a block or an element using BEM methodology

** According to the official BEM website ** Create a block: If a section of code can be reused and does not rely on other page components being implemented. Create an element: If a section of code cannot be used separately without the parent entity (the ...

htmlcssnamingbemmethodology

"Creating visual art with processing in 2D using P5

Recently, I came across a webpage about rendering 2D objects in processing using JavaScript. Here is the link to the page: Upon trying out the example code provided on the page in a new P5 project, I noticed that the code structure looked like this: HTML ...

javascripthtmlprocessingp5.js

Creating an interactive bootstrap modal: a step-by-step guide

For instance, I have 3 different tags with unique target-data for each one. <a class="btn btn-outline-primary btn-sm" href="#" data-toggle="modal" data-target="#firstdata"> DATA 1 </a> <a class=&q ...

javascriptphphtmlbootstrap-4

Javascript functions correctly when the HTML file is opened locally, however, it encounters issues when accessed through an http-server

My HTML file includes an embedded web widget from tradingview.com with the following code: <!-- TradingView Widget BEGIN --> <span id="tradingview-copyright"><a ref="nofollow noopener" target="_blank" href="http://www.tradingview.com" style ...

javascripthtmlcss

What is the best way to center CSS slider switches without causing any damage to them?

Does anyone have ideas on how to align CSS Slider Switches? I tried using position: absolute; margin-left: 15em, but the sliders need to remain non-absolute for visual effects. A flex grid was considered, but I don't want the switches to wrap. Usin ...

htmlcss

Attaching an SVG chart to a node causes it to malfunction, indicating a fundamental element is absent

I've been attempting to display a d3fc graph on an svg node within my react.js component and return the entire structure. However, it crashes when I try to apply .datum(my_data) to the d3 selection. I suspect that I'm overlooking something fundam ...

htmlreactjsd3.jssvgd3fc