Tips for centering content vertically in a column using Bootstrap 4

Working on a Bootstrap 4 grid layout, my goal is to vertically align content within a column while maintaining its full height.

Here is my current layout for reference: https://i.sstatic.net/6RWx3.png

I am aiming for the content alignment to look like this instead: https://i.sstatic.net/ZuqO7.png

Current CSS:

html, body {
  height: 100%;
}

.flex-fill {
  flex: 1;
}

Current HTML:

<div class="container d-flex h-100 flex-column">
    <div class="row flex-fill d-flex">
      <div class="col-8 bg-dark m-2">
        TEXT
      </div>
      <div class="col bg-dark m-2">
        TEXT
      </div>
    </div>
    <div class="row flex-fill d-flex">
      <div class="col bg-dark m-2">
        TEXT
      </div>
  </div>
</div>

For a live example, check out this JSFiddle.

I have attempted to use the .align-self-center class to center the content vertically within the row, but it resulted in losing the full height of the column.

If you have any suggestions on how to achieve the desired layout, I would greatly appreciate your insights!

Thank you for your assistance!

htmlcssbootstrap-4

Answer №1

NishargShah is correct about the utilization of Flexbox. Bootstrap underwent a redesign centered around Flexbox, marking a fundamental shift from Bootstrap3 to Bootstrap4 (although there are numerous other alterations, the transition from Floats to Flexbox is the key change).

Nevertheless, a more straightforward approach exists:

Alter:

  <div class="col-8 bg-dark m-2">
    TEXT
  </div>

to:

  <div class="col-8 bg-dark m-2 d-flex align-items-center">
    TEXT
  </div>

Modified jsFiddle

html, body {
  height: 100%;
  color:white !important;
}

.flex-fill {
  flex: 1;
}

