In the following example is there a bootstrap way of making the div with id "second" fit inside its parent container and not overflow when given h-100 class? A hacky way I used was applying overflow:hidden to the parent container of #second div and it does the job for my specific case but would this be called an elegant solution in this scenario?
<div class="container">
<div class="row">
<div class="col-6 bg-dark">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
https://www.codeply.com/go/pSVIlOETpB
Sure, just make the containing col-6 display:flex, flex-direction:column by using d-flex flex-column classes on it...
https://www.codeply.com/go/5YiBkLo0qO
<div class="container">
<div class="row">
<div class="col-6 bg-dark d-flex flex-column">
<div id="first">
<h5 class="text-white">some title</h5>
</div>
<div id="second" class="h-100 bg-success">
</div>
</div>
<div class="col-6 bg-danger">
<img src="http://via.placeholder.com/540x400">
</div>
</div>
</div>
Related
I'm new to Bootstrap and am struggling to figure out why my left column height is not displaying as the full height of the parent div. From what I understand in the docs, you just add h-100 as a class to have it take up 100% of the height relative to the parent, but I'm obviously not understanding it right. It probably has something to do with the fact that it's a block element?
<div class="container vh-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="row col g-0 d-flex justify-content-center w-75 align-items-center border border-dark">
<div class="col-6 bg-secondary h-100">
<h1 class="text-center">Hello There!</h1>
</div>
<div class="col-6">
<img src="images/ivy.jpg" alt="ivy" class="img-fluid" />
</div>
</div>
</div>
</div>
There are too many row divs, and a missing h-100 on the parent...
<div class="container vh-100">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="row g-0 d-flex justify-content-center w-75 align-items-center border border-dark h-100">
<div class="col-6 bg-secondary h-100 border">
<h1 class="text-center">Hello There!</h1>
</div>
<div class="col-6">
<img src="images/ivy.jpg" alt="ivy" class="img-fluid" />
</div>
</div>
</div>
</div>
https://codeply.com/p/RyTy1s0AF8
Note, only columns should be the immediate children of row.
<div class="container vh-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="row col g-0 d-flex justify-content-center w-75 align-items-center border border-dark">
<div class="col-6 bg-secondary vh-100">
<h1 class="text-center">Hello There!</h1>
</div>
<div class="col-6">
<img src="https://cdn.pixabay.com/photo/2021/07/21/07/09/cygnet-6482420_960_720.jpg" alt="ivy" class="img-fluid" />
</div>
</div>
</div>
</div>
Do you mean something like this?
The bg-secondary is now filling the entirety of the div.
I am using bootstrap for my layout.
<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column justify-content-center align-items-md-center">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>
Here is for example one column in my row.The content of that column should be on the left ( default )
and centered vertically so for that i used
d-flex flex-column justify-content-center
but now on smaller devices i want the content to be in the center, not in on the left.
So tried with the class
align-items-md-center
to tell that the content should be in the middle on > 768px devices.But then the whole time the content is in the middle not only on md devices.
How shoould i do that ?
Youn need to use align-items-center align-items-md-start. You have centring by default and you reset the center on md (> 768px)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column justify-content-center align-items-center align-items-md-start">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>
I added a new advertising block to the header visible here: https://musebycl.io/test_page. This made the navigation block move to the far right. I can't figure out why that is happening, even though these elements are supposedly in separate divs.
How do I modify the header ad or the navigation HTML/CSS to bring the navigation back to its normal position as visible on the home page (https://musebycl.io/)?
Your framework applies flex rules on the .row element that push your navigation block to the right, as it has no defined width.
Try to move your add .block-content one level up in your rows into div.container.py-2.row
with this html it works:
<div class="container py-2">
<div class="row justify-content-between align-items-center">
<div class="block-content">
<div
class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
...
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center">
<div class="col-auto">
<div class="region region-logo">
<div id="block-headerad"
class="block block-block-content block-block-content98569f6a-2644-4a93-a22a-d735717c7cda">
</div>
<div id="block-muse-sitebranding-3" class="block block-system block-system-branding-block">
<a href="/" rel="home" class="site-logo">
<img src="https://cdn.musebycl.io/compact-muse-logo.png" alt="Home">
</a>
</div>
</div>
</div>
<div class="col-auto d-none d-lg-block">
<div class="region region-header-primary-menu">
...
</div>
</div>
</div>
</div>
<div class="col-auto">
<div class="row justify-content-between align-items-center no-gutters">
<div class="col-auto d-none d-lg-block">
<div class="social-menu d-flex align-items-center">
...
</div>
<div class="col-auto">
<div id="user-action-menu" class="user-action-menu d-flex align-items-center">
...
</div>
</div>
<div class="d-lg-none">
...
</div>
</div>
</div>
</div>
</div>
You can create external CSS like
#advertising-nav-bar {
position: fixed;
top: 0px;
}
HTML :
<div id="advertising-nav-bar">
<!--content -->
</div>
You have to give your block-content a width.
Like:
.block-content{
width: 500px;
}
<div class="container">
<div class="row no-gutters">
<div class="col m-2">
<div />
</div>
<div class="col m-2">
<div />
</div>
<div class="col m-2">
<div />
</div>
...
</div>
</div>
So in this width it looks well aligned
When i go slightly wide i see that the div's in the second row are not close to each other. Is there a way to align the cols in the last column to be close to each other (and aligned with column 2,3,4 of row 1)?
Here is a jsfiddle for the same.
Use col-auto instead of *col, because you use fixed width for the boxes so that they takes as much space as necessary. And use justify-content-center for the row to align the columns in the center. Most importantly, use p-2 instead of m-2.
.box {
width: 200px;
height: 100px;
background: lightblue;
}
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters justify-content-center">
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto p-2" >
<div class="box mx-auto">
hello
</div>
</div>
</div>
http://jsfiddle.net/6bx12u5w
You use an older version of Bootstrap. Better to use the latest one since there are a few new classes has been added.
Update
col takes all the available space while col-auto takes as much as space as it needs: it takes as much space as the natural width of it content.
Here are a few different options for last row alignment.
Align last row to center
I see that you want the last row cols aligned under 2,3,4, so in this case you can simply use justify-content-center along with the col-auto columns. The col-auto uses flexbox shrink to make the column width fit the content.
<div class="container">
<div class="row no-gutters justify-content-center">
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
..
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
</div>
</div>
https://www.codeply.com/go/iwL7PW77En
Align last row to left
Aligning the last row to the left is a flexbox issue that has been addressed before. If you don't mind having the entire layout not centered, just use col-auto to shrink the width of the columns to fit the boxes and justify-content-start.
<div class="row no-gutters justify-content-start">
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
....
</div>
https://codeply.com/go/LZkOF9zexh (align start)
If you need the entire layout centered, as you can see from the other answers there are various workarounds to align the last row left. IMO, the simplest, most reliable way in Bootstrap 4 is using a empty spacer elements at the end. You'll need 4 empty spacers since the max in any row is 5 cols.
<div class="row no-gutters justify-content-center">
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
...
<div class="col-auto m-2">
<div class="box mx-auto">
hello
</div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
<div class="col-auto m-2">
<div class="box invisible"></div>
</div>
</div>
https://codeply.com/go/F7pGyqIIT6 (spacers at end)
I'm using Bootstrap 4 alpha 6, and attempting to use flexbox to vertically center the content of equal height cards. I've used the h-100 util class to make the cards full height with the columns..
The problem is that I want the content of each card to be aligned in the middle (centered vertically). I tried the use the .align-items-center class in the row, which works to center the cards, but then the cards are no longer equal height...
HTML
<div class="container">
<div class="row align-items-center bg-faded">
<div class="col-md-2">
<div class="card card-block h-100">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100">
I have a little bit.
</div>
</div>
</div>
</div>
Demo of problem
Here is a simpler solution for you:
using only justify-content-center utility class because .card has already flex-direction: column property
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<code>normal .row with .card inside .col-*</code>
<h6>Problem is that card content is not centered</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center align-items-center">
I have a little bit.
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<code>.align-items-center.row with .card inside .col-</code>
<h6>Problem is that cards are no longer full height</h6>
<div class="row bg-faded">
<div class="col-md-2">
<div class="card card-block h-100 justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
One way I've found to solve the centering issue is using the flex-column utility class. Since each card is display: flex, flex-column can be used to set flex-direction: column. Then, justify-content-center vertically aligns the content...
<div class="container">
<div class="row">
<div class="col-md-2">
<div class="card card-block h-100 flex-column justify-content-center">
I have a lot of content that wraps on multiple lines..
</div>
</div>
<div class="col-md-6">
<div class="card card-block h-100 flex-column justify-content-center">
I have a line of content.<br>
And another line here..
</div>
</div>
<div class="col-md-4">
<div class="card card-block h-100 flex-column justify-content-center">
I have a little bit.
</div>
</div>
</div>
</div>
Demo