This question already has answers here:
Center flex item in container, when surrounded by other flex items
(2 answers)
Closed 4 years ago.
With utilising d-flex, justify-content-center and flew-grow-1, I achieved the desired result with 3 divs.
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
<div class="col-auto">
Right
</div>
</div>
I want to achieve the same effect with 2 divs while Middle one is forced to be the exact center. However, if I try to remove the 'Right' element, it can't calculate the center.
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
</div>
Is there a way to force "Middle" to be exact center and Left or Right divs take space from Middle as they need? Kind of like all the positions of Left and Middle are same as in the first image but 'Right' div is not there.
Fiddle http://jsfiddle.net/4a7tLf0m/
I can achieve the same effect with giving specified column size (col-3 instead of col-auto) but I don't like the fact that I need to be explicit. Is this the only way to go?
Keep the right/left div as invisible when not required. That way middle will always occupy the exact same position as when the other 2 divs are not there.
<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 bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
<div class="col-auto">
Right
</div>
</div>
<hr/>
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
<div class="col-auto invisible">
Right
</div>
</div>
<hr/>
<div class="row bg-primary d-flex justify-content-center">
<div class="col-auto invisible">
LEFT
</div>
<div class="col-auto flex-grow-1 text-center">
Middle
</div>
<div class="col-auto">
Right
</div>
</div>
</div>
Related
This question already has answers here:
How to align div to bottom inside div with Bootstrap?
(4 answers)
Bootstrap element to bottom with flexbox
(1 answer)
How can I align a flex-row to bottom in a card?
(1 answer)
Closed 18 days ago.
I want to view multiple articles on a page. I used Bootstrap 5 cards to make it look great. Everything worked out fine as I wanted, but the only thing which bothers me is that the read more link is not at the bottom of the card. I tried adding a d-flex, and used align-bottom, but nothing put the text at the bottom
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card p-2">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100">
</div>
<div class="col-7">
<div class="card-body h-100 p-0 m-0">
<span class="card-text mb-1 small">463</span>
<h6 class="card-title custom-text-truncate">How a responsive website can boost user satisfaction</h6>
<div class="d-flex align-items-end">
Read more ->
</div>
</div>
</div>
</div>
</div>
Group the tile and text to one div to let the flex container have only 2 child items and set the flex container flex-column and justify-content-between (it means one item at the top of the container and the other at the very bottom).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
</div>
<div class="col-7">
<div class="d-flex flex-column justify-content-between card-body h-100 p-0 m-0">
<div>
<!-- Grouping title and text by this div -->
<div class="card-text mb-1 small">463</div>
<div>
<h6 class="card-title custom-text-truncate">
How a responsive website can boost user satisfaction
</h6>
</div>
</div>
<div>
Read more ->
</div>
</div>
</div>
</div>
</div>
You can achieve this by setting the .card-body to use a flex layout and change its direction to column and then finally add a margin-top: auto for the read more link. When utilizing Bootstrap's utility classes, the result would be as follow:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="card p-2">
<div class="row g-3">
<div class="col-5">
<img src="https://via.placeholder.com/800" class="card-img fit-cover w-100 h-100" />
</div>
<div class="col-7">
<!-- Add class names of `d-flex` and `flex-column` -->
<div class="card-body h-100 p-0 m-0 d-flex flex-column">
<span class="card-text mb-1 small">463</span>
<h6 class="card-title custom-text-truncate">
How a responsive website can boost user satisfaction
</h6>
<!-- Add `mt-auto` -->
<div class="d-flex align-items-end mt-auto">
Read more ->
</div>
</div>
</div>
</div>
</div>
enter image description here
grid break space between 2 column.
<section>
<div class="container mt-2">
<div class="row justify-content-around">
<div class="col-md-8 bg-light justify-content-around">
<h1>Helo</h1>
</div>
<div class="col-md-4 bg-light">
<h1>Hello</h1>
</div>
</div>
</div>
Anyone help to break two grid column.
You need to use display inline-block for having the divs in a single row.
Try
.justify-content-around div {
display:inline-block
}
If you mean by " the space " the padding added to each div in your row.
Then you can remove it by adding the class no-gutters to the row div.
<div class="row justify-content-around no-gutters">
and the space between the two divs is now removed.
if that is not what you mean please provide a screenshot of your desired result.
<section>
<div class="container mt-2">
<div class="row justify-content-around">
<div class="col-md-6 bg-light">
<h1>Helo</h1>
</div>
<div class="col-md-6 bg-light">
<h1>Hello</h1>
</div>
</div>
</div>
I wrote the following code:
<div class="row d-flex h-100">
<div class="col-4 d-flex align-self-center justify-content-center text-center">
<img class="flex-item" src="https://image.com"/>
<br/>
<h2 class="flex-item mat-display-1">Ajax</h2>
</div>
</div>
I want to align the items within the column underneath each other instead of next to eachother, but I don't seem to be able to do it somehow. How can I achieve this behaviour?
Consider adding flex-column class to parent div
<div class="row d-flex flex-column h-100">
<div class="col-4 d-flex align-self-center justify-content-center text-center">
<img class="flex-item" src="https://image.com"/>
<br/>
<h2 class="flex-item mat-display-1">Ajax</h2>
</div>
</div>
I'm trying to simply center justify and align two bootstrap columns inside a container. The columns are in different rows.
The grid layout is
<body style="height: 100vh;">
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
the cards are just to outline the containers.
I'm aware there are MANY questions on vertical alignment, and I may have missed the one that contains the answer I need. But my take away from most of them is that the parent needs to have some height.
The following works just fine if you have only one row, because you can center the column in the 100% height row. But if you have two rows, it doesn't so well, since each column is centered in its own row, and the rows are each the height of the window.
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
I wish I could just move the justify-content-center align-items-center up to the container, but alas that doesn't seem to do anything.
So, please help me, how can I place these flush, one on top of the other, smack in the middle of the screen?
Here's a good way to do this using Bootstrap's build in flexboxes.
<div class="container d-flex h-100 flex-column">
<div class="flex-grow-1"></div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM A</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM B</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
<div class="card">ITEM C</div>
</div>
</div>
<div class="flex-grow-1"></div>
</div>
We have two buffer flex rows, with flex-grow-1. Each of these rows will expand (with the same weight) to fill the top and bottom portions equally. Each of the content rows in the middle will have the height of their content.
The end result is the ITEM cards centered both vertically and horizontally on the screen. Because they are within individual rows, you can adjust margins/padding as necessary (by default they cards end up next to each other vertically.
Example screenshot of the above code in bootstrap
You could potentially do this one with one row + column and an internal flexbox, but that gives you less control over how the individual cards appear in relation to each other.
EDIT: d-flex makes the container a flex container around it's child rows, and flex-column makes the children render and stretch vertically rather than horizontally.
Simplest solution is to make the rows 50% height instead...
<body style="height: 100vh;">
<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row h-100 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
</body>
Demo: https://www.codeply.com/go/7POJtgNaQI
Or, the flexbox method would be to use Bootstrap flex-grow-1 class. Also you don't need the height on the body. Just use min-vh-100 on the container...
<div class="container d-flex flex-column min-vh-100">
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-6">
<div class="card">
hello
</div>
</div>
</div>
<div class="row flex-grow-1 justify-content-center align-items-center">
<div class="col-4">
<div class="card">
world
</div>
</div>
</div>
</div>
https://www.codeply.com/go/n1eL2Jakuo
Always give the height through the inner element height, If I will give the height on container class element, it won't work, so let the container depend on the inner element's height, So try like this.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-3">
<div class="col-12" style="min-height: 180px;">
<div
class="row bg-success position-absolute w-100 h-100 d-flex flex-row justify-content-center align-items-center">
<div class="col-6 pr-2">
<div class="card text-center">
hello
</div>
</div>
<div class="col-6 pl-2">
<div class="card text-center">
world
</div>
</div>
</div>
</div>
</div>
Hope you will understand this tiny mess, and so it would help you.
What I try to achieve is to have a 2 divs that take over 6 columns bith with some space between them of 1px.
<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-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6 bg-danger text-light text-center"> Hello </div>
</div>
</div>
But for some reason when Ι try to achieveit, the other item goes underneath (wraps) instead being side to side. Do you know how I can make having 6-column with some space between items and still remain side to side?
The gutter (spacing between columns) is created with padding, not margins. When you adjust the margins it throws off the grid. You can use inner DIV's...
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-6 text-light text-center">
<div class="bg-dark mr-1">Hello</div>
</div>
<div class="col-6 text-light text-center">
<div class="bg-danger">Hello</div>
</div>
</div>
</div>
or, force the row no to wrap with flex-nowrap...
<div class="container-fluid">
<div class="row flex-nowrap">
<div class="col-6 bg-dark text-light text-center mr-1"> Hello </div>
<div class="col-6 bg-danger text-light text-center"> Hello </div>
</div>
</div>
or, simply use the padding utils to adjust the column spacing.
https://codeply.com/go/p4NpmmRxmb
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
</div>