How to center text & div tags in a Bootstrap 4 website
Questions
Student Gallery
Course info
Overview
- a simple but elegant restaurant website.
- a bike repair website.
- a responsive portfolio website.
- a Bootstrap website.
You will...
- Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients.
- Learn how to create forms and to choose great fonts for your website.
- Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus.
- Setup a domain name with hosting so that your website is live on the internet for others to see.
There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.
Course duration 16 hours 42 mins
Daniel Walter Scott
Founder of Bring Your Own Laptop & Chief Instructor
I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.
Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.
Certificates
We’re awarding certificates for this course!
Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.
Downloads & Exercise files
Transcript
So it's looking fine at our larger Desktops sizes, it looks fine at Medium as well. We want to get down to the smaller sizes, where I try and stack it on top of each other. It's doing-- we need some spacing here, we want the text to be centered, because that's what I've done in my little mock-up here. It's nice and centered. And yeah, let's do those things in this video.
Let's go into VS Code. So I'll show you my kind of process. I went through and had a look through Bootstrap, the documentation. I found utilities, and the same good spacing. I was like, "Okay, cool, that's good." So down the bottom here, there's one called 'mx', so Margins left and right are Auto. Remember, we've done it before, Margin left, Margin right, Auto, centers things, and I tried that on the Parent Div. So it's you, awesome, job done, and you're like, "Uh, you didn't work." So, okay, that's not going to work. So dug around, and I found something else.
So there's a little bit of that in Bootstrap. We're trying to figure out what's going to work, and in this case, under 'Text', if you scroll down, that one looks pretty good to me. So I'm trying to find in here what makes it work. So Text Center. I'm going to go 'Text Center' and add that to it. Let's see if that works. Let's have a little look, and it's made the text centered. This guy's gone a bit weird, what are you doing over there? Oh no, so it's working perfect, working fine on this one, it's working great on this, but when I get out to setting it side-by-side, it's still Text Centered, so I need to--
Remember, if we don't add any sort of Media kind of acknowledgment, it assumes the smallest version. So next I want to do, is do, let's say text for Medium and above are going to be left. So it's at center, up until, so I go center for the Small, then through to the-- sorry, center for the Extra Small, by default, then through to the Small, which I want, and then I'm switching it when it actually finally gets to MD, for Medium. So X, S, SM, and then Medium, nice. That's going to work for me.
Now that image seems to be centered nicely as well. I might be inclined to put it on the Jumbotron, just so that everything inside here gone centered, but it actually looks all right. Everything seems to be centered fine. One thing I want to do though is-- is that close? So I want to add some Margin Bottom to the Button. So where's my Button? There he is there. I'm going to say, you my friend, Margin Bottom, is going to be, let's just check out 5. Can work, Margin Bottom 5 on the button. Margin Top seems to be working, Margin Bottom, why aren't you working? Save it, let's have a look, magic.
What I saved normally works, didn't in that stage. I did nothing, just fixed itself. So that works perfect, now I should probably turn it off, when I get to this stage, but it's adding some Padding here that nobody can ever see, but let's be official about it, and let's say, when I get up to, so Margin Bottom, when I get to the Medium size, set it back to 0. Changed the structure of this one, you can't really see it, So it's on for Extra Small and Small, and then turns off for these other ones which we can't see.
So that is going to be it for centering text on a mobile device. I hope you're feeling a little bit more comfortable with Bootstrap, and just HTML and CSS in general. Are you feeling like, it's pretty cool when you kind of look at that stuff, and go, "Actually, I kind of know what that does." And I'm pretty sure I know what that does. And it does pretty amazingly good stuff, without us having to do lots of the hard work, like we did at the beginning, but that hard work, you can see is paying off when we start, kind of fixing things, adjusting things, looking at the right kinds of language.
I hope you're finding it useful, Bootstrap. Let's get on to the next video.
How do I centre text on mobile but keep it left-aligned on larger screens?
Add text-center text-md-left to the element containing your text. In Bootstrap 4, this centres the content at extra-small and small sizes, then switches it to left alignment from the medium breakpoint upwards. Add mb-5 mb-md-0 to the button if the stacked mobile layout also needs space underneath it.
How to Centre Text on Mobile with Bootstrap
Key Takeaways
Use text alignment utilities to centre text, rather than trying to centre its container with auto margins.
Combine a default utility with a breakpoint-specific override for responsive behaviour.
Add bottom margin to separate a button from the image below it on mobile.
Reset mobile-only spacing when the layout switches back to side-by-side columns.
Start with the Layout You Want at Each Size
A layout can look perfectly fine on a large desktop and still need a little help on a phone. In our example, the heading, supporting text and button sit beside a product image at larger sizes. Left-aligned text works nicely there.
At smaller sizes, the content stacks vertically. The image moves underneath the text, but two things need adjusting: the text should be centred to match the mobile mock-up, and the button needs some breathing room before the image.
These are small changes, and Bootstrap already has utilities for both. The trick is making them apply at the right screen sizes, rather than changing the desktop layout as well.
1. Choose Text Alignment, Not Auto Margins
My first stop was Bootstrap’s documentation, under Utilities → Spacing. The horizontal centring example looked promising: mx-auto sets the left and right margins to auto.
We know that auto margins can centre a block, so putting that class on the parent div sounds reasonable. Job done? Not quite. In this layout, it did not centre the text.
Centring a container and centring the text inside it are different jobs. Auto margins deal with the element’s position. For the alignment of its text, the useful section of the documentation is Utilities → Text.
Add text-center to the text’s containing element. That gets the heading, supporting copy and button into the centred arrangement we want.
2. Restore Left Alignment at the Medium Breakpoint
There is one catch. Add only text-center, make the browser wider, and the text stays centred even when the image moves alongside it. The mobile layout is better, but now the larger layout has changed too.
Bootstrap’s responsive utilities work from smaller sizes upwards. A class without a breakpoint is the default, not a rule that automatically stops applying once the screen gets bigger.
Keep text-center and add text-md-left to the same element:
Extra-small screens: the text is centred.
Small screens: the text remains centred.
Medium screens and above: the text becomes left-aligned.
The class combination is text-center text-md-left. These are Bootstrap 4 class names, matching the utilities used here.
Nice. We now have a default for the stacked layout and an override for the side-by-side layout, without writing a custom media query.
Which Parent Should Get the Classes?
Start with the element wrapping the text you want to align. If the intention is to apply the alignment more broadly across the hero section, the jumbotron parent is another place to consider.
Be deliberate about that choice. Putting alignment on a broader parent can affect more content inside it. In this example, the image already looks centred in the mobile layout, so there is no need to keep adjusting it just for the sake of it.
3. Give the Button Some Breathing Room
Once the text is centred, the next problem is obvious: the button is a bit too close to the image underneath it.
Add mb-5 to the button. Here, m means margin, b means bottom, and 5 selects a value from Bootstrap’s spacing scale.
Although it is easy to call this “adding padding”, the change we need is bottom margin. We are creating space outside the button, between it and the next element, rather than increasing the space inside it.
Centred text and space below the button make the stacked layout feel less cramped.
If the class seems to do nothing, save the file before changing your approach. That caught me here: the spacing appeared not to work until the file was saved. A missing update can look remarkably like a CSS problem.
4. Remove the Extra Margin on Larger Screens
The bottom margin is useful while the button sits above the image. Once the content returns to a side-by-side layout, that extra spacing is no longer needed.
Add mb-md-0 alongside mb-5. This follows exactly the same pattern as the text alignment:
mb-5 adds bottom margin by default, including extra-small and small sizes.
mb-md-0 resets that bottom margin to zero at medium sizes and above.
The full button spacing combination is mb-5 mb-md-0.
You might not see a dramatic difference when removing that margin on desktop. It can sit in an area where the extra space is not particularly noticeable. Still, explicitly resetting it keeps the spacing tied to the layout that actually needs it.
At larger sizes, the text returns to left alignment beside the product image.
5. Check the Layout Across Screen Sizes
Resize the browser through the smaller and larger layouts, rather than checking only one narrow width and one wide width.
Confirm that the heading, supporting text and button are centred when the content stacks.
Check that there is enough space between the button and the image.
Increase the width until the layout becomes side by side.
Confirm that the text returns to left alignment and the button’s extra bottom margin is removed.
That is the useful pattern to take away: set the small-screen default, then override it where the layout changes. Once you recognise the class names, Bootstrap starts to feel much less mysterious. Your HTML and CSS knowledge is still doing the thinking; the utilities simply save you some of the repetitive work.
Key Terms
Responsive utility
A helper class that applies a style at particular screen sizes. Here, text-md-left and mb-md-0 change alignment and spacing from the medium breakpoint upwards.
Breakpoint
A screen-width threshold used to change responsive styling. The md part of these class names identifies the medium breakpoint.
Margin
Space outside an element. Bottom margin on the button separates it from the image below.
Padding
Space inside an element, between its content and its edge. It is different from the external spacing added with mb-5.
FAQs
Why does text-center also centre my desktop text?
text-center has no breakpoint restriction, so it continues to apply at larger sizes. In Bootstrap 4, add text-md-left to restore left alignment from the medium breakpoint upwards.
Why did mx-auto not centre the text?
mx-auto controls an element’s horizontal margins, not the alignment of the text inside it. Use text-center when text alignment is the change you need.
How do I add bottom margin only on smaller screens?
Combine mb-5 with mb-md-0. The first class supplies the default bottom margin, and the second removes it at medium sizes and above.
Written by Daniel Walter Scott — Founder of Bring Your Own Laptop & Chief Instructor
