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>
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 a canvas inside a div with threeJS, and would like to display the purple bar (which will be for user settings) on the right side of the threejs window. The problem is that for some reason bootstrap is not recognising that I want to put these 2 columns together in a row and is placing them on separate rows. I would expect what I have currently to work, and can't see anything wrong with it... I have a similar situation somewhere else in the project, but with only divs, which is working fine. There is no lay-out scss code other than one thats resetting the margin and padding. there are also no other html files in use for this component.
const threeCanvas = document.getElementById('threejs-canvas') as HTMLCanvasElement;
this.renderer = new THREE.WebGLRenderer({ canvas: threeCanvas });
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<canvas id="threejs-canvas">
<app-threejs [width]=400 [height]=350></app-threejs>
</canvas>
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
EDIT: Desired result would be something like this:
https://www.elfskot.nl/wp-content/uploads/2018/08/thumbnail-configurator-780x520.png
SOLVED: I had ng-bootstrap installed without bootstrap...
Your HTML and class usages is fine, please check if your Bootstrap CSS files are loading and applying to your page.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="row" style="background-color: whitesmoke; height: 100px"></div>
<div class="row">
<div class="col">
<img src="https://placehold.it/400x350">
</div>
<div class="col-2" style="background: blueviolet; height: 621px;">test</div>
</div>
</body>
</html>
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.
So i created a footer with a green background and added a green backgroun inside a container as you can see on the image. But somehow the length of the green is longer than the other container.
CODE HERE
HTML
CSS
I will suggest put your green class inside container not with container. Check below snippet, you will see the difference.
.green {
background: green;
}
.container {
background: red;
}
<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="green">
<div class="row">
<div class="col-xs-3">3</div>
<div class="col-xs-4">4</div>
<div class="col-xs-5">5</div>
</div>
</div>
</div>
I hope this will help.
Looking at your html code it seems that you are using twitter bootstrap framework.
if you want to use the column structure then you should follow the markup standard set by bootstrap
HTML STRUCTURE
<div class="container">
<div class="row">
<div class="col-md-3">
HTML code
</div>
</div>
<div>
don't forget to set the hierarchy as per standards.
checkout the documentation for more details https://getbootstrap.com/docs/4.0/layout/grid/
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>