I'm using bootstrap 4.6.0 and wondering if next usage is supported. Everything works, but shouldn't I use another container:
<div class="container-fluid">
<div class="row">
<div class="col-6">
<!-- <div class="container-fluid"> -->
<div class="row">
<div class="col-6">A1</div>
<div class="col-6">A2sdfgsdfgsdfgsdfgsd fgsdfgdfgsdfgsdfg</div>
</div>
<!-- </div> -->
</div>
<div class="col-6">
<h1>Blasdfgsdfgsdfgsdfgsdfgsdsdfgsdfgsdfgsdfgsdfgsd sdfgsdfgsdfgsdfgsdfgsd</h1>
</div>
</div>
</div>
Are there any drawbacks for this usage? Inspecting bootstrap .container-fluid, it has only this style:
.container, .container-fluid, .container-xl, .container-lg, .container-md, .container-sm {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
No need to use container or container-fluid classes to nest rows.
Documentation: https://getbootstrap.com/docs/4.6/layout/grid/#nesting
.bd-example-row .row>.col, .bd-example-row .row>[class^="col-"] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,0.15);
border: 1px solid rgba(86,61,124,0.2);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bd-example-row">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
The difference between .container and .container fluid is that the .container has a max-width style rule applied. This is set at 1170px which when you add the 15px padding left and right, gives a total column width of 1200px.
The margin:0 auto in the styling you provided means that the .container 1200px column is horizontally centred in the viewport.
This is the only difference between them and so it’s fine to use one or the other. The .container-fluid is identical except it doesn’t have the max-width styling and so takes the full width of the viewport.
All you are doing is applying a nested row in your column, which is required to offset the left and right padding of the col. this correct- otherwise you would have left and right gutters of 30 px. But you only need one parent div with either .container or .container-fluid class.
Only the outermost row needs a container. As shown in the docs for "Nesting" the inner rows are placed directly inside the column.
Additionally, the container docs state...
"While containers can be nested, most layouts do not require a nested
container."
Related
Using Bootstrap 4.1, I have spend hours to simply align some columns within a container. But I cannot seem to get the margins and paddings right:
On large screens I want a 2x3 grid, with items boxed and a "frame" around all of the items. But the code posted below, however creates a huge gap (assumingly 2x 15px) between the two columns. How can I get rid of that space?!
Neither editing padding nor margins work.
See code snippet below:
.test-container{
border: solid red 1px;
padding: 1px;
margin: auto;
}
.item{
border: solid 1px black;
height: 70px;
margin: 1px;
}
.row{
padding: 0px;
}
<div class="container-fluid border-top bg-white shadow">
<div class="col-sm-9 test-container">
<div class="row">
<div class="col-md-6">
<div class="item">Select Unit</div>
</div>
<div class="col-md-6">
<div class="item">Unit 1 / Unit 2</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Input:</div>
</div>
<div class="col-md-6">
<div class="item">Value_Input</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="item">Output</div>
</div>
<div class="col-md-6">
<div class="item">The result is...</div>
</div>
</div>
</div>
</div>
There must be a simple solution - but I have obviously no clue. Help is much appreciated.
* EDIT *
Just saw, that the code-snipped generates a 1x6 column. Obviously that is the final result I want on small screens. On large screens however I would like that 2x3 grid with no gap in between.
Your html is fine. Columns in bootstrap have padding on the left and right of 15px by default and rows have padding on the left and right of -15px to counter this on the edge of the row. To get the result you desire, you need the following css:
.row{
padding: 0 15px;
}
.col-md-6 {
padding: 0;
}
This removes the padding on the columns in order to get rid of the gap between the columns and instead puts padding of 15px on each row in order to squeeze the columns into the test container that you made.
My layout is composed of a top menu, a main content and a footer.
In the main content, I would like to take the entire page (no less, no more, so that I do not need to scroll down and I can fill up the page).
In the main content, I would like to split the row via percentages and stack some elements, but I cannot.
This is my code, where I am also using a couple of Angular directives:
<body ng-app="pathfinderApp">
<app-top-menu></app-top-menu>
<div class="container-fluid">
<div ng-view=""></div>
</div>
<app-footer></app-footer>
I defined fullheight and redefined container-fluid:
html, body {
height: 100%;
}
.container-fluid {
height: 90%;
}
.fullheight {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%;
}
My main contents is composed of two side-by-side blocks: one 3 columns and the other 9 columns. Let's consider only the first block (3 columns):
<div class="row fullheight"><!-- this row fills up the page-->
<div class="col-md-3 col-sm-3"> <!-- this is still filling up the page-->
<div class="row height20"><!-- this does not take 20% of the containing row, but less -->
<h3 class="text-center no-margin-top">Main Action</h3>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-default">
<span>My button</span>
</a>
</div>
</div>
<div class="row height40">...</div>
<div class="row height30">...</div>
<div class="row height10">...</div>
</div>
<!-- rest of the columns -->
</div>
height classes are like this:
.height20 {
min-height: 20%;
height: 20%;
max-height: 20%;
}
What I would expect is the the first row in the column be 20% of the total height, the second 40% and so on, but this does not happen. In fact, every row seems to only wraps its content and not taking the full percentage.
How can I fix that?
When you want to apply height in %age you must have to apply height on parent container, in your case parent container is
.row.fullheight
Please apply fix height to this class like
.row.fullheight{height: 100px}
Now when you give child element(.height20) height to 20% it will take 20% form total height that is 20px, so on for other childs
Hope this would be helpful.
Thanks
I got bootstrap col-md-1 that contains an image inside. Moreover, that column is wrapped by content div with paddings.
The problem I'm not okay with is that this image is pretty small. I would like it to be with the size at least as the original one has,
yet it should be responsive.
How can I do this? Thanks in advance!
My Codepen
HTML
<div class="content">
<div class="row">
<div class="col-md-11 first-column"></div>
<div class="col-md-1 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
</div>
</div>
</div>
CSS
.content {
padding: 0 35px;
}
.first-column {
border: 1px solid;
height: 100px;
}
One of the 'blanket' styles that BootStrap ships with is this:
img {
max-width: 100%;
}
This essentially means that images won't go wider than their parent containers / elements. So if your col-md-1 has a width of 97.5px (assuming you're using a normal 1170px container?), your image won't be bigger than 97.5px on viewports > 992px.
Try experimenting with different sized columns:
<div class="col-md-10 first-column"></div>
<div class="col-md-2 back-to-blog">
<a href="/">
<img class="img-responsive" src="https://api.asm.skype.com/v1/objects/0-neu-d1-6d077751650ba9cb23f065b16e4d4581/views/imgpsh_fullsize">
</a>
</div>
Or, for larger viewports, try appending another class to your wrapping container and overrides BootStrap's native container class:
<div class="container container-custom">
Then style is as follows:
#media (min-width: 1420px) {
.container.container-custom {
width: 1390px
}
}
Doing this will ensure your column widths remain proportionate to your container size (they are percentage based after all) and most importantly, you're not overwriting BootStrap!
You'll also notice I've wrapped the above class in a media query. This is so viewports > 1420px have the 1390px container with spacing either side (due to container's margin-left: auto and margin-right: auto which center it in the viewport).
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.
Since this question is outdated my question is how do I create a fluid row within non-fluid container.
I want to have a non-fluid container as my default layout, however the map I am placing, i need it to be full-width non-fluid.
here is my html:
<div class="container">
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
row-fluid is not working with bootstrap 3, setting width: 100%; only takes width of its parent (non-fluid container).
JS Fiddle, Please increase output window width so you can see the difference.
Thanks in advance
Try following code. You can make a 100% width container inside fixed layout.
http://jsfiddle.net/m1L6pfwm/2/
HTML
<div class="row row-full"> content... </>
CSS
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
height: 100px;
margin-top: 100px;
left: 50%;
}
I'm not sure that a completely understand your question, but can't you just use Bootstrap's container-fluid to contain the map row?
http://bootply.com/KP9j6dKCES
<div class="container-fluid">
<div class="row" style="height:100px; background: #f00;">
this should take 100% width
</div>
</div>
Either use apropriate layout
or get same effect using following
<div class="row-fluid" style="position:absolute;z-index:5">
<div id="map-canvas" class="container-fluid"></div>
</div>
<div class="container" style="z-index:0">
<--fluid with respect to first static/relative parent-->
<div class="row-fluid">
<div id="map-canvas" class="container-fluid"></div>
</div>
</div>
You can play same effect using Z-index but not with it's grand parent