|
|
|
It takes a while to wrap one's head around it, but it's pretty straight forward if you stick to the basics.
"row" class for every row.
"col-??" class for every column. Learn the ??, the xs/sm/md/lg options, as they're great for controlling column widths depending on the browser width.
"col-??-offset-n" where n is a certain number of columns is also nice for controlling padding depending in the window width.
After that, just put your column's content in your own div.
Basically though, it's just a CSS wrapper for td and tr. 
It is, however, the best grid layout system I've played with, though my recommendation doesn't go very far as I'm still a n00b at all this.
|
|
|
|
|
I always have to laugh at how history repeats itself. There was a time when we did table-based layouts. Then CSS came along and that was bad. Fluid layouts using floats all the way baby. Now, I agreed with that movement of course. But the irony is Bootstrap went and re-popularized a grid system. Which ironically, in theory, is no different than a table for a layout. It's usually at this point the kiddies say "it's responsive though", like old timers don't know that. But conceptually, it's the same. Now here we are with flexbox, which is like the love child of floats and tables, which works strikingly enough, similar to Bootstrap's grid system.
Jeremy Falcon
|
|
|
|
|
Marc Clifton wrote: "row" class for every row.
Not necessarily. 
If you're creating a responsive grid, you'll probably have a different number of "cells" per row at different screen sizes. Therefore, it's not possible to wrap the cells for each row in a "row" container.
The only purpose of the "row" container is to negate the margin for the first and last items in a row, so it usually still works if you have a single "row" container for the entire grid.
The problems start when you have cells of different heights. Because Bootstrap v3 uses float for the cells, you can end up with one tall cell forcing the next row to start half-way across the screen. To solve that, you'd need to drop the Bootstrap grid, and use Flexbox, Grid layout, or display:inline-block instead. Either that, or add some fairly complicated nth-child clearing rules.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
John Simmons / outlaw programmer wrote: I am completely baffled by their grid system.
I am baffled and, if truth be told, a little shocked at your bafflement. Bootstrap is a breath of fresh air in web design for graphically challenged people like myself.
But not Bootstrap 4. Not sure about that yet - not keen on how it lays out.
John - you can do it!
|
|
|
|
|
I only recently just started playing around with version 4 (beta 2), mainly because I didn't bother with the alphas. But, from what I know, 4 is the same as 3 in how the grid system works except by default it uses flexbox under the hood so it may render differently. And you can be implicit about the columns now.
Here's a side-by-side demo of 3 vs 4...
What's New in the Bootstrap 4 Grid[^]
Jeremy Falcon
|
|
|
|
|
In that demo, both 3 and 4 do the same thing in both IE11 and Chrome v61. Those are the only browsers I have, and I cannot update the apps (permissions issue on a DoD system).
".45 ACP - because shooting twice is just silly" - JSOP, 2010
-----
You can never have too much ammo - unless you're swimming, or on fire. - JSOP, 2010
-----
When you pry the gun from my cold dead hands, be careful - the barrel will be very hot. - JSOP, 2013
|
|
|
|
|
Width-wise it should be the same. The discrepancies will have to do with height. Granted, I'm totally new to version 4 so I'm learning too... just going off of how flexbox works underneath the hood.
Jeremy Falcon
|
|
|
|
|
Also, if you look at the class names. They're different. The demo is recreating the same layout in both version 3 and 4. In short, version 4 is more relaxed and forgiving than version 3 thanks to it using flexbox underneath the hood.
Jeremy Falcon
|
|
|
|
|
Super cool, dude. Thanks. 
|
|
|
|
|
No problemo.
Jeremy Falcon
|
|
|
|
|
R. Giskard Reventlov wrote: Bootstrap is a breath of fresh air in web design
I'm baffled we need third party libraries to make it less hard (or "breath of fresh air" as you call it) to do anything to begin with!
|
|
|
|
|
Sander Rossel wrote: I'm baffled we need third party libraries to make it less hard (or "breath of fresh air" as you call it) to do anything to begin with!
Ha! Anything that means I don't have to worry about design. Bootstrap gives me an easy to use framework to lay out pages that someone else can easily "fix" later. Sure, I could hand craft css but why on earth would I do that when my design skills are not my strong point.
|
|
|
|
|
Yeah, thank goodness people never write useless stuff like Boost for C++. I mean wxWidgets and Qt are pointless too when I could do everything myself with cross-platform code. Come to think of it, Sass and Less just seem silly. 
I get what you're saying though since I'm a purist and all. And truth being known, I think Bootstrap can muddy up otherwise beautiful markup. But if there is a really good third party library out there it's not always bad to use it. Bootstrap may be overkill for tiny projects, but there was a lot of work that was put into it and it can be pretty nifty when done right, despite the 5 bazillion class names you have to use for it.
Jeremy Falcon
|
|
|
|
|
I can't even build a decent website without Bootstrap.
And I can't build it with Bootstrap either.
Simply because HTML + CSS just doesn't work.
Setting a width? Nope, because this element sets it's own width.
You still want to set it? Well alright, but we're going to mess up everything else.
We're also going to render it slightly different on other browsers.
Do you remember WinForms where you could do this with a single click? It's going to take you two days and a complete rewrite of your page in HTML + CSS!
Wait, did you just add an extra div to your page? FEEL MY CSS WRATH! YOUR LAYOUT WILL BURRRRN! BUWHAHAHA!!!
I had a coworker who kept saying "oh, that's easy", and he was somewhat good at it (at least best of the team), but more often than not a simple alignment issue would still cost him an hour.
At least he got stuff to align, which is more than I ever achieved in that steaming pile of crap.
And calling CSS crap is insulting to crap.
|
|
|
|
|
People tend to mock what they don't understand. Especially young programmers. The way the web works is more like WPF than WinForms when it comes to layout and there are tons of great reasons for it being that way too I won't bother to elaborate on.
CSS layout issues used to cause me an hour a pop too. But that was when I was new to CSS layouts. Just like anything else in life, experienced artisans who know what they're doing get things done quicker. The more and more I read about how it works the less I was confused. The more I used it the better I got. Just like with anything else in life.
Sounds like the real problem in your post is nobody having a clue what was going on but everyone pretending they did to save face. I hope this doesn't sound harsh or mean, but it's the truth. Tech people are so afraid so say they don't know something it's unreal.
Jeremy Falcon
|
|
|
|
|
Guilty as charged, I'm not very skilled with CSS.
It's just that setting a width does not set a width, adding a div totally messes up your layout, and having to read an entire book and spend considerable time doing it just to learn how to layout a page does not seem like proper intuitive design to me.
I once needed a table with a fixed column, takes me about two button clicks in WinForms, seemed to be pretty much impossible using HTML/CSS unless I rewrote my entire page and even then it wasn't easy.
I ended up creating two tables and keeping them in-sync using JavaScript, because I just didn't get it to work in CSS, even with numerous examples from the web (they all messed up the rest of my layout).
I know WinForms doesn't scale and that it isn't multi-platform and that skins are pretty much impossible, but the gap between ease-of-use between web and WinForms is lightyears.
|
|
|
|
|
Oh I feel ya. I know one of the main reasons all of the extra fluff started with web layout is we have zero control over the size of the browser. A lot of folks wanted to fake it at first back in the 90s with a fixed with container on the page but then you'd get huge margins on the page every time you got a larger display. This was usually the guys coming from the print world in magazines that got into web design and couldn't let go having pixel perfect control over the "paper". So yeah the barrier to entry is more of a PITA.
The funny part is, once you get used to the extra fluff, it's hard to go back to pixel coordinates... unless you're using canvas or making a game perhaps. If nothing else, there's always Flash. 
Jeremy Falcon
|
|
|
|
|
Look at it like this. Imagine your web page was a grid with 12-columns in it. Those 12 columns always filled up the page no matter what. Basically Bootstrap allows you to either fill up or not fill up those 12 columns depending on resolution.
SFW Image: Clickety[^]
It'll snap things in and out as the size of the window changes depending on how many styles you pass it. So for instance, for the desktop you can have something only take up 6 columns and thus only show up on half the screen, but for mobile it'll use all 12 since the display is tiny and you need all the room you can get. We call that responsiveness because it makes us feel smart and sounds fancy. It's really not more complicated than that despite what some may have you believe.
Jeremy Falcon
|
|
|
|
|
A great explanation ! thanks, Bill
«While I complain of being able to see only a shadow of the past, I may be insensitive to reality as it is now, since I'm not at a stage of development where I'm capable of seeing it.» Claude Levi-Strauss (Tristes Tropiques, 1955)
|
|
|
|
|
Anyone seen it[^]? I watched it last night and I found it....strange, stressful, weird, crazy and an all round head-f***. Didn't watch any trailer or anything so wasn't expecting that...haven't stopped thinking about it all day.
|
|
|
|
|
I tend to love anything by Aronofsky, the man's a genius. Eeeeever so slightly "samey" in the "PsychoOverload" approach he takes to telling a story, but he rarely fails to mess with your head...
One morning I shot an elephant in my pajamas. How he got in my pajamas, I don't know.
|
|
|
|
|
Mel Padden wrote: I tend to love anything by Aronofsky,
Think I've seen Noah and Black Swan, though wasn't really concentrating when watching the second - so didn't get it. I'm going to watch dream/requim one this weekend.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
At least all the tedium and swearing have paid off with (imho) a pretty nice reporting solution...the gridview! 
