• 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

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz