Tips for establishing uniform width for all Bootstrap columns

Having more than 12 columns in a row causes the columns to stack vertically, but the top ones have varying sizes compared to the bottom ones.

<div class="container-fluid">
  <div class="row">
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
  </div>
</div>

Attempting to make the columns responsive (allowing them to grow) while ensuring that all columns have the same width.

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

https://i.sstatic.net/Uomwi.png https://i.sstatic.net/oFhJE.png

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you are experiencing layout issues, consider adding a col-md-4 with no content or having only 2 col-md-4 elements in a row. Take a look at the full screen for better clarity. (Updated response based on feedback)

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

<div class="container">
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
      2
    </div>
    <div class="col-md-4">
      3
    </div>
  </div>  
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
     2
    </div>
     <div class="col-md-4" id="last-column">
    </div>
  </div>
</div>

Answer №2

You can achieve the desired layout without having to write custom CSS. Utilize the responsive Bootstrap classes that are already available for displaying content. Adding another .row may not be necessary, but it could come in handy for organizing a separate row.

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

<div class="container">
  <div class="row">
    <div class="col-md-4">
      1
    </div>
    <div class="col-md-4">
      2
    </div>
    <div class="col-md-4">
      3
    </div>
    <div class="col-md-4">
      4
    </div>
    <div class="col-md-4">
      5
    </div>
    <div class="col-md-4 d-none d-lg-block">
      6
    </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

Switching between states using JavaScript

Here is a code snippet I'm working with: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="C:\Users\rapandey\Documen ...

javascripthtmljqueryjquery-events

Responsive design challenge

I'm currently working on a WordPress theme with a fixed header and footer on the homepage, and a vertical slider in between that includes content and images. I've made the website responsive, but I'm facing an issue where the content in the ...

htmlcssresponsive-designscrollcss-position

What is the best way to hide a div when an image is positioned on top of it?

Previously, I inquired about creating a "cursor mirror" where the movement of the cursor in the top section of a website would be mirrored in the opposite direction in the bottom section. You can find the original question here. Expanding on that concept, ...

javascriptjqueryhtmlcssmouseover

Creating a Category from a single table column in MySQL Output

I currently have a single table containing numerous posts. My goal is to establish distinct categories, such as: - Miley Cyrus - Taylor Swift - Calvin Harris - Ellie Goulding Is it feasible to generate these categories from just one table instead of ...

phphtmlmysql

Looking for an HTML tag in BeautifulSoup that contains exactly one attribute

I am working on a website in HTML and need to extract specific data from it. The HTML structure is as follows: <p class="provice hidden-xs"> <span class="provice-mobile">NEW YORK</span> witespace <span class="provice-mobile" style="co ...

pythonhtmlbeautifulsoup

Issue with Bootstrap collapsible menu not expanding when clicked

I want to make my collapsed navbar menu expand when clicked on a small screen. I've customized a Bootstrap navbar to split my links at each end of the bar. Right now, the links collapse when the screen size decreases, but clicking on the accordion but ...

htmlangularmenubootstrap-5

Randomize elements with the click of a button

Every time the page refreshes, the words shuffle around. For instance, "May I# know# your name?" shuffles to "know May I your name". To display the correct sentence with "#" as "May I know your name?", click the SHUFFLE button to trigger the shuffling. HT ...

javascriptphphtmlshuffle

How can you use JavaScript to determine the width of a CSS element?

Is there a way to make the VarDisk2 element disappear when the width of VarDisk1 exceeds 70? <script> var VarDisk1 = document.querySelector("Disk1"); var VarDisk2 = document.getElementsByClassName("Disk2"); ...

javascripthtmlcsspure-js

Django Template Spacing Optimization

I'm struggling to understand the issue at hand. I am noticing unwanted spaces appearing between span elements when using indentation in the template. For example: <div> <span class="empty-space"></span> {% for dia in dias %} <s ...

htmldjango

What could be causing Html.checkboxfor to fail in updating the boolean value of the model?

I am currently working on a project where customers can select multiple users to remove them from the database. The issue I'm facing is that the checkboxes are not changing or sending the isSelected variable, which tells the server which users should ...

c#htmlasp.netmodel-view-controller

How can I incorporate classes from multiple CSS files into my WordPress theme?

Currently, I am utilizing wp_enqueue_style to incorporate two CSS files within a single function. However, the issue that arises is when I try to apply a class, it seems that only classes from one of the files can be utilized and it ends up overriding anot ...

csswordpresswordpress-themingbootstrap-5

Simply tap on the image to include it in the HTML5 Canvas drawing

Currently, I am in the process of drawing a circle onto my html5 canvas as shown in the code snippet below: <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> &l ...

javascripthtmldrag-and-drophtml5-canvaskineticjs

What causes a button to move to a new line following a div element?

Why does a button move to a new line after a <div> element even though it's an inline element? If I try putting the button inside the <div>, it gets removed due to JQuery constantly updating the <div>. Is there any way to prevent the ...

htmlcss

Creating dynamic HTML elements for each section using JavaScript

Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...

javascripthtmldomaddeventlistener

Is it possible to incorporate various colors into an SVG image using HTML, specifically with d3.js?

Is it possible to dynamically fill different parts of an SVG image with colors based on data using HTML, CSS, and JavaScript? I have a project in Angular that utilizes D3.js. Here is an example image for reference, where the arms, head, and legs are fill ...

javascripthtmlangularsvgd3.js

Scrolling to the bottom of the page triggers jQuery to load additional content

Is your jQuery script not working properly when attempting to load more content upon reaching the bottom of the page? It seems to be functional on Safari/iPad and Android Mozilla browsers, but encountering issues on default Android and Chrome browsers. ...

javascriptandroidjquerycssscroll

What is the syntax for indenting text inside an inline-block element?

Essentially, the checkboxes displayed here are in a graphical format to avoid using checkbox elements for accessibility reasons (only the link should be interactive). However, aligning a span next to an href and indenting the text to line up with the star ...

css

Having trouble with Bootstrap item rendering correctly on the page

Hey there, I'm currently utilizing bootstrap to create the layout of my webpage. const NewRestaurant = () => { return ( <div className="mb-4"> <form action=""> <div classNam ...

reactjstwitter-bootstrapbootstrap-4

Alignment in rows with a flexible number of rows

My goal is to create a series of equally sized elements with consistent spacing. I want these elements to be evenly distributed both horizontally and vertically on the page, adjusting accordingly to changes in screen size or number of elements. The challen ...

htmlcss

Issue with disabled state in radio button container not functioning

I am facing an issue with a radio button div that I need to disable when the condition yAxisEditorCtrl.forceCombinedYAxis is true. Here is the original code: <div class="y-axis-editor"> <div class="vis-config-option display-size-normal form- ...

javascripthtmlangularjsangularjs-ng-disabled