All day I’ve been reading up about centering content on a website but there’s so much information: conflicting, dated, good, bad, confusing that I’ve been going round in circles, reading article after article - I think I’m actually more confused now than before I started! I read one article which was difficult to comprehend given my current level (actually it ended up being two as it was a follow on from the previous week: https://codemyviews.com/blog/how-to-center-anything-with-css & https://codemyviews.com/blog/the-lowdown-on-absolute-vs-relative-positioning) but I followed along and managed to get it working with notepad++ and when viewed in chrome but on codepen.io it doesn’t - it’s all aligned to the left. I’m not sure what I’m supposed to do. I think it has something to do with bootstrap and containers but I’m not sure what exactly - I’ve added a container since but it hasn’t done anything. Could really use some help.
Here’s my project on codepen: http://codepen.io/bantam75/pen/wJNJem
I’m not sure exactly what your goal is, but the Bootstrap container class isn’t going to work unless you load Bootstrap. Here’s a video from our own @michaelhenderson showing you just how to do this:
1 Like
Thanks, I didn’t know that - it will come in useful no doubt at some point.
What I’m trying to do, is align my text through the centre of the page and not to the left as it currently is - well as it currently is on codepen - not on notepad++.
I don’t know enough yet about
or containers or bootstrap and so I’m not quite sure myself what it is I need - other than direction as I’m a little lost.
The content isn’t central as I want it to be and understanding how to put it there without compromising the display on smaller devices is quite difficult to grasp for the complete beginner - well, I’ll speak for myself and admit that it is for me at least.
Hi Bantam,
Do not feel bad, everyone goes through these ‘wth am I doing’ phases while learning, specially when learning to code.
Bootstrap is simply a set of rules pre-made for you, all you need to do is load the bootstrap min file and you are good to go. You implement it on your webpage by using classes. You can add a class to an element, and it will automatically look a certain way, depending on the class you used. if you want to display the whole page in the center, all you need to do is use the container div for all of your content. You can also make it look different than the page, by giving it a color and a margin: 0 auto (this pushes the div to the middle) and giving it a width property.
I went ahead and copied a little bit of your code onto a new pen, take a look and see how the title and h2 are centered. This is accomplished by using the ‘text-centered’ class, or you can add the attribute text-align: center to the container div.
https://codepen.io/counterculture/full/XMOPwb/
Also, I would suggest using closing <p> tags after each paragraph.
Hopefully you’ll find this useful. Drop me a msg if you need any more help and keep up the good work!
1 Like
That’s really helpful, thank you.
I’ve really found my calling with coding, I absolutely love it but it’s early days and I guess I must be going through similar emotions to what a Boxer does pre-fight as I know I’m in for some serious pain and punishment! I just need to prepare myself mentally for the next 12 rounds.
I’m ready though, to go through with that because I’m determined to come through the other side but it’s tough.
There’s so many new aspects to understand and there are so many new terms to learn that it almost sounds like a different language (English not programming) when you hear people discussing coding. That’s why it’s difficult to grasp initially because even though you try hard to understand it, it’s completely alien.
Having said that, the coding community, are so, so helpful which gives me confidence that I will eventually succeed and probably make a lot of friends along the way.
Can I just ask? Initially, my understanding of class were their purpose was to pin point a section of html so that you could target that area more specifically in CSS, then my understanding changed and I thought their purpose was to give commands to specific areas, now I’m thinking it’s a bit of both - is that right?
Hi bantam,
I’m glad you found the info useful.
It is definitely challenging the more technical terms you find when learning web dev, specially for us non native speakers, but it gets a lot easier, trust me. I’m sure with practice and dedication you will dominate the subject one day. You can definitely do anything you set your mind to, that is for sure.
You are correct. The use of ID and Class attributes inside a tag are used to be able to target that specific area/element of your design. You need ID and classes so that you can use those names and change the property values, this can be with CSS (for looks) or with Javascript and jQuery (for functionality).
Let’s assume you have a page title (h1) and some content. You then have sub sections and each sections also has a title (h1). Let’s also assume you are looking to style the main page title differently than the other h1’s, so in this case you would something like this:
<p> Some content ....</p>```
<h1 class="contentTitle">Section title</h1>
<p> Some content </p>
<h1 class="contentTitle">Section title</h1>
<p> Some content </p>
<h1 class="contentTitle">Section title</h1>
<p> Some content </p>
So as you can see, you will use an ID for the first one because you are going to treat it differently than the other titles, although these are all h1 tags. IDs can only be used once, and classes can be used as many times as you like.
So, let's say your CSS would be something like this(classes are accessed with the dot(.) notation and IDs with the pound sign(#):
``#mainTitle {
// some rules that will only affect the main title
}
.contentTitle{
// some rules that will affect *all* titles with the class contentTitle.
}
``` .
What Bootstrap does is pack a series of this rules, pre-made for you, so all you have to do is add the class to an element and that element will "dress" with the set of rules designed by the people who did Bootstrap.
Hopefully this is a little more clear for you, if you have some other questions, feel free to drop a msg.
Cheers!
1 Like
Ahhhhhhhhhhhhhh - Eureka!
Now the penny drops - I just didn’t get why we were putting (what I assumed to be) inline commands, such as class=“text-center” in the html when I thought (and I guess, rightly so) that the class (attribute?) was a way of selecting something and that CSS was supposed to take care of things like that.
I had absolutely no idea that Bootstrap came pre-loaded with commands, even when you mentioned it earlier, it still didn’t dawn on me that they were actually pre-loaded with CSS commands. I just thought Bootstrap was specifically to make designs responsive.
So, basically, the CSS commands are all ready and triggered in Bootstrap, for if and when I add them as a class - at which point they will start working? I get it now, I suppose next I need to figure out the CSS commands that Bootstrap has but this feels like a major victory.
Thanks again mate, you explain it so well - your English is excellent btw, almost undetectable.
Awesome stuff, yeah that’s exactly right. Imagine it like this, instead of writing the HTML with tags first and then doing the CSS, Bootstrap would be as if you’d start with the CSS and then you build your HTML doc. This means that as you go along the HTML code, you are adding classes that you already know what they’ll do for your element.
It is also correct that Bootstrap is used mainly for responsiveness, the whole idea behind it is to build for mobile first and then scale to bigger resolutions. This is done with the row and column classes.
You can take a look at W3schools, for me they have a great way of presenting the info that is easily accessible when you are working on something. Say you are working on a call to action button for your page, you can google ‘buttons bootstrap w3schools’ and you’ll get all the classes you need for your buttons:
https://www.w3schools.com/Bootstrap/bootstrap_buttons.asp
Hope this helps some more, I know at first it seems like a lot take in, but eventually it’ll be second nature.
1 Like