Recently I have been introduced to bootstrap and RWD. I have understood the whole idea but I cannot seem to master the grid system. I created a div container to make a fixed design. I want to use grids but I have lots of spaces in the webpage. Meaning it is something like this:
Header
about 10 lines of free space
Content / Content / Content
about 5 lines of free space
Content
How do I design my webpage like that using grids? I guess what I am asking is not how, but what is the efficient way to do it. I do not want my code to be messy. Thanks.
<div class='container'>
<div class='row'>
<div class='span12'>HEADER</div>
</div>
<div class='row'>
<div class='span4'>CONTENT</div>
<div class='span4'>CONTENT</div>
<div class='span4'>CONTENT</div>
</div>
<div class='row'>
<div class='span12'>CONTENT</div>
</div>
</div>
As for the lines of free space, add margins as needed
Related
In Bootstrap, must all content- even just a basic block of text placed in the middle of a page for example, be placed inside columns and rows. My website seems to work just fine doing this:
<div class="container-fluid">
<h2>My Heading</h2>
<p>This Is Content On the page</p>
</div>
Yet, I have been told it should be like this:
<div class="container-fluid">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid</div>
</div>
</div>
Yet, on some of the templates on the bootstrap site itself, they don't always use columns and rows.
I'm really confused...
Thanks
No, not all content needs to be placed in .rows.
.rows and .cols simply provide you with a customizeable grid system (i.e.: number of columns, gutter sizes, responsiveness breakpoints are a few of the things one could customize) aimed at displaying content differently at various page widths. That (and also the division of the row in 12 columns) are what it was designed for.
The only purpose of rows and cols is to divide the space differently at different page widths and to provide some minor padding (gutters). If you don't need that for a part of your content, don't use it. Whenever you have a section which you want displayed according to your own custom rules, you can simply include and style it as you want.
So, for example, this is perfectly valid and can be seen in various Bootstrap examples:
<div class="container">
<div class="row">
<div class="col">
... normal layout cols here
</div>
</div>
<div>
your custom stuff here. you need to provide responsiveness CSS rules for this content.
Out of the box, being a `<div>`, this will fill all the available width
if, for example, it was included in a `.container-fluid`,
it would span the entire browser window, at all screen widths.
</div>
<div class="row">
<div class="col">
... more normal layout here...
</div>
</div>
But whenever you want to use .cols, you should place them as direct children of .rows. If you do not, you will see some nasty horizontal scrollbars across your content, because the grid has a system of negative margins and (positive) padding to cater for gutters at various width sizes.
With this basic example everything works fine, especially when the heading is centered. Using different approach for Bootstrap grid is usually not a good idea.
From Bootstrap docs:
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
As alignment problems will occur in the long run.
Secondly when you start using SASS with Bootstrap and change grid variables then everything stays aligned and is controlled from
one place.
In your example if you want to align the heading you need to add a margin-left so that is would be aligned with I'm content inside the grid.
Look at this example how everything is aligning with and without rows/columns: https://codepen.io/LaCertosus/pen/KKKzVqR
<div class="container-fluid mt-5">
<div class="row">
<div class="col">
This text is inside <b>row</b> and <b>col</b>
</div>
</div>
<div class="row">
This text is only inside <b>row</b>
</div>
<div class="col">
This text is only inside <b>col</b>
</div>
<div>
This text is only <b>container</b>
</div>
</div>
<div>
This text is outside <b>container</b>
</div>
It is the right question to ask why I have to generate so much boilerplate but it will come out in the long run when elements need to align and scale in different screen sizes.
I'm currently working with bootstrap, but there's just a few things that confuse me about the grid management.
In this case, my grid structure tends to go (as an example)..
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="homeBox">
</div>
</div>
</div>
</div>
</div>
(Apologies for poor formatting)
This works fine for full width elements (col-xs-12), however if i'm trying to have two elements next to each other (col-xs-6) with a row before adding the content, they simply touch each other in the middle, and if adding a background it makes it seem like one element. Here's a JFiddle showing what I mean. If i was to add a row before the homebox, it makes them touch. I can also just not add a row after the col-xs-x, but then it won't align correctly to the other full width elements on the page.
In sites I'm working on, I workaround this by adding a 'leftRow/rightRow' class for small devices onwards, but this seems a bit of a bodged way of doing it.
What's the correct way to approach this?
Cheers.
There are few way organize the Bootstrap Grid, e.g.
<div id='footer'>
<div class='row'>
<div class='col-md-6 footer-left'>
or
<div id='footer' class='row'>
<div class='col-md-6 footer-left'>
or
<div id='footer'>
<div class='row'>
<div class='col-md-6'>
<div id='footer-left'>
Which one is more easy to maintain, assume you will add CSS positions (margin, padding etc) to the footer and footer-left
I know that some Bootstrap classes, such as container, row and the col-* have some predefined padding/margin already applied to them which helps lay the various elements out and collapse them down in the responsive view and so on.
Since the CSS of the ID takes priority over the CSS of the class, if I remember correctly, then doing something like your second option could result in some odd behavior. In general, I would go for the third option but it ultimately comes down to preference and if you feel you can work around any quirks that the other options might introduce.
<div id='footer'>
<div class='row'>
<div class='col-md-6'>
<div id='footer-left'>
Above code is best hierarchy to required output. If we follow container -> row -> col-md-* -> user-defines-class then it will make the div fully responsive and pure bootstrap related code. this hierarchy maintain perfect output of all divs regarding margin, padding and center auto
how does look your layout? bootstrap has a few solution for you and you can choose what you need! in HTML5 better solution to use <footer> tag instead <div class="footer">, 'class="container"' has fixed width with paddings, 'class="container-fluid"' has only paddings, class="row" has negative margins which overlapping positive container paddings etc...
I am creating a website in bootstrap. I need to make a right hand side column makes a big serial number 4. When I fill the column height make the big simultaneously space is come out the between the serial no 3 and 6.
How can I solve the problem?
<div class="col-md-3">content goes here</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
<div class="col-md-3">BIG COLUM</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
<div class="col-md-3">content</div>
Example
The only other thing I can think of is to use: on your vertical column. Check out this link http://getbootstrap.com/css/#grid-options
Check out the offset column section as well.
Remember to wrap your page in a <div class="container", then wrap it in a <div class="row"... also remember that the grid width is only 12 wide, so you have to many divs as col-md-3, you can use only four.
I have some HTML which looks like this:
<body>
<div id="panel1" class="panel"> Panel 1 </div>
<div id="panel2" class="panel"> Panel 2 </div>
<div id="panel3" class="panel"> Panel 3 </div>
<div id="panel4" class="panel"> Panel 4 </div>
<div id="panel5" class="panel"> Panel 5 </div>
<div id="panel6" class="panel"> Panel 6 </div>
<div id="panel7" class="panel"> Panel 7 </div>
<div id="contentheader"> Header </div>
<div id="content"> Content </div>
</body>
What I would like is for some of the panels (let's say 1-4) to be floated on the left, the others (5-7) to be floated on the right and the header and content in between, ideally without having to wrap the left and right panels in a wrapper div.
Use an easy to use CSS framework like Blueprint CSS, The Golden Grid or 960. They have excellent cross-platform support for developing grid based websites like the one you are working on. You won't have to worry about the nitty gritties at all.
The answer depends entirely on if you want that middle column to be fixed-width or fluid.
If fixed width, your life is going to be much easier, and you can use one of several popular CSS grid systems: blueprint, yui, 960, etc.
If fluid, you should use the 3-column techniques outlined at alistapart.com.
How about wrapping the #contentHeader and #content in a div and floating it like one of your panels? You'd have to put it amongst them... (div1, 2, 3, 4, content, 5, 6, 7).
Depends on what you know about the widths of the panels and content, I'd say.
If you know the width of your panels (left, right, header and contents) and the height of the header, you can give the header and the content a { position: absolute; } and position it between the panels.
If you don´t know the width of the content, you'll probably run into some IE problems though...
(just guessing, I haven´t tried it)