I have a problem with Bootstrap columns - there is an empty space between the columns like it's shown in the picture:
My code is straightforward - one div with class row for all columns and each column has class col-xs-2
<div class="row">
<div class="col-xs-2">
.... checkboxes with labels....
</div>
/* col-xs-2 is repeated a few times */
</div>
I've read about clearfix on similar posts here on StackOverflow but I don't know how to apply it in my case. Thanks for any help provided!
Spilt the two columns first and then start a new row like so:
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
Red box content
</div>
</div>
<div class="row">
<div class="col-md-12">
blue box content
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
green box content
</div>
</div>
<div class="row">
<div class="col-md-12">
Other box content
</div>
</div>
</div>
</div>
Related
I have an issue with col that aren't in one row. I have all of them in one container, row and 3 columns col-md-5, col-md-2 and col-md-5. All paddings and margins are set from CSS bootstrap.
<div class="container">
<div class="row">
<div class="col-xs-12">
<div>
<div class="col-md-5 col-xs-12">
<div>
<div class="row-7 clearfix">
<p class="text">Výtečně<br>chutnám</p>
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
<div class="button-holder">Koupit</div>
</div>
</div>
<div class="col-md-2 col-xs-12 mobile-hide">
<div class="line"></div>
</div>
<div class="col-md-5 col-xs-12">
<p class="text-3">TEXT</p>
</div>
</div>
</div>
</div>
</div>
Dev page here: http://dev.ekolok.cz/
Thank you for advice and help.
I don't know what exactly your layout should look like but here is how bootstrap column layout should look:
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
The problem in your code is that columns aren't a direct child of row etc.
Try to refactor the code and see if you understand what is going on...
Bootstrap columns must add up to 12 per row. If you would like multiple elements in a row, your 'col-whatevers' must add up to 12.
For example if you want your title and your button on the same row your code would need to look like this:
<div class="container">
<div class="row">
<div class="col-6">
<p class="text">Výtečně<br>chutnám</p>
</div>
<div class="col-6">
<img class="text-2" src="../images/unk.png" alt="!" title="!">
</div>
</div>
</div>
You would then need to add another 'row' element and fill that up with columns that add up to 12. Not sure if this is what you're asking but it's what I could make out from your question.
Also, empty 'divs' are redundant, it doesn't mean anything. You can remove all your tags that don't carry a class, id etc.
I'm using Bootstrap to build a Dashboard, but I'm rather new to Bootstrap and I'm having issues getting the final grid layout in the image below. The problem is that when I add the 4th column (Table), which will vertically house more data than the other 3 columns on the left (Widgets), is pushing down the bottom row content (Chart) like in this image. It looks easy, and I guess it has something to do with the 'colspan' or 'rowspan' features, but I can't figure it out.
Why is my chart getting pushed down like this, and how can I fix it?
You have to nest to achieve that.
For example:
<div class="container"
<div class="row">
<div class="col-md-9 not-right-table-content">
<!--nest content here, it's like a new grid-->
<div class="row">
<div class="col-md-4">
widget 1
</div>
<div class="col-md-4">
widget 2
</div>
<div class="col-md-4">
widget 3
</div>
<div class="col-md-12">
chart
</div>
<div class="col-md-12">
other content
</div>
</div>
</div>
<div class="col-md-3">
right table html here
</div>
</div>
</div>
#Nuno - Use below "HTML Code Snippet" or see my JS Fiddle (you might need to scroll boundaries to extend Result pane.)
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 not-right-table-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">widget 1</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 2</div>
<div class="col-lg-4 col-md-4 col-sm-4">widget 3</div>
<div class="col-lg-12 col-md-12 col-sm-12">chart</div>
<div class="col-lg-12 col-md-12 col-sm-12">other content</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">right table html here</div>
</div>
You can use below resources to know more about bootstrap:
Bootstrap - Approach to better, faster, stronger web development
Blasting off with Bootstrap
I know how to do standard columns and such in Bootstrap. However, I have something I haven't encountered yet and I can't seem to Google the answer. Maybe I don't know what to call it, hence why I can't find it.
I have essentially a bunch of boxes, with one large box on the right, and more of the smaller boxes under it. I think I am confused because normally I would have a row, with 4 columns 3 wide, but the larger column needs to take up multiple rows..
Here is a quick example I made in paint:
The smaller boxes are kind of like thumbnails for a portfolio, they are all the same size. The larger box is a Twitter news feed, which is a div Twitter provides to place a newsfeed on your site.
I am not sure if I should create two sections (top half and bottom half) or how to approach this. I thought about making the top section 2 columns, then in the 1st have it split into two more (6 and 6). Then do a separate section below it as normal.
However, you can easily add an image into a paragraph and have the text wrap around the image. I am wanting the same thing, only with the Twitter newsfeed and columns..
I can add code once I get an approach if I am still stuck.
I tried to put another set of rows and cols inside my 1st column, but it broke the spacing between the columns which would mean adding CSS to fix the spacing.
Hoping someone has done something like this, or can see by my image, how to approach this.
Can you show your HTML/CSS to see where and why the code broke ? As you approach is correct, I would have done the same. see below
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="col-xs-6"></div>
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
<div class="col-xs-3"></div>
</div>
Try something like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
row1-col1
<div class="row">
<div class="col-sm-6">
Sub-row1-Sub-col1
</div>
<div class="col-sm-6">
Sub-row1-Sub-col2
</div>
</div>
<div class="row">
<div class="col-sm-6">
Sub-row2-Sub-col1
</div>
<div class="col-sm-6">
Sub-row2-Sub-col2
</div>
</div>
<div class="row">
<div class="col-sm-6">
Sub-row3-Sub-col1
</div>
<div class="col-sm-6">
Sub-row3-Sub-col2
</div>
</div>
</div>
<div class="col-sm-6">
row1-col2
</div>
</div>
<div class="row">
<div class="col-sm-3">
row2-col1
</div>
<div class="col-sm-3">
row2-col2
</div>
<div class="col-sm-3">
row2-col3
</div>
<div class="col-sm-3">
row2-col4
</div>
</div>
<div class="row">
<div class="col-sm-3">
row3-col1
</div>
<div class="col-sm-3">
row3-col2
</div>
<div class="col-sm-3">
row3-col3
</div>
<div class="col-sm-3">
row3-col4
</div>
</div>
</div>
You have just to annidate more rows inside an existing column.
Eg:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
</div>
<div class="row">
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<div class="row">
<div class="col-lg-3">5</div>
<div class="col-lg-3">6</div>
</div>
</div>
<div class="col-lg-6">Big content</div>
</div>
</div>
In Bootstrap, I am using col-md-6 to bring two columns but how to remove the gap in the middle and fill the spaces?
For example in photoshop:
HTML Code:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Note: I just want to apply for this section only, not everything by default.
Assuming that you want to have just the backgrounds touching, then you don't need to do anything. The column gutters (that are represented on your photoshop file by the blue lines) in Bootstrap are produced by padding. So, you can simply do the following to achieve what's in your photoshop file:
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 blue-section">
1
</div>
<div class="col-md-6 red-section">
2
</div>
</div>
</div>
CSS:
.blue-section{background:blue;}
.red-section{background:red;}
This will result in still having padding for your content.
Use the .row with negative margins to remove the gutter (padding) between columns..
<div class="row">
<div class="col-md-6">
<div class="row blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="row red-section">
2
</div>
</div>
</div>
Demo: http://www.bootply.com/TytFvxummt
It's a pretty old question, but just to make it helpful for anyone coming now, Bootstrap now has a g (gutter) class which removes the spaces in between edges of columns.
<div class="row g-0"> // the g-0 will remove all spaces. Ranges from 0-5.
<div class="col-6">
// content
</div>
<div class="col-6">
// content
</div>
</div>
For Bootstrap 5, you can refer to this link as well if needed: https://getbootstrap.com/docs/5.0/layout/gutters/
i think you have to take your structure like this
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">1</div>
</div>
<div class="col-md-6">
<div class="row">2</div>
</div>
</div>
</div>
Using this:
<div class="row">
<div class="col-md-6">
<div class="blue-section">
1
</div>
</div>
<div class="col-md-6">
<div class="red-section">
2
</div>
</div>
</div>
Will achieve that, have you added any padding or margins on the divs? By default there is none on the bootstrap rows/cols. So it must be with the css on .red-section & .blue-section?
I added a background colour to the cols so you can see, http://jsfiddle.net/bnyrL54u/
Hope this helps.
Problem:
Trying to create a layout using Bootstrap 3 that consist of two columns on the left of the page and one main column to the right of the two columns. The two columns on the left should be on top of each other.
Code:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 1</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Left column 2</h3>
</div>
<div class="widget-content" id="gallery"></div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Main column</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 280px;"></div>
</div>
</div>
</div>
</div>
</div>
Output:
Current code produce two columns next to each other on top the main column.
Desired output:
You should use a div with class .col-sm-4 and .col-sm-8 respectively as the parent div for the two column layout you want to use and then create the desired widgets within those divs.
Check out my JSFiddle: http://jsfiddle.net/nJtX9/9/
Please make sure to enlarge the results window to see the correct layout. Otherwise it will stack the div containers for responsive purposes.
You are using 2 col-md-4 meaning is taking 8 columns already + using col-md-8 = 16 columns, bear in mind bootstrap can contain 12 columns per row,
so the way to go around this is use col-md-2 instead of col-md-4
Hope i make this clear.
<div class="container">
<div class="row">
<div class="col-sm-6" style="background-color:gray">
<div class="row" style="background-color:aliceblue">
<h1>col1----row1</h1>
</div>
<div class="row">
<h1>col1----row2</h1>
</div>
</div>
<div class="col-sm-6" style="background-color: aqua">
<h1>col2-----row<br />col2---row<br />col2---row</h1>
</div>
</div>
</div>