.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 background-color">1</div>
<div class="col-4 background-color">2</div>
<div class="col-4 background-color">3</div>
</div>
</div>
So I have three columns which are each 4 columns in width and whenever I add m-3 (margin all around) they break off because of that, how can I contain them? So they stay all 3 on the same line?
.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 background-color m-3">1</div>
<div class="col-4 background-color m-3">2</div>
<div class="col-4 background-color m-3">3</div>
</div>
</div>
Only way I saw around this was to nest other elements.
<div class="container">
<div class="row">
<div class="col-4"><div class="col-12 background-color m-3">1</div></div>
<div class="col-4"><div class="col-12 background-color m-3">2</div></div>
<div class="col-4"><div class="col-12 background-color m-3">3</div></div>
</div>
</div>
The Bootstrap column system (as you probably know) is based on the idea that the page has 12 notional columns. You then use the col-* classes to indicate how many of those 12 columns each element takes up. So, in this case, you've declared that each element takes up 4 columns, which means they use all 12 notional columns.
The problem is that margins in HTML are outside the element. So, if you have three elements, each using 4 columns, and then add some margin, you now have more than the width of the 12 columns available (here, 12 columns plus three lots of m-3). As a result, the third element doesn't have enough space to be displayed and flows to the next line.
To avoid this, you can use padding instead of margins (because paddings are inside the element, you get visual separation while sticking to the grid widths). Alternatively, you could reduce the width of the elements to col-3 and add your margin outside that. However, this may mean (depending on your layout) that it doesn't use the full width.
Ultimately, if you need three elements across the page with margins, it may be best to define your own classes rather than trying to use the Bootstrap classes. Frameworks are great when you work with them, and a pain when you work against them!
.background-color {
background-color: lightgrey;
height: 200px;
border: 1px solid black;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col background-color m-3 ">1
</div>
<div class="col background-color m-3">2</div>
<div class="col background-color m-3">3</div>
</div>
</div>
use col instead of col-4
Related
As I understand flexbox fills available space in width.
I inspected the the row many times and I really do not understand why it does not fill all available space in width. It's display flex + nothing strange here. And as you can see chrome tells that there is a lot of available space to fill.
Before this row div I created another div but only d-flex and background-red; and it worked correct and filled all available width space. While this row doesnt do this. And the question is why?
I also searched internet looking for answer but could not find any.
<div class="container">
<div class="row justify-content-md-center">
<div class="col-10 pb-2 text-justify news_content">
test
</div>
</div>
</div>
https://jsfiddle.net/g1xLhz6r/
Changing the bootstrap class .container to .container-fluid and changing the class .col-10 to .col gives the result you describe. Remember that .col-10 means use 10 of the 12 available columns so puts a 1-column space on either side of that div.
.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid"><!-- Change to container-fluid -->
<div class="row justify-content-md-center">
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
You can also just eliminate the class .container or .container-fluid from the outer div and add the bootstrap class no-gutters to the div with class of row as shown here (you still need to use .col instead of .col-10):
.news_content {
background: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div><!-- removed class = container -->
<div class="row no-gutters justify-content-md-center"><!-- added no-gutters -->
<div class="col pb-2 text-justify news_content">
test
</div>
</div>
</div>
no-gutters
I'm currently working on a website and I have come across with the following problem thinking the best practice to achieve the following layout using Bootstrap 4. (Wrapped in Red)
As you can see the first column is a col-md-7 and the other one is col-md-5. However, the first column includes an image and it has to touch the left corner of the page. However, the right column has to have the standard width and column size. To give you more insight following is what I'm trying to achieve.
[JS Fiddle][2]
You mean something like that using align-self-start class?
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.image {
height: 200px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row d-flex">
<div class="col image">
Image
</div>
<div class="col align-self-start">
Test
</div>
</div>
</div>
You will need to wrap the left image and the right column in a row, set the column width for each, then place each item in the right column inside of that div with a full width.
I think if you continue to ask "do it for me" questions on SO you will get roasted, I know I have. But I'm here to help. LMK if you want more details.
There are a million solutions to this problem, This would be a great time to look into CSS Grid and learn the new new.
Here is a codepen of the general approach
<div class="row">
<div class="col-md-7 left-box"></div>
<div class="col-md-5">
<div class="col-md-12 item"></div>
<div class="col-md-12 item"></div>
<div class="col-md-12 item"></div>
</div>
</div>
It's technically very simple code of displaying two images next to each other:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="background-color: black;" >
<img src="https://via.placeholder.com/518x278.jpg" class="img-fluid" style="margin: 0px; padding: 0px;">
</div>
<div class="col-md-9" style="background-color: yellow;">
<img src="https://via.placeholder.com/1411x278.jpg" style="width: 100%;">
</div>
</div>
</div>
However, the images do not fill the col container width 100% (as evident by the still visibile background-color? Why aren't they stretching to fill the container?
I have tried setting margin to 0px and explicitly stating width: 100%; as you see, but it doesn't work. I have no other formatting except the Boostrap default min.css.
col-md-3 and col-md-9 both have 15px padding.
Adding no-gutters to the row div will remove the padding.
Why aren't they stretching to fill the container?
That's because a Bootstrap row normally has gutters in it. (which means each column in a row has 15px left and right padding)
Add the class no-gutters to the row to remove the gutters.
And add the px-0 class to the container to remove the horizontal padding on the container if needed.
Hi all I'm using this bit of code
<section id="post1">
<div class="container-fluid post-1">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-8 oblongbig">
</div>
<div class="col-lg-4">
<div class="row">
<div class="=col-lg-6 oblong">
</div>
</div>
<div class="row">
<div class="col-lg-6 oblong">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
to create three boxes, have a look at http://deliciousproductions.com.au
My problem is that the first and larger box is fine but the second two boxes should start after the first col-lg-8, but they just start right up against the large box, as though there's no padding/margin. I added a 10px margin so it's easier to understand. So the col-lg-8 isn't making it's width 8/12's of the screen?
The 2 boxes in rows also aren't responsive, they are but when you make the page smaller this happens: https://gyazo.com/4929147de70b0a88ac54d29f4ff2c243
and then finally: gyazo[.]com/c57374233a4e0f14fc4f757841893cc5
What would you recommend to make it so when the page resizes the 2 smaller boxes resize so they fit next to each horizontally under the larger box. This is for a blog style site btw.
cheers, Nik
here's the css for each box too
.oblongbig {
float: left;
width: 600px;
height: 300px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
.oblongbig:hover, .oblong:hover {
background-color: #121212;
}
.oblong {
float: left;
width: 300px;
height: 150px;
background-color: #050505;
border-width: 1px;
border-style: solid;
border-color: rgba(0,0,0,.2);
margin: 10px;
}
similar to this: demo
There is some problem with your grid code. Use this one
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-8">
<div style="height:330px;background:#000;"></div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;margin-bottom:30px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div style="height:150px;background:#000;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Also don't apply styles directly on grid column. Place content div inside grid column and apply whichever styles you want on that div.
Check out this URL for better understanding of Bootstrap grid system - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
To count a column you need to consider the value of the intervals between them.
Here you can see a visual explanation
There are a couple of issues going on in your code. For Bootstrap columns to work properly, you can't have a column div inside another column div without starting a row. For example, you must format it like this:
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div><!-- .row -->
</div>
<div class="col-lg-4"></div>
</div><!-- .row -->
</div>
In your example you have two nested columns with no row in between. This will mess up your column padding & margins.
Refer to the docs: http://getbootstrap.com/css/#grid-nesting
Next, you're applying your own classes (.oblong, .oblongbig) with set float, fixed width, and margin to the Bootstrap column div. These are overriding the Bootstrap styles and preventing your columns from working properly.
The best idea is to use elements with Bootstrap classes to build your layout, then put elements inside these layout elements with your own custom classes. For example:
<div class="col-lg-6">
<div class="oblong">Your content here, separate from the Bootstrap element</div>
</div>
Avoid overriding the framework's styles, as this results in confusing code. Once you reformat your code so that columns are correctly nested and you're not overriding the Bootstrap classes with your own custom widths, it should come together how you want.
I'm working with a HTML view using Bootstrap3. I need to create a template with different cells and I usually work with cols and rows, but this time I have a problem with drawing one column.
This is the scheme I need:
This is the code:
<div class="row">
<div class="col-md-3 doubleHeight"></div>
<div class="col-md-9 singleHeight"></div>
<div class="col-md-3 singleHeight"></div>
<div class="col-md-3 singleHeight"></div>
<!--column bottom right-->
<!--column bottom left-->
</div>
The problem begins when I try to draw the column on the bottom right. If I draw it after the two col-md-3, it doesn't allow me to show the last column on the left inline with it. If I draw it after the last column on the left, it doesn't occupy the space above.
Have you got any idea of the possible solution?
Thanks.
WARNING: This post contains multiple variations of the same snippet between explanations to demonstrate the logic and provide a visual representation of how the code will actually operate. If you edit it, please keep that in mind.
Before I give you the solution, I want to make something PERFECTLY clear, this is NOT supported by the Bootstrap framework. To clarify, Bootstrap supports the wrapping of the blocks which can be used to account for this, however, it does NOT manipulate the height to accommodate a block spanning multiple rows.
Alright, with that said, the closet you can get to your request is via column wrapping. You can't do multiple layers of blocks because you have blocks that would belong to two different parents, and that simply isn't possible to quantify with the current CSS/HTML structure. Further, you can't do anything for the last block to appear next to the bottom-right block.
Here's a little demo of the structure that gets closet to what you are asking for:
div div {
border: 1px solid black;
}
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and unknown rows.</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
</div>
I added a little border to give a visual idea of how it actually renders. Here's the downside to this, it is 100% dependent upon your control of the content in each block to maintain the rows. For example, if you put only enough content in the very first block to account for the height of the second block, you will get the third, fourth, and fifth blocks left flushed and push the sixth block down further.
div div {
border: 1px solid black;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">One liner</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">One liner<br />Two liner</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">One liner</div>
</div>
I'm afraid that there is not "easy" way to mitigate this, short of defining height for each block. Further, the bottom-right block can NEVER exceed the content height of the third and fourth blocks. If it exceeds it, then you get a gap between the sixth block and those immediately above it.
div div {
border: 1px solid black;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
height: 50px;
}
.row-2 {
height: 100px;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 row-2">This block spans one column and unknown rows.</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">This block spans one column and row.</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 row-2">This block spans one column and row.</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">This block spans three columns and one row.</div>
</div>
Even though the sixth block fits into the gap, it can only follow the structure if it is after the fifth block. This forces the browser to render it below it. That's block for you.
Honestly, the ONLY way to make that layout in any framework of HTML(5) and CSS(3) is to use a table. It's a HIGHLY discouraged practice for layouts, but it, truthfully, is the only option that I know of.
Here's the upside, you can still use the Bootstrap col-lg-*, col-md-*, col-sm-*, and col-xs-* classes on the tds to ensure they follow the Bootstrap columns sizing.
td {
border: 1px solid black;
vertical-align: top;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<table>
<tr>
<td rowspan="2">This block spans one column and two rows.</td>
<td colspan="3">This block spans three columns and one row.</td>
</tr>
<tr>
<td>This block spans one column and row.</td>
<td>This block spans one column and row.</td>
<td rowspan="2">This block spans one column and two rows.</td>
</tr>
<tr>
<td colspan="3">This block spans three columns and one row.</td>
</tr>
</table>
I'm sorry, I know it's not quite what you were looking for, but, at least as far as my knowledge is concerned, it simply isn't possible to do that a wraparound layout without a table.
Masonry (javascript) seems ideal for this, although not pure CSS/Bootstrap.
In this case the problem was simplified because I had divs with fixed height. I kept Bootstrap template and I assigned to the bottom left div the class of col-md-9, giving it a certain amount of space from the top. I know it's not the best way to do it, but it is horizontally responsive still.
This is the HTML code:
<div class="row-fluid">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 doubleRow box">...</div>
<div class="col-md-9 singleRow box">...</div>
<div class="col-md-3 singleRow box">...</div>
<div class="col-md-3 singleRow box">...</div>
<div class="col-md-9 singleRow box">...</div>
<div class="col-md-3 doubleRow box upper">...</div>
</div>
</div>
And this is the CSS:
.singleRow{
height:280px;
}
.doubleRow{
height:560px;
max-height:100%;
}
.upper{
top: -280px;
margin-bottom: -280px;
}
.box {
border-style: solid;
border-width: 5px;
border-color:black;
text-align: center;
padding: 1%;
position: relative;
}