Menu
As the title says I'm trying to use Bootstrap 3 grid system with a fixed wrapper. But when I resize the Browser the columns stack up even if the wrapper stays the same size?
BTW: I'm using version 3 so that I can move to a responsive layout after I have ported the site. (Which is huge and I'm alone, so step by step is the only option ...)
<!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../../assets/js/html5shiv.js"></script> <script src="../../assets/js/respond.min.js"></script> <![endif]--> <style> /* Custom container */ .container-fixed { margin: 0 auto; max-width: 800px; min-width: 800px; width: 800px; background-color:#C05659; } .container-fixed > hr { margin: 30px 0; } </style> </head> <body> <div class="container-fixed"> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <hr> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://code.jquery.com/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> </body> </html> 
809
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
Bootstrap Grid System Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.
Q 5 - Which of the following is correct about Bootstrap Grid System? A - Predefined grid classes like . row and . col-xs-4 are available for quickly making grid layouts.
Change horizontal gutters with .gx-* classes, vertical gutters with .gy-* , or all gutters with .g-* classes. .
The sm,md,lg,etc.. cols wrap/stack responsively. Use the non-stacking col-xs-* class...
<div class="container"> <div class="row"> <div class="col-xs-4">.col-4</div> <div class="col-xs-4">.col-4</div> <div class="col-xs-4">.col-4</div> </div> </div> Demo: http://bootply.com/80085
EDIT: Bootstrap 4, the xs no longer needs to be specified..
<div class="container-fluid"> <div class="row"> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> <div class="col-4">.col-4</div> </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
