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.
Related
I am currently trying to learn the Bootstrap grid system. I have the following html code that attempts to simply make a row with three columns:
<body>
<div class="container">
<div class="row">
<div class="col-4">
left column
</div>
<div class="col-4">
middle column
</div>
<div class="col-4">
right column
</div>
</div>
</div>
I believe this should just create three columns that align horizontally (fill up the same row), however, in Chrome, they stack vertically. Anyone know why?
Maybe a silly reply but have you checked that you have the css file correctly coming through?
row is automatically flex and col-4 is correct for 3 wide.
I cannot help but think the css file is in place.
Open up inspect element on the row element and you should see css like:
display:flex;
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 am doing a products page using Bootstrap and most of the images appear fine, but the last line on the two bottom rows checker in a smaller screen size.
To let you know what I mean I've included an image here.
Here is the code of one of the rows that are not working right:
<div class= "row">
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_1.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_2.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_3.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_4.jpg">
</div>
</div>
This usually happens when you have some padding or border that is increasing the size of the element.
Grids work on the basis of % so if you have 2 elements that width each equal 50% but then you add something like some padding or a border you are going over a total of 100% and the element is pushed to the next line.
My advice (given I don't have the actual code) would be to review your styles using the browser dev tools to see what styles are being applied when this happens. You should be able to track down the offending property.
Hope this is useful even if not a definitive answer.
So I eventually fixed the problem by making the all the images the exact same size/dimensions (some were a few pixels off). Just thought I'd follow up on this.
Also I later discovered that if you have an extra line of text or two underneath the picture that might throw the pattern off.
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...
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