I need to have one column placed under the other when viewed on a cell phone.
I am using bootstrap 4 and the divs are flex, I use flex columns and flex rows, already using the property property order and it did not work.
My code
<div id="menu-text" class="d-flex flex-row">
<div class="d-flex flex-column col-sm justify-content-center">
<div class="d-flex flex-row menu-subtitle">Sashomi </div>
<div class="d-flex flex-row menu-small-text">[CORTE DE MARISCOS O CARNE CRUDOS]</div>
<div class="d-flex flex-row menu-mini-text">[FRESH BEEF OR NATURAL SEAFOOD]</div>
<img src="images/BrochazoBlanco.png" class="white-brush">
<div class="d-flex flex-row">
<div class="d-flex flex-column col-md-3">
<div class="d-flex flex-row">$ 72</div>
</div>
<div class="d-flex flex-column col-md-3">
<div class="d-flex flex-row">$ 50</div>
</div>
<div class="d-flex flex-column col-md-6">
<div class="d-flex flex-row">Sushi california</div>
</div>
</div>
</div>
<div class="d-flex flex-column col-sm justify-content-center">
<div class="d-flex flex-row menu-subtitle">Sashimi</div>
<div class="d-flex flex-row menu-small-text">[CORTE DE MARISCOS O CARNE CRUDOS]</div>
<div class="d-flex flex-row menu-mini-text">[FRESH BEEF OR NATURAL SEAFOOD]</div>
<img src="images/BrochazoBlanco.png" class="white-brush">
<div class="d-flex flex-row">
<div class="d-flex flex-column col-md-3">
<div class="d-flex flex-row">$ 72</div>
</div>
<div class="d-flex flex-column col-md-3">
<div class="d-flex flex-row">$ 50</div>
</div>
<div class="d-flex flex-column col-md-6">
<div class="d-flex flex-row">Sushi california</div>
</div>
</div>
</div>
</div>
Check this example for a simplified, responsive version of the code that you provided.
I don't know how many columns you need, as you didn't give any code, but here is a three column grid that is responsive.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-secondary">
One of three columns
</div>
<div class="col-sm bg-danger">
One of three columns
</div>
<div class="col-sm bg-success">
One of three columns
</div>
</div>
</div>
You can see the same thing here, and resize the output to see how it works.
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'm really confused by the columns system in Bootstrap. Here is what I have:
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Cards</h1>
</div>
<div class="row">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-2 col-md-2 mb-2">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Stop</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">8</div>
</div>
<div class="col-auto">
<span class="material-icons">
pan_tool
</span>
</div>
</div>
</div>
</div>
</div>
I have 8 cards total and 2 of them fall in the second line, because of spacing. How can I achieve a professional view with my cards? I need to show 12 different status of machines we have, start, stop, and run.
Here is the link of jsFiddle:
https://jsfiddle.net/rbk27ote/1/
You just need put class 'col' for all your div element those you want to make equal.just like as below:-
<div class="col"></div>
I have applied the solution from this question: Bootstrap 4 vertical center - equal height cards
But, my issue is not getting solved. I can't achieve the equal height & vertically centered together though I have applied these:
<div class="cycle-des h-100 justify-content-center">Product Cycle</div>
Here is the screenshot of my issue:
Here is my Demo
Here you go,
<div class="container">
<div class="row">
<div class="col-md-4 mb-3 pr-md-0">
<div class="cycle-des h-100 align-items-center justify-content-center">Product Cycle</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">01</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">handloom: 4-7days</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">02</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">S/S MQ: 50M</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">03</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">S/S: 25-30days</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">04</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">Order MQ: 2000M</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 pr-md-0">
<div class="row no-gutters h-100">
<div class="col-4 col-lg-3">
<div class="cycle-num h-100 align-items-center justify-content-center">05</div>
</div>
<div class="col-8 col-lg-9">
<div class="cycle-des h-100 align-items-center justify-content-center">Order delivery date: 35-50 days</div>
</div>
</div>
</div>
</div>
</div>
.cycle-num, .cycle-des {
color: #fff;
text-align: center;
padding: 20px 10px;
display: flex;
}
.cycle-num {
background-color: #666;
}
.cycle-des {
background-color: #333;
}
But I believe you can reduce the div's and can do it much better. Just a suggestion, you don't have to use grid classes everywhere. Just use it for the layout.
https://jsfiddle.net/mdsebans/yhcb30L5/5/
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