Achieve perfect alignment both vertically and horizontally within a container-fluid using Bootstrap

As the heading suggests, I'm having trouble centering content inside a column within .container-fluid in Bootstrap 4.

Below is the code I'm using, but I can't figure out what's wrong. Can someone please assist me?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 my-auto mx-auto">
      <div class="mx-auto">
        <h1 class="mb-5">This is a title
        </h1>
        <p class="mb-5">Lorem ipsum</p>
        <a href="#">Click me</a>
      </div>
    </div>
    <div class="col-md-8">
      <p>Something else that's not important but needs to be here </p>
    </div>
  </div>

Why isn't the .mx-auto class working and is there an alternative I can use instead?

htmltwitter-bootstrapcssbootstrap-4

Answer №1

To achieve the desired centering of content within the col-* flex items, you must also designate them as flex containers. This will allow you to apply margin:auto to center the content vertically and/or horizontally, or utilize classes like my-auto, mx-auto, align-items-*, or jusity-content-* on the container element as shown below:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 d-flex flex-column align-items-center justify-content-center">
      <h1 class="mb-5">This is a title
      </h1>
      <p class="mb-5">Lorem ipsum</p>
      <a href="#">Click me</a>
    </div>
    <div class="col-md-8 d-flex flex-column ">
      <p class="my-auto mx-auto">Something else that's not important but needs to be here </p>
    </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

Check if the element is located on the active tab using jQuery

I have implemented a tab system to organize a lengthy form with multiple input fields. The form consists of 4 tabs, and beneath them, there is a preview section displaying the user's selections. In this preview area, I added icons that enable users ...

javascriptjqueryhtmltabs

Different methods to retrieve content within a div that is located on a separate, included page

It's a bit tricky to come up with a title for this topic, but essentially, I'm trying to figure out how to get content from an included page into a specific div using HTML and PHP. Let me break it down: In the header.php file, we have the follo ...

javascriptphpjqueryhtml

What is causing some Font Awesome icons to not function properly with boostrapCDN?

I thought all Font Awesome icons would work by linking this bootstrap stylesheet, but I've only managed to get one of them (`.fa fa-deskto`) to display. The rest, like the second one for example (link below), simply don't show up: Both icons are ...

htmlcssreactjstwitter-bootstrapfont-awesome

What is the best way to display a div based on a keyword match?

If the keyword search results in a match, I can display the corresponding input text and its related category div. Now, I am attempting to also search through category names. If the searched keyword matches a category name, that specific div should be visi ...

javascripthtmljquery

Tips for preventing users from entering special characters into input fields

How can I prevent users from entering the # character into an HTML input field? I attempted to use the pattern attribute, but it does not seem to be effective. I included this pattern in my input element: pattern="[^-#]+" I expected that this would disa ...

javascripthtml

Can you reveal a table with the click of a button?

Hi there! I'm a newcomer to the world of Ruby on Rails and I’m currently working on creating a page that includes a date field. Once a specific date is selected, I’d like to generate a table displaying reports from that chosen date. controllers/r ...

htmlruby-on-railsmodel-view-controllerruby-on-rails-5

Template for PHP website including code

I am working on integrating this code into my index.php page in order to streamline the process of creating separate pages for my website using only simple HTML files. For instance: Instead of repeating the same template code on multiple pages like index, ...

phphtmlphp-include

A CSS selector that can target a neighboring element with the identical class

How can I use a CSS selector to highlight the last adjacent elements with the same class? In the example code below, the first three and last two elements share the same class. However, I am looking to specifically highlight Two, Threee and Six, Seven. & ...

csscss-selectors

Alignment of grid with absolute images in Bootstrap

Hello there! I am relatively new to the world of coding and also to this platform, so please forgive any mistakes I may make along the way. Recently, I've been working on a project to create a site similar to Picrew, but I seem to have hit a roadblock ...

htmlcsslayoutalignmentbootstrap-5

Preventing Internet Explorer from automatically scrolling to the top of the page when a new HTML element is dynamically inserted using

On my webpage, I have an ASP:Grid with a small copy button in each row to copy the text inside that cell. The javascript function I created for copying the text is as follows: var copyText = function (textToCopy) { $(".copy").append("<textarea id=&ap ...

javascriptjqueryhtmlinternet-explorer

Use JavaScript to create a new window and load the HTML content from an external URL

Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...

javascriptjqueryhtmlweb

Accordion-style Bootstrap table featuring convenient space separators

I have come across discussions about accordions, but none that completely address my specific issue. My table is being populated using spacebars, specifically a nested each loop structured like this: <tbody> {{#each piece in pieces}} <tr id=" ...

mongodbmeteorbootstrap-4spacebars

Add the onmouseover attribute to dynamically alter the text

I'm trying to add the onmouseover function to the image of Angelina Jolie in order to change the text above, which currently says "Your Daily Dose of Contrabang". What is the best way to achieve this? Thank you for your assistance. You can check out t ...

htmlcss

The value returned when using $.css('transform') is incorrect and displays as "rotate"

Possible Duplicate: Retrieve -moz-transform:rotate value using jQuery Firefox 15 - Chrome: $('#img2').css('transform'); return => "rotate(90deg)" Firefox 16 $('#img2').css('transform'); return => mat ...

jquerycssfirefox

Executing a custom function when clicking within a Bootstrap 4 modal in an Angular 7 application

I am currently working on a project where I am trying to implement function calls using a Bootstrap 4 modal in Angular 7. However, I am facing an issue where the function is not being called when I try to call it from the template to the TypeScript file. T ...

bootstrap-4angular7

Aligning text in the center of a header, positioned beside an image

I am facing an issue with centering text within a banner. The banner is divided into 12 columns, with a cross icon placed in the left-most column for closing the window. However, the text is not centering within the whole banner width but only within the s ...

htmlcssbootstrap-modal

Unable to set the height of WebDataRocks as a percentage

I've recently started using WebDataRocks and I'm having trouble getting the height to fill the window. Despite what the documentation says (), which states, "The height of the pivot table in pixels or percent (500 by default)". The code snippet ...

csspivotwebdatarocks

Refreshing page using jQuery following an AJAX request

My script is functioning properly, however the use of location.reload(); does not seem to be effective. I am aiming to refresh the page after deselecting the last checkbox. $(".catcf, .coursetype, .yearcf, .manthcf, .venucf").on('click' ...

htmljqueryajax

The CSS3 animations using transit do not occur at the same time in Internet Explorer and Firefox

I am currently developing a presentation library to simplify my work. Naturally, animations play a significant role in this project. The library leverages Transit for smooth CSS3 animations. One specific animation involves an element sliding into or out o ...

jqueryhtmlcsscross-browserjquery-transit

What could be the reason for the event not being triggered multiple times?

Currently, I am in the process of designing follow/unfollow buttons for various members within a system. However, I am encountering an issue where the jQuery event does not trigger after the HTML is re-rendered within the same div containing the buttons. T ...

jqueryhtmlajaxevents