I have a bootstrap grid layout but the row is not occupying 100% width. I am using Bootstrap 4 alpha 6. Here is the HTML:
<div class="container-fluid">
<h1 class="center-text" id="heading">[Enter Heaading Here]</h1>
<div class="container">
<div height="100px" class="row border-show">
<div class="col-4" id="one"></div>
<div class="col-4" id="two"></div>
<div class="col-4" id="three"></div>
</div>
</div>
</div>
Here is the CSS:
.center-text{
text-align: center;
}
#heading{
padding: 60px;
}
.border-show{
border-style: solid;
border-color: black;
}
In case someone else comes across this and the answer doesn't solve their problem, my issue that was causing this was because I didn't realize I was adding a row and trying to set up columns in a Bootstrap navbar. navbar already has a grid-like system in it by default, so it seems you are pushing it over the edge if you try to add columns inside of it. They aren't necessary anyway.
So if this answer doesn't solve your problem, check to see if you are inside of another Bootstrap component that already handles spacing. You may be trying to double-delimit your content!
Remove it from the container. The container is not 100% width, and shouldn't be nested in another container.
The container class has this effect.
<div class="container">
<div class="row">
<div class="col-12">
div into <b>container</b> class
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
div into <b>container-fluid</b> class
</div>
</div>
</div>
This code will generate following image:
In my case even container-fluid also didnot work because I used row class with the container-fluid in the same div. So, I removed the row class from the parent div and inside that I created a child div and used row class. Then it worked.
<div class="container-fluid row">
<div class="col-12">
didn't work
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-12">
worked
</div>
</div>
</div>
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 2 years ago.
I have the following structure in my project:
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A"><div>
</div>
<div class="uneditable">
<div class="B"></div>
</div>
</div>
...
</div>
I have the following restrictions with this structure:
container class must be display flex and be on column mode
super-child class must be display flex and be on row mode
uneditable class does cannot receive any styling at all, only that they have height and width 100%
What i'm trying to do is style this structure so that class A has a dominating height of over B, that is, if A height grows, B will have more height to match A's, if A is smaller, B will have the same height as A's
I've tried to set grow and shrink values in the class A and B. I can also change the displays to grid, but in my case is not preferred to.
Is there a way to make this dependence of height without using javascript to style the elements?
[UPDATE]
Found the answer to my question here. The solution was to use the following style for all children of super-child, except the first.
height: 0;
min-height: 100%;
This works due the fact that this conjunction of height definition can be understood as "have no height, just expand enough not pushing the boundaries"
... I would use grid for this, not flex and pay attention to the closing tag too :) , flex will require a bit of js to update heights :
example in a column since in a row should not be an issue
.super-child {
display: grid;
grid-auto-rows: 1fr;
}
.super-child > .uneditable {
border: solid;
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
... side by side :
.super-child {
display: flex;
}
.super-child > .uneditable {
border: solid;
flex:1;
/* demo purpose to resize heights */
overflow-y:scroll;
resize:vertical
}
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A <br> AA</div>
</div>
<div class="uneditable">
<div class="B"> B</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="super-child">
<div class="uneditable">
<div class="A">A </div>
</div>
<div class="uneditable">
<div class="B"> B<br> BB</div>
</div>
</div>
</div>
<div class="container container-fluid">
<div class="row">
<div class="col-lg-6">
<app-profile [conId]="conId"></app-profile>
</div>
<div class="col-lg-6">
<app-sales [conId]="conId"></app-sales>
</div>
</div>
</div>
I have no idea why this is happening.
Could it possibly be because I'm wrapping Angular component tags in the Bootstrap rows and columns? I'm almost certain I've done something like this before and it worked.
I've attached a picture of what's happening and highlighted where it's over lapping.
Edit:
Seems to look good if I remove the component tags and add some background color. So it may actually have something to do with the components themselves?
<div class="row">
<div style="background-color: red; height: 20px;" class="col-lg-6">
</div>
<div style="background-color: yellow; height: 20px;" class="col-lg-6">
</div>
</div>
Columns
Here is an example of my issue: JS Fiddle
I have something like the following:
<div class="container">
<div class="col-sm-10 col-sm-offset-1">
<div class="row">
<div class="col-xs-12">
<div class="big-box">image</div>
</div>
</div>
</div>
</div>
I want the inner <div class="col-xs12"> to be the default size for the container. But the 'parent' div is taking over (as expected). How can I stop this without removing the parent?
In the JS Fiddle you can see what I am attempting to do.
I fixed this by doing the following:
.col-sm-expand-2 {
width: 120%;
margin-left: -10%;
}
Updated JSFiddle
i have the following:
"
<div class="container">
<div class="row">
<div class="col-md-3">
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div class="col-md-offset-10">
<h6 id="dateTime">23/07/2015 12.00</h6>
</div>
</div>
</div>
</div>
<div class="panel-body">
</div>
<div class="panel-footer"></div>
"
Using only bootstrap, is it possible to center the two vertical labels of different dimensions (Current Job and Date) contained in Header panel (that contains a grid) and how to do it?
You need to alter the CSS for the following containers:
<div class="col-md-3"> and <div class="col-md-offset-10">
Giving both containers float: none; and margin: 0 auto will definitely center both. If you want the text to be centered as well, add some text-align: center
That should have you covered.
Sorry, forgot to mention that the container <div class="col-md-offset-10"> needs to match the width of the other container (25%).
You can do this by removing classes from your div tags for labels and giving text-center class to div with class row. This will make both labels appear in the middle of the page and one after another vertically. this is what your code container will look like:
<div class="container">
<div class="row text-center">
<div>
<h3><span class="label label-default">Current Job</span></h3>
</div>
<div>
<h6 id="dateTime">22/07/2015 12:00:00</h6>
</div>
</div>
</div>
I have managed to create a page that looks like this:
<div class="container">
<div class="row fullscreen">
<div class="col-md-6 pink-panel">
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 gray-panel">
</div>
</div>
<div class="row">
<div class="col-md-6 orange-panel">
</div>
<div class="col-md-6 black-panel">
</div>
</div>
</div>
</div>
</div>
You can view it here
The problem I have is that I would like to have a small margin between each panel (right and top). If I add top margin I get this:
http://codepen.io/r3plica/pen/jPVQqy
which you can see makes the rows not line up anymore, which is not what I want. Similarly, if I add a right margin, predictably I get this:
http://codepen.io/r3plica/pen/NqbErr
Now I know the reason for both these issues. I could try and write some JavaScript to help me fix the issue, but I would prefer to solve this in pure CSS.
Has anyone encountered this issue before and solved it?
you could nest your color-panels
<div class="container">
<div class="row fullscreen">
<div class="col-md-6">
<div class="col-md-12">
<div class="pink-panel">
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="gray-panel">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="orange-panel">
</div>
</div>
<div class="col-md-6">
<div class="black-panel">
</div>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/0z76regv/
You must remember that bootstrap uses specific margins and paddings for its layout (e.g. negative margins for row classes) To fit elements in desired way you should remember that each col-* block has its width described in percentage.
I would suggest two solutions:
Overloading default percentage for columns if you don't mind changing 5px to arbitrary values. You could e.g. set col-md-6 classes to use only 49.5% of its width and remaining 0.5% for margins.
http://codepen.io/anon/pen/QbGJgp
.col-md-6 {
width: 49.5%;
margin-right: 0.5%;
}
.row {
margin-bottom: 0.5%;
}
Using calc() function to substract aforementioned 5px from proper elements. More info: https://developer.mozilla.org/en-US/docs/Web/CSS/calc, however this functionality isn't very compatible with older browsers: http://caniuse.com/#feat=calc.
http://codepen.io/anon/pen/yNVQoz
.col-md-6 {
width: calc(50% - 5px);
margin-right: 5px;
}