Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to center text & div tags in a Bootstrap 4 website

Daniel Walter Scott

Download Exercise Files Download Completed Files

Contents

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.

Introduction

I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link: https://www.bluehost.com/track/byol/byol_webess_115

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
Hello you, in this video we're going to show you how to go, from Left Aligned by default, down to our mobile device, where it's nice and centered. We're going to add some Padding to the Button, because at the moment it's jammed up real close. This is what we're going to make. All right, let's get started. 

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.