.container {
  padding: 2em 1em;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="container d-flex h-100 flex-column">
    <div class="row flex-fill d-flex">
      <div class="col-8 bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
      <div class="col bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
    </div>
    <div class="row flex-fill d-flex">
      <div class="col bg-dark m-2 d-flex align-items-center">
        TEXT
      </div>
    </div>
</div>

Concise explanation:
d-flex activates flexbox for this container
align-items denotes flexbox vertical alignment (for immediate children within container)
justify-content represents flexbox horizontal alignment (for immediate children within container)

Remarks:

If you are utilizing Bootstrap, utilize the provided Bootstrap classes whenever feasible. Bootstrap offers a variety of pre-built classes tailored specifically for Flexbox.

An intriguing aspect of flexbox is that any container can serve as a flexbox parent -- even those that are flexbox items. In other words, the same container can function as both a flexbox child to the container above it, and a flexbox parent to the containers within it.

Flexbox necessitates two components:

  • a parent container
  • child items

Certain flexbox settings are configured on the parent, while the remainder are applied to the child items. In this scenario, the only necessary settings are applied to the parent.

References:

Informative 20-minute video tutorial

Top-tier flexbox cheatsheet

Bootstrap4 Flexbox classes

Answer №2

You can utilize the following code snippet for positioning:

style="position: absolute;              
         top: 50%;"

to adjust the positions accordingly.

html,
body {
  height: 100%;
}

.flex-fill {
  flex: 1;
}

.container {
  padding: 2em 1em;
}
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<div class="container d-flex h-100 flex-column">
  <div class="row flex-fill d-flex">
    <div class="col-8 bg-dark m-2">
      <p style="position: absolute;              
         top: 50%;">TEXT </p>
    </div>
    <div class="col bg-dark m-2">
      <p style="position: absolute;              
         top: 50%;">TEXT</p>
    </div>
  </div>
  <div class="row flex-fill d-flex">
    <div class="col bg-dark m-2">
      <p style="position: absolute;              
         top: 50%;">TEXT </p>
    </div>
  </div>
</div>

Answer №3

Avoid using unnecessary CSS by utilizing the convenient Bootstrap utility classes...

  • .min-vh-100 - ensures full content height
  • .d-flex - enables display flex
  • .align-items-center - for easy vertical alignment
  • .justify-content-center - for simple horizontal alignment

Here is the HTML structure:

<div class="container d-flex min-vh-100 flex-column text-white">
    <div class="row flex-fill d-flex">
        <div class="col-8 bg-dark m-2 d-flex justify-content-center align-items-center">
            TEXT
        </div>
        <div class="col bg-dark m-2 d-flex justify-content-center align-items-center">
            TEXT
        </div>
    </div>
    <div class="row flex-fill d-flex">
        <div class="col bg-dark m-2 d-flex justify-content-center align-items-center">
            TEXT
        </div>
    </div>
</div>

For more information, visit:

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

Tips for getting rid of the excess space surrounding an image within a div tag

Placing images inside bootstrap card divs within col divs is my current challenge <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"& ...

csstwitter-bootstrap

Adjust the placement of a small division within a larger resizable division without affecting the contents of the container

Check out this JSFiddle I created: http://jsfiddle.net/asaakius/5nGYS/7/ In the code, you'll see a small div with the id #menu containing the letter "v". When I remove this div, the textarea and textbox align perfectly and resize together seamlessly. ...

jquerycsshtmlpositioningresizable

How to display validation without jquery form appearing

Validation is set up to work - when the user clicks on search without entering a reference number, the validation message pops up along with the empty form. The form stays empty because nothing was entered into the input field. What I want is for only the ...

jqueryhtmlformsvalidation

Issues with Pdf.js functionality on Internet Explorer

Could someone shed some light on why this code isn't functioning in Internet Explorer? It works perfectly fine in Chrome. Snippet of my HTML: <head> <script type='text/javascript' src="//code.jquery.com/jquery-1.9.1.js"></sc ...

javascripthtmlinternet-explorer

Customize the printing settings within bootstrap by modifying the background color from transparent to a solid color using CSS/SCSS

I am facing an issue with the bootstrap CSS/print feature. In the bootstrap CSS (reset.css) file, all styles are cleared for printing purposes. @media print { * { text-shadow: none !important; color: black !important; background: transparen ...

csstwitter-bootstrapoverridingsass

Display an echo within a DIV

Encountering a frustrating issue and seeking assistance. The problem seems to involve loading a page into a DIV. I've created a form for updating database information in a single file with PHP code, loaded into a DIV. When accessing the page directly ...

phphtmlecho

Unable to scroll after the webpage redirects

I am currently working on developing a website for uploading images with a comment feature. The comments section is displayed below the image in the 'imagedisplay.php' file. If a user is not logged in, they are redirected to the sign-up page and ...

javascriptphpjqueryhtml

What is the reason my hyperlinks are not clickable?

I'm working on a project that checks if a Twitchtv user is live streaming and provides a link to their page. The streaming part is working correctly, but I'm having trouble making the username clickable. Even though the URL is valid and the page ...

javascriptjqueryhtmltwitch

Retrieving Data Attribute From Form Using Python Flask

Is there a way to retrieve data from a POST request in Flask that is not the standard text field value? I am looking for a solution that does not involve using JavaScript, but rather only Python. Let's consider a simplified example: I need to extrac ...

pythonhtmlformspostflask

Exploring the wonders of multer in a nodejs application

I am having trouble uploading a file from my webpage to a Node server. Although I can see that the form data is reaching the server's router, No file seems to be saved in the upload folder. What could I be doing wrong? //router section const expr ...

htmlnode.jsuploadmulter

How can I change the padding that is being inherited from "@ .MuiAlert-icon"?

Is there a method to override the padding inherited from "@ .MuiAlert-icon"? The Chrome inspector indicates that the current padding is set to 7px. .MuiAlert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; ...

javascriptcssmaterial-ui

Tips for staying on the same page when hovering over a table

My hover table contains multiple pages, with each row offering various actions one can take with an item. After performing an action, the page refreshes and returns to the first page of the table. Is there a way to stay on the same page after executing a ...

javascripthtmlbootstrap-4

Divs are being obstructed by the navigation bar

I am seeking a solution to prevent div elements from being positioned below my navigation/information bar when the screen width is minimized. The information bar has a height of 1200px and I would like it to stay on the left side without any overlapping fr ...

htmlcss

Attempting to use tabs within a tab does not function correctly

Visit the CodePen link here This is the codepen example. <div class="row"> <div class="col s12"> <ul class="tabs2"> <li class="tab col s3"><a href="#test1">Test 1</a></li> <li class=" ...

jqueryhtmlcssmaterialize

troubles with compatibility between bootstrap.css and IE11

I am currently developing a web application using AngularJS and bootstrap.css. While everything appears fine on Chrome, I am facing some formatting issues on both Firefox and IE11. HEAD <head> <meta charset="utf-8"> <meta http-equi ...

javascriptangularjshtmltwitter-bootstrap-3

Running JavaScript code along with HTML elements extracted from a jQuery ajax callback

Alternatively, not exactly "executing," but rather updating a pre-existing function with a function returned in the response. Step 1 I have an HTML5 page detailing a specific location. The server-side includes a ColdFusion file called "MapFunction.cfm" ...

javascriptjqueryajaxhtml

What causes a block element to not stretch to match the width of its parent when it is in a fixed position?

I am currently developing a fixed horizontal navigation bar that spans the entire width of the screen. However, when I attempt to make its position fixed, the unordered list element only occupies the width required to contain its content. Considering that ...

htmlcss

Is it possible to enable auto play on HTML5 Video for iPad similar to BBC iPlayer?

Can HTML5 Videos automatically play on iPads? I used to believe that it wasn't possible because of iOS restrictions, but after trying BBC iPlayer on my iPad, I noticed that the videos did autoplay upon loading. Could this indicate that it is indeed ...

javascriptioshtmlipadhtml5-video

Building applications with Vue.js and Framework7 while incorporating the powerful Axios library

I am inexperienced with framework7 and vuejs. Can someone confirm if I am importing it correctly? Additionally, how can I make axios accessible from other pages? Here is my main.js file. I’m uncertain if the import process is accurate or if any steps ar ...

htmlvue.jsaxioshtml-framework-7

The center alignment doesn't seem to function properly on mobile or tablet devices

I've designed a basic webpage layout, but I'm facing an issue with responsiveness on mobile and tablet devices. The problem seems to be related to the width: 100% property in my CSS, but I can't seem to pinpoint the exact solution. While tr ...

htmlcssmobilewidthcentering