This question already has answers here:
Bootstrap 4 Cards of same height in columns
(7 answers)
Closed 2 years ago.
I have two boxes next to each other, Box1 (left) has a little text and Box2 (right) has alot of text:
How can I make Box 1 extend to be the same height as Box 2 by padding more white space onto box 1? I'm trying to make it so both boxes are the same height; my code looks like this:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 box-shadow">
<!-- BOX1 -->
<div class="card-body">
box 1 data here
</div>
</div>
</div> <!-- /col -->
<div class="col-md-8">
<div class="card mb-4 box-shadow">
<!-- BOX2 -->
<div class="card-body">
box 2 data here
box 2 data here
box 2 data here
</div>
</div>
</div> <!-- /col -->
</div> <!-- /row -->
</div>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="card mb-4 box-shadow h-100">
<div class="card-body">
<p>box 1 data here </p>
</div>
</div>
</div>
<div class="col-6">
<div class="card mb-4 box-shadow h-100">
<div class="card-body">
<p>box 1 data here </p>
<p>box 2 data here </p>
<p>box 2 data here </p>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="display:flex">
<div class="card mb-4 box-shadow" style="width:100%">
<!-- BOX1 -->
<div class="card-body">
box 1 data here
</div>
</div>
</div>
<!-- /col -->
<div class="col-md-8">
<div class="card mb-4 box-shadow">
<!-- BOX2 -->
<div class="card-body">
<p>box 2 data here</p>
<p>box 2 data here </p>
<p>box 2 data here </p>
</div>
</div>
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
Related
I'm trying to create a template with bootstrap grid system like the image below from medium screen sizes but unable to do so. Below is my code:
HTML:
<div class="container-fluid" style="text-align:center">
<div class="row" style="text-align:center">
<div class="col-md-12" style="font-size:22px">All Blogs </div>
<br><br><br><br>
</div>
<br>
<br>
<div class="row col-md-12 py-3" *ngIf="allBlogs.length>0">
<!-- Card Start -->
<div class="card" *ngFor="let blog of allBlogs">
<div class="row">
<div class="col-md-3">
<a [routerLink]="['/blog', blog.id]"><img src="http://localhost:4000/{{blog.imagePath}}" class="card-img-top card-img-size" alt="blog1"></a>
</div>
<div class="col-md-5 px-3">
<div class="card-block px-6">
<h4 class="card-title">{{blog.title}}</h4>
<p class="card-text">{{blog.description}}</p>
<br>
Read More
</div>
</div>
</div>
</div>
<br>
<app-blog-category></app-blog-category>
</div>
</div>
Here's a template based on the image. I did an 8 and 4 grid size since bootstrap uses the 12 column system but feel free to alter these numbers as needed.
<div class="container-fluid">
<div class="row">
//this col contains your three card rows
<div class="col-md-8">
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
<div class="row">
<div class="col"> </div>
</div>
</div>
//this is for your shared component
<div class="col-md-4">
<shared-component></shared-component>
</div>
</div>
</div>
I have this layout made with bootstrap each witdth is 4 units
This is what im trying to achive
Basically I want last elements to stretch to fill.
If there were only four elements last one should be full width.
My attempt
I tried to add flex-fill and flex-grow-1 to each column but it doesn't seem to change anything.
Can I achive this effect whithout js?
Code
<div class="container">
<div class="d-flex justify-content-around row">
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col-md-4">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Assuming you want the default columns to have width 4, like col-md-4, I can suggest the following approach:
Do not specify column width in the HTML and justify the content evenly:
<div class="container">
<div class="d-flex justify-content-evenly row">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
Then set the minimum size of all columns:
.my-2 {
flex-basis: 33.3%;
min-width: 33.3%;
}
Use equal-width utility of bootstrap. Divide the area in 2 rows with same width (col-md-8 here) and then place as many divs of equal width.
Sample below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="d-flex justify-content-around row">
<!-- row-1 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">One</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Two</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Three</div>
</div>
</div>
</div>
</div>
<!-- row-2 -->
<div class="row col-md-8">
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Four</div>
</div>
</div>
</div>
<div class="my-2 col">
<div class="card">
<div class="card-body">
<div class="card-title">Five</div>
</div>
</div>
</div>
</div>
</div>
You can create using 'Equal-width', for more details go through the Bootstrap 4 Grid System.
https://getbootstrap.com/docs/4.0/layout/grid/#equal-width
Bootstrap comes up with a lot of different solutions to achieve multiple views. What you've been trying so far was almost correct. However, your last col ist currently just looking a bit wrong. You might exchange your last cols classes by the following.
<div class="my-2 col flex-grow">
This does simply 2 things.
Using col you're letting flexbox decide how much space to take
Adding flex-grow you're telling flexbox to use and fill up any left space
i'm trying to get text to be positioned to the right of a card header, this working example on fiddle strangely doesn't work in my project, i'm using bootstrap 4
https://jsfiddle.net/LL0qnnxm/61/
This is what i get on my app
The corresponding code:
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-sm-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
Thanks for your time.
It's likely that you have a style which makes card-header width only as large as its content, such as display: inline.
Try adding display: block; to card-header or double check that no other styles are overriding it being display: block.
.card-header {
display: block;
}
When you have float-sm-right, it will only float to the right if your screen is sm size (768px and up). Simply remove the -sm.
https://jsfiddle.net/g9nu8f7d/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<!--CARD HEADER-->
<h4 class="card-header">HEADER <small class="float-right">right aligned</small></h4>
<!--CARD BODY-->
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
I am stuck at a point where i dont know where to go....I am trying to create a grid system for my website but not getting the desired output.
Here is the output structure which i want to create using Bootstrap 4:
My Code :
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-4">
Some text here
</div>
<div class="col-sm-8">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
I will appreciate it if someone guide me the right direction.Have lack of knowledge about bootstrap grid system and column classes.
If you change both col-sm-4 to col-12 you will get two full width columns inside your row.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="img/home-banner-one.png" class="img-fluid" alt="Responsive image">
</div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-12">
Some text here
</div>
<div class="col-12">
<img src="img/home-banner-two.png" class="img-fluid" alt="Responsive image">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
Some Text Here
</div>
</div>
</div>
</section>
You can divide your section / container into two columns (left/right) and then the right column into rows (text/image)
Something like below (see demo)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script>
<section class="homepage-banner-section">
<div class="container">
<div class="row">
<!-- left column -->
<div class="col-xs-4">
<img src="https://placekitten.com/200/300" class="img-fluid" alt="Responsive image">
</div>
<!-- right column -->
<div class="col-xs-8">
<!-- first row -->
<div class="row">
<div class="col">
some text only on right column
</div>
</div>
<!-- second row -->
<div class="row">
<div class="col">
<img src="https://placekitten.com/300/100" class="img-fluid" alt="Resp. img">
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="row">
<div class="col-xs-12">
footer text that goes the width of the container
</div>
</div>
</div>
</section>
I have a problem that the order-[num] is not working because of the left and right side in different col's
Screenshot of view
<section class="row justify-content-center">
<div class="col-md-11">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-12 mb-3 order-0">
order small 1
</div>
<div class="col-12 mb-3 order-2">
order small 3
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="col-12 mb-3 order-1">
Ordering as small 2
</div>
<div class="col-lg-6 mb-3 order-3">
ordering as small 4
</div>
<div class="col-lg-6 mb-3 order-4">
ordering as small 5
</div>
</div>
</div>
</div>
</div>
</section>
if I placed all col's in one row it created a big white space of the height of place 2
I can only think of a solution which duplicates the section 3, puts its copy between 2 and the row of 4 and 5, and show/hide section 3 and its copy based on the break point.
HTML
<div class="container">
<div class="row">
<div class="col-md-5">
<section class="mb-3">
1
</section>
<section class="mb-3 d-none d-md-block">
3
</section>
</div>
<div class="col-md-7">
<section class="mb-3">
2
</section>
<section class="mb-3 d-md-none">
copy of 3
</section>
<div class="row">
<div class="col">
<section class="mb-3">
4
</section>
</div>
<div class="col">
<section class="mb-3">
5
</section>
</div>
</div>
</div>
</div>
</div>
Result
On large screens:
On small screens:
fiddle: http://jsfiddle.net/59x0s17k/1/