Content is not centered with Bootstrap's flexbox

The alignment of content is not centered using bootstrap flex

<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight text-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
  <div class="p-2 bd-highlight text-muted text-center justify-content-center" style="text-transform: uppercase;">comments</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Despite using bootstrap 4, the 

text-center justify-content-center
class doesn't seem to be functioning properly. Any assistance would be greatly appreciated.

htmlcsstwitter-bootstrapbootstrap-4flexbox

Answer №1

The key to using the Bootstrap 4 justify classes effectively is applying them at the row level with the d-flex class, rather than on individual columns.

If you want to center your elements, moving justify-content-center to the parent container will achieve the desired result.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="d-flex flex-row bd-highlight mb-3 justify-content-center">
  <div class="p-2 bd-highlight text-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
  <div class="p-2 bd-highlight text-muted" style="text-transform: uppercase;">comments</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

It's important to note that when using justify-content-center, all elements will be centered. If you specifically want a 'left-middle-right' layout, where only the middle element is centered, use justify-content-between instead:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="d-flex flex-row bd-highlight mb-3 justify-content-between">
  <div class="p-2 bd-highlight text-left"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
  <div class="p-2 bd-highlight text-muted" style="text-transform: uppercase;">comments</div>
  <div class="p-2 bd-highlight">Flex item 3</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

What is the solution to preventing borders from appearing on input tags when they are autocompleted

Recently, I encountered an issue while working on a website form where the input tag was showing borders during autocompletion, despite specifying border:none. I tried various CSS pseudo classes to resolve this problem but none of them worked. Does anyon ...

htmlcss

unassigned variables in a PHP email submission form

My PHP email form is not sending emails because my variables are coming up as null. I have an echo statement after my code to check if the variables have values, but they are not being printed. Only 'done' and 'email $to' are showing up ...

phphtml

Can I retrieve the element of any DOM element I'm currently hovering over using JavaScript?

Suppose I have this HTML snippet: <body> <div id="1"> <span class="title">I'm a title!</span> </div> <div id="2">I'm the first element!</div> <div ...

javascripthtmlhoverevent-listener

Is there a jQuery function that can produce repeated output and append content with each successive click?

Attempting to implement a dynamic searchbar with various parameters has led me to explore using jQuery to load and clone the searchbar file in order to append it to the body dynamically. I have made several attempts to modify selectors without achieving t ...

javascriptjqueryhtmlajax

Tips for crafting paragraphs that double as sieves

I'm trying to simplify and shorten this code. I have three HTML paragraphs acting as filters: "all", "positive," and "negative", referring to reviews. Each has a corresponding div for reviews: "allcont", "poscont", and "negcont". Clicking on any of th ...

javascripthtmlcss

Disabling the default validation message in HTML form inputs

Is there a way to change the default message that appears when submitting an empty HTML text input? I would like the box border to turn red instead. Can anyone help me achieve this? Below is the code for the text input box: <div class="input-group ...

javascripthtmlcss

Tips for adjusting the size and position of these div containers

My Steam Inventory Viewer is experiencing an issue with items with longer names. The div container becomes bigger than others, as seen in the demo on freegamekeys.info/trade or the image at http://prntscr.com/crpqk5. I am having trouble explaining my probl ...

htmlcss

How to centrally position an image within a cropped parent container using CSS

Is there a way to center an img within a parent div tag that has overflow: hidden set? I am looking to clip the image equally on both sides in order to display the middle portion. <div class='wrapper'> <img/> </div> The desi ...

css

Using just a simple HTML code, the d-flex feature in Bootstrap seems to be malfunctioning

Embarking on a new Bootstrap website project has presented me with a challenge that I have not been able to overcome, even with minimal HTML and just one flex item (which happens to be the only element on the site): <!DOCTYPE html> <html lang=" ...

htmlflexboxbootstrap-5

How to load several stylesheets for a component in Angular 2

Struggling with my angular2 application, I encountered an issue when attempting to load multiple stylesheets for the same component. Below is a snippet of the code: import { Component } from '@angular/core'; @Component({ selector: 'my-tag& ...

csstwitter-bootstrapangularwebpackstyles

Including a logo and navigation bar in the header while collaborating with different subregions

I'm having trouble getting a picture to display in the header alongside a horizontal menu. I've divided the header into two sections: img and navbar (html). The navbar is showing up correctly, but the image isn't appearing. Any suggestions o ...

cssimageheader

CSS Table Style Chaos

When styling a table using CSS, I encountered this line within the code: .pricing tr td:last-child { text-align: right; } This particular line ensures that the text in the last column of the table aligns to the right. The class "pricing" is applied to th ...

htmlcsscss-tables

dual slider controls on a single webpage

I am attempting to place two different sliders on the same page. When I implement the following code for one slider, it functions correctly: <h3>Strength of Belief</h3> <div class="slidecontainer"> <div class="slider_left"> < ...

javascripthtml

Give a CSS Element a specific class

Can all h3 elements be styled with the class responsive-heading using only CSS? Take a look at the CSS snippet provided for more clarity: h3 { .responsive-heading } /* The responsive-heading class is defined in another CSS file and includes: .respons ...

javascripthtmlcss

problem with custom scroll bars on Chrome and Internet Explorer

Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...

jquerycssjquery-uigoogle-chromeoperating-system

The functionality of Small Caps is not supported by Twitter Bootstrap when using Chrome browser

I am working with a very basic markup <h1> <a href="#"> My Title </a> </h1> and I have this CSS applied h1 { font-variant: small-caps; } You can see the result on this jsfiddle link. The problem arises when u ...

csstwitter-bootstrap

I noticed that on my checkout sections, the toggle feature causes them to fold up and then immediately fold back down. This behavior should only happen

Is there a way to make my checkout sections fold up once instead of folding up and down when using toggle? I have created a test case in jsfiddle: (no styling done yet!) http://jsfiddle.net/Wd8Ty/ The code responsible for the behavior is located in AMLRW ...

javascriptjqueryhtmlcss

Creating a list of items using HTML tags should be coded in a way that fits neatly within the main container element

UPDATE: I've come across this code that seems to be functioning somewhat as desired. You can view it live at UPDATE - It's still not aligning properly within the #main div! I've experimented with both 100% and 990px for width in #menu span, ...

htmlcsslistmenu

There are no errors with PHP and it fails to insert any entries into the database

I am struggling to save secq (secret question) and seca (secret answer) in the database. Even though I don't encounter any errors during the registration process, the values of the variables are successfully passed through POST when echoed. Despite ...

phphtmldatabase

Set the class of the list item to "active" class

My approach to styling involves using a UL and li class to contain form selection options. I plan on hiding the radio button and using its value upon form submission. I have managed to enable checking the radio box when the <li> is clicked, but for s ...

javascriptjqueryhtml