The alignment of columns in Bootstrap 4 no longer follows the horizontal pattern seen in Bootstrap 3

After migrating to Bootstrap 4, I noticed that my columns are all vertically aligned. I have updated the boostrap-min.css from version 3 to 4 and double-checked the code for any errors, but everything seems correct.

To further troubleshoot, I used a JS fiddle and was able to replicate the vertical alignment issue there as well. If anyone can provide guidance or point me in the right direction, I would appreciate it. According to the documentation at https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match, everything should work correctly.

<div class="row">
    <div class="col-12">
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
        <div class="col-md-2">
            <h1>TEST</h1>
        </div>
    </div>
</div>

Click here to view the JSFiddle example.

htmlcssbootstrap-4

Answer №2

If you are using the bootstrap4 grid structure which is based on flexbox, it is important to handle the row and col grid elements carefully. You do not necessarily need to use a .col-12 div, simply wrap your .col-2 elements within a row and make sure to enclose the row within the .container class.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.row h1 {
  font-size: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
    <div class="col-2">
      <h1>TEST</h1>
    </div>
  </div>
</div>

Alternatively, if you prefer to keep the .col-12 div, you can utilize another row to wrap the .col-2 elements in order to demonstrate the grid structure concept, even though it may be redundant (Just illustrating the grid structure).

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.row h1 {
  font-size: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
        <div class="col-2">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </div>
</div>

Answer №3

Make sure to remove the first col-xs-12

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-3">
    <h1>TEST</h1>
  </div>
  <div class="col-2">
    <h1>TEST</h1>
  </div>
  <div class="col-3">
    <h1>TEST</h1>
  </div>
  <div class="col-4">
    <h1>TEST</h1>
  </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

Trouble with div height 100% not syncing with bootstrap and wordpress

This particular code (by the way, taken from another stackoverflow post) is functioning properly as the red div#wrapper extends from top to bottom... <html> <head> <style media="screen"> #wrapper { height:100%; width:300px; b ...

htmlcsswordpresstwitter-bootstrap

Implementing a different background image for every menu item when hovering over its parent

I am trying to figure out how to achieve this. My menu is placed in a container that is 500px high, with a background image. I would like the background image to change when hovering over a parent menu item. I believed I could do this using something like: ...

javascriptjqueryhtmlcss

Ensure all input-group-addons have equal width with Bootstrap 4

Can the width of all prepend add-ons be made the same? For example, in this image, I would like Email, License Key 1, & License Key 2 to have equal lengths. Is this achievable? If I were to forgo add-ons and only use regular labels and a form grid, it wo ...

csstwitter-bootstrapbootstrap-4

Is it possible to style solely the initial <tr> within a table, regardless of the presence of the <tbody> element?

I have a unique scenario with my table setup - it contains multiple tbody elements, some generated by the browser and others added programmatically. I am trying to style only the first tr within my table, typically achieved using table > tr. The challen ...

htmlcss

How can screen readers be alerted about freshly loaded content through ajax?

Whenever a user clicks on a button, I want to add more content to the page. The new content will be visually clear, but how can I ensure that screen readers can easily access it? I've come across two best practices that suggest additional steps may b ...

htmlajaxaccessibility

The text in the Bootstrap 4 card spills over the card-text boundary

I've encountered an issue when trying to insert text into a card-text paragraph. Here's what happens: https://i.sstatic.net/CWGh2.png I've been attempting to resolve the problem without success. I'm completely stumped on how to fix it ...

phphtmltwitter-bootstraptwitter-bootstrap-4

`Set the body height to equal that of the entire document`

Currently facing an issue on the test page when scrolling down: The body element is set to have a height of 100%, but it only takes up the viewport's height, not the entire document height. The goal is for the page to always display at 100% of the d ...

cssheight

Disabling the scrollbar in Selenium screenshots

When using Chromedriver to capture screenshots of webpages, my code effectively does the job. However, I am now facing an issue with removing the unsightly scrollbars from the image. Is it feasible to inject CSS into the webpage in order to achieve this? W ...

javascriptc#cssseleniumselenium-chromedriver

How come the ".includes" method is not functioning properly with my two-dimensional array?

Introduction: As part of a school project, I am tasked with creating a program that checks answers in a "test" to determine their correctness. This project requires the use of a two-dimensional array and the ".includes" function. Requirements: Mand ...

javascripthtmlarraysfunction

Set a checkbox to be pre-checked on page refresh using a PHP conditional statement

Thank you for your patience and understanding as I seek help with my issue. I am currently working on a form that consists of checkboxes which control the boolean values in a database. Upon submission, these values are updated in the database and the page ...

javascriptphpjqueryhtmlcheckbox

What is the inner workings of CSS?

I'm curious about the inner workings of CSS. Does the HTML get interpreted before CSS, or vice versa? Or does it all apply as soon as the browser has constructed the DOM? I would appreciate a detailed explanation on this topic. ...

css

Difficulty in adjusting the height of the popover menu that appears when using the Select Validator in Material UI

I am having trouble adjusting the height of a popover that emerges from a select validator form in Material UI. Despite attempting various methods, including adding the following CSS to the main class: '& .MuiPopover-paper': { height: &apos ...

javascriptcssreactjsweb-applicationsmaterial-ui

Javascript on-page scroll positioning

My current dilemma involves finding a solution to optimize in-page scrolling for mobile users. I have a sticky header on the page, which causes #section1 to place the scroll position behind the sticky header. Is there a way to adjust the scroll position b ...

javascripthtmlcssscrollanchor

Modify the button's color when clicked and add it to an array with JavaScript

I am currently working on changing the color of buttons to indicate a selection. When a button is selected, its value is added to an array. If the same button is clicked again, it becomes unselected and its color reverts back to the original state, with it ...

htmlarraysangularjscss

Button placed incorrectly

I am utilizing bootstrap 4, thymeleaf, and datatable I attempted to place a button on top of the table to the right <div class="col-sm-12"> <div class="float-right"> <button id="newUsers" type="button" th:onclick="@{/newusers ...

javascripthtmlcssdatatablesbootstrap-4

Is there an alternative to translate3d that I should consider using?

When the code transform: translate3d(0,0,0); is included, it prevents position:fixed; from working. After removing it, I am able to use position:fixed; once again. However, there is now an issue with my navigation bar, as it relied on the transform code to ...

css

Navigating the browser view across an extensive HTML page without relying on scrollbars

I have a large HTML page (approximately 7000x5000) and I need to be able to move the user's view around with JavaScript. Disabling the ability for the user to scroll by hiding the browser scrollbars using overflow:hidden on the HTML element is easy. ...

javascriptjqueryhtmlview

Adjusting the width of the final card in the deck grid

Currently, I am utilizing angular-deckgrid for image display purposes. Within a container, there are two columns in which images are displayed with the column-1-2 class according to the documentation. However, in certain scenarios where only one image is p ...

angularjscssangularjs-ng-repeat

Tips for aligning content to the right edge

Within a container class, I have a background image set up and divided it into col-6. The first col-6 is currently empty. However, my goal is to add content on the right side of this column. I attempted to achieve this by adding the justify-content-end c ...

htmlcsstwitter-bootstrapbootstrap-4

In what way can you reach an unfamiliar form within a controller?

I am working with multiple dynamically generated forms, each associated with a different model. In my controller, I need to iterate through all the errors within the forms. I assign form names based on the models. <form name="{{myForm}}" novalidate> ...

javascriptjqueryangularjshtml