I am trying to get specific help with the bootstrap framework. Since this isn’t generic CSS, I figured a more specialist forum was needed. Trouble is, I can’t seem to find one. getbootstrap.com does not seem to provide any links. Can someone point me to a forum or location (like irc) where I can get help with this framework? Googling for “bootstrap forums” also gave zero results for me, except for this forum (http://www.twitterbootstrap.net/forum/forum.php) which is pretty much dead.
Most bootstrap questions revolve around basic css so just ask your question here unless its about specific bootstrap functions and then the bootstrap documentation generally has all you need to know.
Bootstrap questions generally fall into 2 categories and one is about implementation of the grids and the documentation explains this fully and if you don’t follow the correct implementation standard then your site will break. The second type of question is usually when someone has broken the grid and can’t work out where they went wrong. Nine times out of ten it’s because they didn’t follow the instructions.
In the end the underlying code is still CSS unless you are talking about the dynamic aspects of course.
Okay, I’ll give it a shot here. The first several questions are definitely just css/grid questions, as you guessed.
I am not very familiar with the clearfix technique and I am trying to understand how it works in bootstrap and what it does. I did some reading to try to understand (your name actually came up! – http://www.quirksmode.org/css/clearing.html) and while I believe I understood the article, I don’t understand what the effect in bootstrap is.
Here’s their example code from the docs:
<div class="container"> <!-- I added the container -->
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
</div>
Removing the line “<div class=“clearfix visible-xs-block”></div>” and resizing to change the view port dimensions seems to have no effect (or at least, none that I can see). Can you tell me what is happening here and when I should use bootstrap’s clearfix? Thanks.
Hi,
It’s best to explain this with an example and I have shown two examples below with and without the clearfix.
If you close the window smaller until the x-visible class kicks in (768px IIRC) you will see that in the first example the columns wrap to a new line but in the second example without the clearfix row the columns snag on the taller element when they wrap so that you don’t get a new row of 2 floats.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.test {
min-height:200px;
background:red
}
</style>
</head>
<body>
<div class="container"> <!-- I added the container -->
<div class="row">
<div class="col-xs-6 col-sm-3 test"> col1 - </div>
<div class="col-xs-6 col-sm-3 "> col2 - </div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">col 3 - </div>
<div class="col-xs-6 col-sm-3">col 4 -</div>
</div>
</div>
<hr>
<div class="container"> <!-- I added the container -->
<div class="row">
<div class="col-xs-6 col-sm-3 test"> col1 -</div>
<div class="col-xs-6 col-sm-3"> col2 -</div>
<div class="col-xs-6 col-sm-3">col 3 - </div>
<div class="col-xs-6 col-sm-3">col 4 - </div>
</div>
</div>
</body>
</html>
In this case the clearfix is being used as a float clearer rather than a float container. The element called .row already has the float containment applied and is in the same style block as the clearfix rules so .row will always contain it floats.
The problem with floats is that when you wrap from say 4 column to three columns and one previous column is taller then the floats will snag on each other. This is one of the reasons I don’t like floated grids because inline-block is much better in these circumstances and needs no clearers or extra html elements to arrange the rows nicely.
I have used bootstrap 2 on a large project (200 pages or so) and to be honest I never use the grid classes as they just don’t work efficiently enough for variable content. I use all the other extra stuff which is great but if I want three or 4 columns I just build it myself in a couple of seconds. There’s nothing easier than doing it yourself:)
Your example was helpful, thank you!
I have built layouts in the past, but never truly responsive ones. I don’t have enough knowledge of different viewport sizes and other considerations to roll my own and have it work across a lot of devices (for now). So I’m depending on bootstrap to do it.
In essence you don’t actually need to know anything about all the viewport size or all the devices. All you need to know is whether your page looks good on your monitor when you open the window from large to small and all the steps in-between. If it looks bad then throw in a media query and fix it. If it looks good leave it alone.
In this way you collect all devices automatically and make your design fit everywhere. A device agnostic approach is the best way forward and one of the failings of bootstrap with its predefined breakpoints causing pages to reform when there’s no need at times.
In the end it is your design that determines where the break points should be and not some imaginary device width an imaginary grid.
However, I understand that sometimes its simpler to let someone else do the heavy lifting but in the end you still need to understand what and why your application does these things in order to make it work better or fix it when it goes wrong.
I hear you loud and clear, but I’m no great designer (my work is mostly on the back end), so I am afraid of stepping on usability/browser-compatibility landmines I don’t even know exist. I’m using bootstrap for prototyping for now until I can turn my efforts to a more dedicated solution. I’ve learned alot by reading through various documents on it on various gotchas. (It has the added benefit of looking fairly nice from the get-go, even if it is the same as 1000x other sites.)
I’m curious - is there a grid framework you are at least partially satisfied with?
Yes CSS. It does everything I want and more with total flexibility.
I’m not really against frameworks and bootstrap does make life easier as long as you don’t lean too heavily on the grids. I just find that the things they offer (grid-wise) are not that useful to me. I don’t need 100 pre-defined classes to make 1 or 100 columns as I can do that on the fly in a few seconds. However, others find frameworks very useful so it does depend on the way you work.