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

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 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.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

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

Download Exercise Files Download Completed Files

Transcript

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.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024