• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How To Centre Columns In Bootstrap 4

CSS · April 30, 2020

It’s 2020 and while there are many things I do know, there are still some trivial silly things I do not or always forget. Case in point being, how to centre columns in a Bootstrap 4 layout.

Unlike Bootstrap 3, Bootstrap 4 uses Flexbox and therefore, you have more options for centring your layouts. One such method is the justify-content-center class defined on the row which will align the columns center. Finally, you use the text-center class to middle align the content of the column.

<div class="container">
    <div class="row justify-content-center">
        <div class="col-6 text-center">
            <p>My content</p>
        </div>
    </div>
</div>

This works by using the Flexbox property for justifying the content. We can also specify a column is display: flex; and align its contents like so as well, which can work well in certain situations.

<div class="container">
    <div class="row">
        <div class="col d-flex justify-content-center">
            <p>My content</p>
        </div>
    </div>
</div>

In the above, you might notice we don’t use text-center to center the text, we just make the column d-flex which makes it a flex element and its children and be aligned.

Nothing overly fancy. This post serves as more of a reminder to myself, but if you find it useful then that is a win as well.

Dwayne

Leave a Reply Cancel reply

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Daniel
Daniel
2 years ago

Hey, the smaller-than angle bracket is not properly escaped in the code examples

0
Dwayne
Dwayne
Author
Reply to  Daniel
2 years ago

Thanks, Daniel. All fixed up now.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • How To Mock uuid In Jest
  • Which Neural DSP Archetype Plugins Should You Buy?
  • How to Copy Files Using the Copy Webpack Plugin (without copying the entire folder structure)
  • Removing A Character From The Start/End of a String In Javascript
  • How To Convert FormData To JSON Object
  • How To Correctly Use Semantic HTML5 <article>, <main> and <section> Tags
  • Wild Natural Deodorant Review
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex

Recent Comments

  • Thebe on How to Remove the My Sites Menu From the WordPress Admin Bar
  • Maccas worker jn the 2000s on Dear McDonald’s: bring back the Warm Cookie Sundae, you cowards
  • Anamika Singh on Testing Event Listeners In Jest (Without Using A Library)
  • Stefan on A List of WordPress Gutenberg Core Blocks
  • pandammonium on A List of WordPress Gutenberg Core Blocks

Copyright © 2022 · Dwayne Charrington · Log in

wpDiscuz