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>
Related
I want to achieve this:
The div's content should be in the center at every screen size. But when I resize the browser content of the div spans out of the whilst the parent div remains in the center.
I tried to limit the width to a particular size, but the content becomes joined together.
I also tried giving the parent div flex-wrap: wrap; but it does not break little by little, it just becomes block, I mean on to of each other.
This is my code:
<div class="optionsPar d-flex">
<div class="options mx-auto">
<div class="row" style="width: inherit;">
<div class="d-flex">
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
<div class="col-md-2 col-sm-3 d-flex align-items-center mt-4">
<strong>.com</strong><span>$11.25</span>
</div>
</div>
</div>
</div>
</div>
Please I need help, thanks in advance.
You Must use Box-sizing-border box to your main div of class optionPra
<style> .optionsPar{box-sizing: border-box; width: 100%;} </style>
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 col-xs-7 d-flex align-items-center justify-content-center p-0">
<h1>x.</h1>
<div class="col-lg-5">
<ol><p>x.</p></ol>
</div>
</div>
<div class="col-lg-7 col-xs-5 p-0">
<img src="https://i.pinimg.com/originals/96/18/6b/96186b308addc3c4700a26adb3aac278.gif" class="img-fluid " alt="Responsive image">
</div>
</div>
</div>
This picture shows my current view. I'd like both columns to reach the end of the viewport instead of cutting out like it is here.
You can use bootstrap utility classes to achieve this. i.e vh-100 and h-100
Set the container to 100vh and row to 100%.
Note: You'll have to adjust the image to fit the entire viewport.
<div class="container-fluid vh-100">
<div class="row h-100">
<div class="col-lg-5 col-xs-7 d-flex align-items-center justify-content-center p-0">
<h1>x.</h1>
<div class="col-lg-5">
<ol><p>x.</p></ol>
</div>
</div>
<div class="col-lg-7 col-xs-5 p-0">
<img src="https://i.pinimg.com/originals/96/18/6b/96186b308addc3c4700a26adb3aac278.gif" class="img-fluid " alt="Responsive image">
</div>
</div>
</div>
i m trying to center align three divs using bootstrap. i have a div with class container and it has three divs in it. i am trying to center align these three divs in the browser. i can get them to the center but they appear centered left. below is the code
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container d-flex h-100">
<div class="row align-items-center">
<div class="col col-4">
1 of 2
</div>
<div class="col col-4">
2 of 2
</div>
<div class="col col-4">
Extra
</div>
</div>
</div>
CHange your code to
<div class="container d-flex align-items-center h-100">
<div class="row">
<div class="col col-4">
1 of 2
</div>
<div class="col col-4">
2 of 2
</div>
<div class="col col-4">
Extra
</div>
</div>
Ok, so i have figured out what was the issue. And here is the code below. Both the container and the row div are to be set to h-100 and .d-flex class applied to the row div.
<div class="container h-100">
<div class="row align-items-center d-flex h-100">
<div class="col col-lg-3">
1 of 2
</div>
<div class="col col-lg-6">
2 of 2
</div>
<div class="col col-lg-3">
Extra
</div>
</div>
</div>
<div class="container h-100">
<div class="row align-items-center text-center">
<div class="col col-4 mx-auto">
1 of 2
</div>
<div class="col col-4 mx-auto">
2 of 2
</div>
<div class="col col-4 mx-auto">
Extra
</div>
</div>
</div>
I used the mx-auto class on your divs, I've also added the text-center class to center the text for effect.
See pen - https://codepen.io/buzztnt/pen/MWKVZpB
You can write code like this
<div class="container">
<div class="row text-center">
<div class="col-sm-4">1 of 2</div>
<div class="col-sm-4">2 of 2</div>
<div class="col-sm-4">Extra</div>
</div>
</div>
I have a page with 3 columns as follows :
<div class="row">
<div class="col-lg-3">
<div>**Section 1**</div>
<div>**Section 2**</div>
</div>
<div class="col-lg-6">**Section 3**</div>
<div class="col-lg-3">
<div>**Section 4**</div>
<div>**Section 5**</div>
</div>
</div>
I want to change the order of sections in mobile as this picture :
Here are 2 options...
Use flex direction responsively:
Use flexbox column on lg and larger. The row container must have a defined height. In this case I used h-100 (height: 100%;).
<div class="container vh-100">
<div class="row h-100 flex-lg-column flex-wrap">
<div class="col-lg-3 border flex-grow-1 overflow-auto order-3 order-lg-0">1</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto order-4 order-lg-0">2</div>
<div class="col-lg-6 border order-first order-lg-0 min-vh-100 overflow-auto">3</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto">4</div>
<div class="col-lg-3 border flex-grow-1 overflow-auto order-last order-lg-0">5</div>
</div>
</div>
https://www.codeply.com/go/WDjcxLu5bC
Hack with flexbox & floats:
This option uses floats on lg and larger, and the returns to flexbox on smaller screens which allows us to change the order of the cols when the layout stacks vertically. This layout is also limited to height:100%.
<div class="row d-lg-block vh-100">
<div class="col-lg-3 float-left d-flex flex-column h-100 p-0">
<div class="flex-grow-1 px-3 border">1</div>
<div class="flex-grow-1 px-3 border">2</div>
</div>
<div class="col-lg-6 float-left border order-first order-lg-0 h-100 overflow-auto">3</div>
<div class="col-lg-3 float-left border h-50">4</div>
<div class="col-lg-3 float-left border h-50">5</div>
</div>
https://www.codeply.com/go/eXY3HFr5A4
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.