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
Related
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."
I am trying to create a album style like the example below:
if you look at the recent works section where you have an image on one side and text on the other but it takes up the whole width of the page:
https://colorlib.com/preview/theme/racks/
or the example on this page:
https://getbootstrap.com/docs/4.4/examples/product/
<section class="recent-ideas">
<div class="container">
<div class="card w-50 h-10 p-3" style="width: 18rem;">
<img class="card-img" src="images/bulb.jpeg" >
</div>
</section>
The code i am using above basically creates a card in bootstrap but when i insert the picture i dont know how to format the height and width to keep everything the same
As I mentioned in the comment use container-fluid and overwrite the left/right padding using another class in a different css file.
HTML File
<div class="container-fluid my-container">
<div class="row no-gutters"></div>
</div>
CSS File
.my-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
Then you can add your css file as you normally do. The reason to not overwrite the container-fluid class is because you might need it in another part of your site with the paddings.
The second option is not use the container class and use the row and no-gutters:
<div class="row no-gutters">
<!-- your content here -->
</div>
To give the images the same width just use the same column class in all of them and use the background-image property in the elements instead of using an actual image. Since in the sample the images have a link in them you can use something like this:
HTML File
<div class="row no-gutters my-row">
<div class="col-12 col-md-6">
</div>
<div class="col-12 col-md-6">
<div class="content-container">
<!-- content-here -->
</div>
</div>
</div>
CSS File
.content-container {
display: flex;
height: 100%;
align-items: center;
padding: 2rem 1rem;
min-height: 50vh;
}
.content-text {
text-align: center;
margin: 0;
}
.image-link {
display: block;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 50vh;
}
I added the min-height to the image and content container in order to keep the sizes regardless of the content. In the link you provide the reason all the elements have the same height is because they have the same amount of text, if you change that the entire layout breaks in an ugly way, that is a sign of a poorly thought and constructed layout, that hasn't been tested thoroughly.
Here is a working example:
https://codepen.io/rhernando/pen/WNbaaeN?editors=1100
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).
I use Bootstrap 3 on a form with the following HTML, containing 4 panels with the same structure as the example below.
My problem here is that each panel contains a different and therefore appears with a different height. I tried adding style="height:100%" to them but that didn't change anything.
Can someone tell me how I can set them to always take the full height, independent of their content? Basically, what I am trying to achieve is to have all 4 panels take the same height as they appear in one row - they only thing the differ is the paragraph with the variable text, everything else is the same for all panels and takes the same height for each of them.
Example panel:
<form role="form">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="thumbnail thumbnail-hover">
<div class="txtcntr" style="width:100%"><span>Placeholder for icon</span></div>
<div class="caption">
<h3 class="text-primary">Title</h3>
<p>Some variable text</p>
<p>View</p>
</div>
</div>
</div>
</div>
// ...same structure for other panels...
</form>
Here is what I did: http://jsfiddle.net/o7p1jtjv/1/
By setting the .row to have a hidden overflow, and then giving each column div a margin-bottom equalling the padding-bottom, you force them to all be larger than the .row, but none of the overflowing content (extra div space) is shown.
For comparison, here is one without the extra rules: http://jsfiddle.net/o7p1jtjv/2/
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
<div class="col-xs-4">
<p>text</p>
</div>
</div>
</div>
.row
{
overflow: hidden;
}
.row > div
{
background: red;
margin-bottom: -999999px;
padding-bottom: 999999px;
}
To adjust the height of your thumbnail use a fixed pixel height like 300px.
.thumbnail {
height: 300px;
}
The thumbnail class does not respond to percentage height changes.
Like #Dan said, the panel class would be a better option. If you prefer not to use fixed height, you can use CSS flexbox like this..
http://www.bootply.com/IwBoyELqpx
If I try to apply min-width, max-width to a floating div so that it expands to max-width when the right content is hidden does not work.
But, if I use table and 2 tds in it, the left td will expand to 100% if the right td is hidden.
Can I achieve this table effect with floated divs?
I don't think you can do what you are asking, but you can make it look like what you are asking.
Make it into two tds and put a max-width on a div inside the td. Would that work?
This isn't going to work with floats. Luckily we now have more tools at our disposal.
Here are two very simple methods to expand a div to 100% of the available width if a sibling horizontally to it is hidden or removed.
#1 – Using display: flex
Compatibility: Edge and all modern browsers. IE 10 and 11 support the non-standard -ms-flexbox.
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container div is given display: flex.
The containers children are give flex: 1 and they will be assigned equal width, can grow and can shrink.
.container {
width: 500px;
display: flex;
}
.container>div {
flex: 1;
background: #FF6961;
height: 200px;
margin-bottom: 20px;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
Read this guide to flexbox
Read more about flexbox on the MDN
#2 – Using display: table
Compatibility: IE8+ and all modern browsers
The Basic Markup
<div class="container">
<div>
First Column
</div>
<div>
This second column can be hidden or not exist and the first column will take up its space
</div>
</div>
The CSS
The container is given display: table
The containers children are given display: table-cell and will act the same as cells in an HTML table. If a cell is hidden or is removed the other cell will take its space.
.container{
display: table;
width: 600px;
margin: 20px;
}
.container>div {
display: table-cell;
height: 200px;
background: #FF6961;
}
.container>div:nth-child(even) {
background: #006961;
}
<div class="container">
<div>
Content
</div>
<div>
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when other divs are hidden.
</div>
<div style="display: none">
Content
</div>
</div>
<div class="container">
<div>
Content takes up the whole width when there is no other div.
</div>
</div>
<div class="container">
<div>
Content takes up the remaining width if a cell has a fixed width.
</div>
<div style="width: 200px">
Content
</div>
</div>
Read more about CSS tables on the MDN