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.
Related
.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
I have this style:
.form-style{
margin: 50px auto;/* also tried margin: 50px auto !important; */
/* other styles */
}
And I use it in my div element like this:
<div class="row">
<div id="myDiv" class="form-style col-md-6 col-md-offset-3">
<p>This is a text.</p>
</div>
</div>
If I don't use form-style my div is appear at the center. But I want to use form-style and when I use it, the margin property of the form-style will prevent the bootstrap col-md-offset-3 to make my div center. How can I override the parent margin so that it haven't been set for my div?
If I remove the margin from form-style it works fine. But I can't remove the margin since it is used in other parts of my project.
Not sure why you want something like this as it seems a hack but your issue is that your element is floating that's why the margin auto is not working, so you need to remove the floating to make it working. (but it's not a good idea as it will make bootstrap behave strange)
.form-style {
margin: 50px auto!important;
float: none!important;
/* other styles */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class=container>
<div class="row">
<div id="myDiv" class="form-style col-xs-6 col-xs-offset-3">
<p>This is a text.</p>
</div>
</div>
</div>
From your question is seems that you don't want to replace the offset value of left to right, but want the margin set to the top and bottom. If this is the case this will work without any override of Bootstrap values. Also, adding the div id will not affect any other places that form-style is used.
#myDiv.form-style {
margin-top: 50px;
margin-bottom: 50px;
border: 1px solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div id="myDiv" class="form-style col-md-6 offset-md-3">
<p>This is a text.</p>
</div>
</div>
I´m trying to make the image below to fit the whole div, meaning that the background image should take the whole space and I shouldn't see the green color. Unfortunately I can´t find a way to do it.
#imagecontainer {
background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
border: 1px solid;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container no-padding" id="maincontent" tabindex="-1">
<div id="imagecontainer" class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" alt="">
<div class="intro-text">
<h1 class="name">Start Bootstrap</h1>
<h1 class="name">Start Bootstrap</h1>
<h1 class="name">Start Bootstrap</h1>
<hr class="star-light">
<span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</div>
</div>
</div>
Many thanks!
Your using container, use container-fluid to make it full width. Here is a demo
The #maincontent div has a padding, a positive margin and a width set in pixels; and the #imagecontainer has a negative margin.
This is because that's the way Bootstrap deals to accomodate items in its grid.
You could considerate using a fluid Jumbotron instead to use the full width and take the necessary vertical space for your content.
This could be of help: https://v4-alpha.getbootstrap.com/components/jumbotron/
Thank you for taking a look at my question which is: I'm trying to create two boxes that have the .row class and they are both in a .container-fluid wrapping. Whenever I do this there's a weird space on the right, I don't know if this is a margin that bootstrap adds but from what I understand .container-fluid is supposed to be full screen?
The two boxes are yellow and white, the container-fluid is pink/magenta.
CODE:
<div class="container-fluid">
<div class="row" style="background-color: #EFF3CD; width:100%; height:350px;"></div>
<div class="row" style="background-color: #FFF; width:100%; height:350px;"></div>
</div>
Any insights into why this is happening would be great and highly appreciated!
Try removing your width: 100% property from .row. That class already sets left and right margins, which looks to be why you're having this problem. If you look at it in your browser's inspector, it should show you how the margins are drawn visually.
As #Tom suggests, the width of the row elements is "determined" (via css) for you as part of the package. So when one sets the width explicitly even to 100% they are working against what bootstrap is doing. The rose row is the required 30px wider than the blue. I believe that would be true even without the bootstrap javascript but I added it for completeness.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container-fluid">
<div class="row" style="background-color: aliceblue; width:100%; height:50px;"></div>
<div class="row" style="background-color: mistyrose; height:50px;"></div>
<div class="row" style="background-color: aliceblue; width:100%; height:50px;"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Try setting margin for container-fluid:
<div class="container-fluid" style="margin: 0 auto;">
<div class="row" style="background-color: #EFF3CD; width:100%; height:350px;"></div>
<div class="row" style="background-color: #FFF; width:100%; height:350px;"></div>
</div>
I've been working on an application that dynamicaly adds elements to the DOM. The added elements are of two types: ones with height 50px and ones with 100px. They are displayed in with the help of the bootstrap grid system.
Working example:
<div>
<div class="col-xs-6" style="height: 100px;">1</div>
<div class="col-xs-6" style="height: 50px;">2</div>
<div class="col-xs-6" style="height: 50px;">3</div>
</div>
But when i try to rearrange, some unexpected spaces occur on certain layouts:
<div>
<div class="col-xs-6" style="height: 50px;">2</div>
<div class="col-xs-6" style="height: 100px;">1</div>
<div class="col-xs-6" style="height: 50px;">3</div>
</div>
Between element '1' and '3' there is a 50px wide gap. Is there any arrangement where the element '3' is placed in that gap?
Why is this gap occuring?
This is happening because you have added inline style for height.
style="height: 100px;
style="height: 50px;
style="height: 50px;
To know it better look the example here
jsfiddle 1
jsfiddle 2
#Gaurav is correct.. it's happening because you have specific height set. When the height:100px col is placed 2nd it forces #3 to wrap to a new row since the Bootstrap colums float left, but do not float right.
A workaround would be to use the pull-right class on the taller (100px) column...
http://bootply.com/129818