Does anyone know where to find a full explanation on using this feature? When I made my tribute page I had a lot of trouble lining up my bullet points to get them the way I wanted them. I didn’t ask, but there was a lot of search and read.
I had to try a lot of different formats, and what I finally used was col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3
It works, and looks great, but if I had to explain why it works I couldn’t do it. There must be a way to use this feature where you don’t have to use trial and error for an hour and a half. At least I hope.
Is there a way to understand this configuration so you can know exactly what you need based on what you are trying to do? Any help is appreciated. Thanks.
I went through this yesterday, myself. The documentation is clear about a few things:
All bootstrap should semantically exist inside of a div class=“container” or class=“container-fluid”.
Within that container, must exist div class=“row” (even if there’s not going to be horizontally aligned elements). There is usually multiple class=“rows” on a page, because…
Within each ROW gows a COLUMN. Row being the horizontal axis, column, of course, being vertical.
So you’ve got this three-layer nesting that is semantically required by bootstrap.
In any given row, there are columns spanning 12 units.
The minimum you have to write is col-xs-12. Why?
Because bootstrap is mobile first. If you specify that, on the smallest possible screen (which is what the xs stands for) that it is a 12-unit spread, it will default on up to being a 12-unit spread on big windows, too.
But if you want to start utilizing breakpoints for differently sized screens, you have to start specifying the various size. col-sm, col-md, etc.
Let’s exemplify this with the code written on the fCC tribute page…
div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"
There are two significant things going on here:
We’re seeing different sizes specified for each screen size
The introduction of OFFSET, which is key for bigger screens
If I want the content within my Jumbotron centered on a medium sized screen (and every screen larger than medium), then I have to specify how many columns I want left out on either side.
class=“col-md-8” must be followed by col-md-offset-2, because 2 colums left out on either side of the 8 centered columns, equals 12 total columns.
So basically the offset feature is a way of centering your content.
If this did not make sense, please let me know! This is my first attempt at such an explanation.
I do understand the col-md-* thing because I took Coursera’s HTML, CSS and Javascript course given by Johns Hopkins. The instructor’s demonstration of this is excellent.
What I want to know is, how do you see the different screen sizes in Codepen, specifically the xs size?
Simple. You actually resize your browser right then and there, on the fly.
For example, narrow it down to as small as an iPhone would be. Then you’ll trigger the breakpoint for a mobile viewport, and see how the elements look.
If you go on Bootstrap docs, you can play with browser sizes right there and see what I mean with all sorts of BS features.
@samsavage for a first time, this was perfect. Before I left web design for game design(Dreamweaver 3 ring a bell? Dating myself lol) nobody was designing for mobile because it didn’t exist. I’ve heard of bootstrap, but didn’t know anything about it. Now I know it has it’s own documentation so thanks for that.
I think I was just missing the offset which is why mine wasn’t working. I’ll have to play a little. Your explanation was perfect.
For future reference, it doesn’t pay to start an unrelated subject in the middle of a thread. People browsing the forum that know the answer to your question may pass this by after reading my subject line and not even know your question was in here. Best practice would be to start a new post with a relevant subject line to your question.
Sam, thanks. I was hoping there was a view for it, so I don’t have to manually resize my browser. General Assembly’s Dash program has a great little switch that lets you toggle between full-screen and mobile view. I was looking for something like that.
Bootstrap is still a necessary evil to me, but I’ll take your recommendation and check out their site.
I feel like a friggin’ champ. I can’t believe I just answered two people’s questions. This is a very emotional moment for me, not joking!
My neurons are mylienating, and my heart is melting… Ahh…
Honestly guys, try doing whatever you’re doing in Bootstrap 4. You will be glad to see that CSS has made a ton of improvements (making it easier to write better code), and that Bootstrap 4 makes use of those great features. coughflexbox and gridcough
If you view Bootstrap as a necessary evil (which I understand), you may actually start to like it once you see the beauty of BS4. It’s obvious that the team behind it really went all-out and married it to CSS3.
And learning one CSS framework will help you learn other frameworks!
More frameworks? WTF?!
… Check out Material Design Lite and tell me you don’t want to know more frameworks…
alper, I think Chrome also has that, but with CodePen, you’re not seeing your web page directly in your browser, you’re seeing CodePen’s web page (showing your web page within its page).
Sam, you’re hilarious - “My neurons are myelinating…” and you ARE a friggin’ champ. I hope once you get used to helping people you don’t lose the excitement.
It’s not that I hate Bootstrap - or jQuery or other tools. It’s just that I want to learn and become proficient at HTML, CSS and JS before learning shortcut tools, and I don’t like tutorials starting me out with them before teaching me the “real thing.”