I have a row with cards and images. I can see that the columns are not the same size (see picture). Do I need to set width and height for the images that the three are uniform in size?
I would appreciate your help!
see here
Here is my code:
<div class="row justify-content-md-center">
<div class="col-md-6 col-lg-4">
<div class="os-animation" data-animation="fadeInLeft">
<img class="card-img-top" src="/images/Bild_18.JPG" alt="Card image cap">
<div class="pricing-column text-center">
<h3>Lorem</h3>
<p class="ptext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<div class="pricing-features text-sm-left">
<h4><span class="item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
</h4>
</div>
<a class="btn btn-secondary btn-sm" href="/agostar" id="btn_1">mehr Erfahren</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="os-animation" data-animation="fadeInUp">
<img class="card-img-top" src="/images/Bild_10.JPG" alt="Card image cap">
<div class="pricing-column text-center">
<h3>Lorem</h3>
<p class="ptext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<div class="pricing-features text-sm-left">
<h4><span class="item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
</h4>
</div>
<a class="btn btn-secondary btn-sm" href="/agotable" id="btn_1">mehr Erfahren</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="os-animation" data-animation="fadeInRight">
<img class="card-img-top" src="/images/Bild_120.jpg" alt="Card image cap">
<div class="pricing-column text-center">
<h3>Lorem</h3>
<p class="ptext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor</p>
<div class="pricing-features text-sm-left">
<h4><span class="item">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
</h4>
</div>
<a class="btn btn-secondary btn-sm" href="/custom" id="btn_1">mehr Erfahren</a>
</div>
</div>
</div>
Hello you have 3 ways to achieve such design:
Add class <div class="card h-100">, that will give you 100% height.
Use Bootstrap equal-height columns Check this link
You can achieve it by using a template such as follows
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Card</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/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.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card-group">
<div class="card">
<img class="card-img-top" src="https://www.w3schools.com/w3images/fjords.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://www.w3schools.com/w3images/fjords.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://www.w3schools.com/w3images/fjords.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">It's a broader card with text below as a natural lead-in to extra content. This content is a little longer.This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</body>
</html>
If you want your images to all be the same size, you can set them as the background-image property on a div. Since padding-bottom is based on the width of the element, you can use it to create a fixed aspect ratio that all of your images will respect, as demonstrated in the .standardizedImage divs.
Using background-size: cover will crop to fit as seen below, if you want to display the entire image, though possibly at the cost of blank space to the top or sides, use background-size: contain
.card {
display: inline-block;
border: 1px solid black;
margin: 10px;
width: 100px;
}
p {
padding: 10px;
}
img {
width: 100%;
}
.standardizedImage {
padding-bottom: 40%;
background-size: cover;
background-position: center center;
width: 100%;
}
<h3>As images</h3>
<div class="card">
<img src="https://www.fillmurray.com/300/100" />
<p>Content goes here.</p>
</div>
<div class="card">
<img src="https://www.fillmurray.com/300/100" />
<p>Content goes here.</p>
</div><div class="card">
<img src="https://www.fillmurray.com/300/120" />
<p>Content goes here.</p>
</div>
<h3>As background images</h3>
<div class="card">
<div class="standardizedImage" style="background-image: url(https://www.fillmurray.com/300/100);"></div>
<p>Content goes here.</p>
</div>
<div class="card">
<div class="standardizedImage" style="background-image: url(https://www.fillmurray.com/300/100);"></div>
<p>Content goes here.</p>
</div>
<div class="card">
<div class="standardizedImage" style="background-image: url(https://www.fillmurray.com/300/120);"></div>
<p>Content goes here.</p>
</div>
Related
I need help putting a button in the bottom-right corner of a Bootstrap col.
I want to put the button where the black outline is in the image below.
<div class="container-fluid m-0">
<div class="d-flex bg-secondary m-0 rounded">
<div class="container">
<div class="row">
<div class="col-sm bg-info">
<div>
</div>
</div>
<div class="col-sm">
<h3> Username</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
<p>xxx Followers . xxx Following</p>
</div>
<div class="col-sm bg-danger">
<p class="ml-auto">
<button type="button" class="btn btn-primary">Cancel</button>
</p>
</div>
</div>
</div>
</div>
Check this out--
<div class="container-fluid m-0">
<div class="d-flex bg-secondary m-0 rounded">
<div class="container">
<div class="row">
<div class="col-sm bg-info">
<div>
</div>
</div>
<div class="col-sm">
<h3> Username</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
<p>xxx Followers . xxx Following</p>
</div>
<div class="col-sm bg-danger">
<p style="height: 100%" class="d-flex justify-content-end align-items-end">
<button type="button" class="btn btn-primary">Cancel</button>
</p>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="bg-secondary rounded">
<div class="container bg-secondary">
<div class="row align-items-stretch">
<div class="col-12 col-sm bg-info"></div>
<div class="col-12 col-sm">
<div class="py-3">
<h3> Username</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
<p>xxx Followers . xxx Following</p>
</div>
</div>
<div class="col-12 col-sm bg-danger">
<div class="h-100 d-flex align-items-end justify-content-end py-3">
<button type="button" class="btn btn-primary">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
There are two methods to implement this...
The first method:
<div class="container-fluid">
<div class="bg-secondary rounded">
<div class="container bg-secondary">
<div class="row align-items-stretch">
<div class="col-12 col-sm bg-info"></div>
<div class="col-12 col-sm">
<div class="py-3">
<h3> Username</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
<p>xxx Followers . xxx Following</p>
</div>
</div>
<div class="col-12 col-sm bg-danger">
<div class="h-100 d-flex align-items-end justify-content-end py-3">
<button type="button" class="btn btn-primary">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
This is the easiest one.
The second method:
Go to index.css or App.css or you can go to any other CSS file if you have imported it into your file.
Write this piece of code:
.col-sm {
height: 100%; !important
display: flex; !important
justify-content: flex-end; !important
align-items: flex-end; !important
}
You can also give a class and then write the CSS code based on the class.
So - yes, it's some sort of vertical align thing again (sorry!). I read the documentation and other questions regarding this topic, did my first projects and tried out different approaches, but somehow I can't figure out how to do this the "right way" with bootrap.
I want the elements inside of the columns to align on the same horizontal line (starting from the top) with the respective element from the other column. So, the h3 elements are all on the same horizontal line , the buttons are all on the same line etc.
I made 3 columns
<div class="container">
<div class="row justify-content-around>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> looooong text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
<div class="col-md-4 d-flex flex-column align-items-center">
<h3> A Title </h3>
<hr>
<p> Short text </p> <br>
<img src="an icon" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
I could use "justify-content-between" on each column. But then, if one of the "p" content is longer than the one of another column, it won't work as intended - the shorter text would not start on the same horizontal line as the other texts, as my example below will demonstrate. Fixing it with manual margins would mess it up, should the text be changed later on by a client.
Justify-Content-Between: This is what I don't want
What would be a good way to achieve this kind of alignment?
You can divide your content and your icon/button into separate rows within each column, and then align the div with the icon/button to the bottom of the column.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-around">
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
<div class="col-md-4 d-flex flex-column mb-5">
<div class="row">
<div class="col">
<h3> A Title </h3>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="row align-self-center h-100">
<div class="col d-flex">
<div class="align-self-end">
<img src="an icon" class="d-block my-1 mx-auto" width="55" height="55">
<button> A button </button>
</div>
</div>
</div>
</div>
</div>
</div>
I used align-self-end to position the row with the icon and button at the bottom, but IE11 doesn’t support flex start and end, so the layout doesn’t look as nice on IE11.
One other note – your sample code is missing the closing quote for the classes in the line: <div class="row justify-content-around>
Here is the HTML code. I am good with coding in react.js and vue.js, but I am having a hard time getting the sense of making things responsive. I dont have experience with it. But got to start somewhere. Any suggestions would be helpful.
Right now, if you make the screen size smaller. It looks horrible.
Html/bootstrap
<section id="info" class="py-3 ">
<div class="container text-white">
<div class="row justify-content-center">
<h2 class="text-white title">Lorem ipsum dolor sit</h1>
<p class="text-white cyp-para">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
<div class="row">
<div class="col-6 align-self-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp"> Lorem ipsum dolor</h1>
</div>
<div class="col-6 justify-content-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp">Lorem ipsum dolor</h1>
</div>
</div>
</div>
</section>
CSS:
#info{
height: 515px;
width: 732px;
background: #151515 0% 0% no-repeat padding-box;
}
.cyp-para{
padding: 0px 200px;
font-size: 14px;
}
.placeholder{
width: 236px;
height: 283px;
background: grey;
}
.title{
font-size: 38px;
}
.exp{
font-size: 33px;
}
Since you are using bootstrap, you can use break-point classes to make your code responsive.
Make small changes like below and your code will look better:
<section id="info" class="py-3 ">
<div class="container text-white">
<div class="row justify-content-center">
<h2 class="text-white title">Lorem ipsum dolor sit</h1>
<p class="text-white cyp-para">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
<div class="row">
<div class="col-12 col-md-6 align-self-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp"> Lorem ipsum dolor</h1>
</div>
<div class="col-12 col-md-6 justify-content-center">
<div class="placeholder mx-auto"></div>
<h1 class="text-center exp">Lorem ipsum dolor</h1>
</div>
</div>
</div>
</section>
I have included col-12 and col-md-6 classed in your code. Which means till medium size devices, you have 12 column divs i-e 1 full column width div, and when your screen size becomes medium and above medium you'll have two column's per row
I have the problem about css for make a same height. I have a the list designs and every design have description in the bottom, in my case, I already to make design middle of portrait and landscape,
but if the description have the long text can't same line with other. I want to the description
flat top only using css not javascript, like a image bellow
enter image description here
I using the bootstrap flex
HTML
<div class="row">
<div class="col-12 col-md-8 p-4 d-flex flex-column">
<div class="my-auto">
<img/>
</div>
<div class="description my-3">
</div>
</div>
<div class="col-12 col-md-8 p-4 d-flex flex-column">
<div class="my-auto">
<img/>
</div>
<div class="description my-3">
</div>
</div>
</div>
CSS
.flex-column {
-webkit-box-orient: vertical!important;
-ms-flex-direction: column!important;
flex-direction: column!important;
}
.d-flex {
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
}
Please help me for fixing my problem, thank you for your help, sorry my english is bad
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Same height</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/400x200/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat repellendus, molestias animi deleniti cum</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/400x200/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 d-flex flex-column border">
<div class="my-auto">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
</div>
</div>
</body>
</html>
Check this working example. You just need to add the fixed height to class
my-auto + vertical-align: middle;, then all product description will stay in the same line. Don't forget to add max-height: 100% to image to avoid overflow.
Hope this helps.
.my-auto {
justify-content: center;
vertical-align: middle;
height: 300px;
display: flex;
align-items: center;
}
.my-auto img {
max-height: 100%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Same height</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4 p-4 border">
<div class="my-auto w-100">
<img src="https://via.placeholder.com/200x400/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
<div class="col-4 p-4 border">
<div class="my-auto w-100">
<img src="https://via.placeholder.com/400x200/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat repellendus, molestias animi deleniti cum</div>
</div>
<div class="col-4 p-4 border">
<div class="my-auto w-100">
<img src="https://via.placeholder.com/200x300/0000FF/808080" class="w-100" alt="">
</div>
<div class="my-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
</div>
</div>
</div>
</body>
</html>
I had to make div table, because I didn't see a way to do it with a bootstrap table element.
Here is image:
Here is the code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row border-top bg-primary pt-3 pb-0 mt-5">
<div class="col-12">
<p class="text-white"><b>Lorem ipsum</b></p>
</div>
</div>
<div class="row border-left border-right text-center">
<div class="col-8 pt-3 pb-0 border-right">
<p>Lorem ipsum</p>
</div>
<div class="col-4 pt-3 pb-0">
<p>Lorem ipsum</p>
</div>
</div>
<div class="row border text-center">
<div class="col-10">
<div class="row">
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<div class="col pt-3 pb-0 border-right">
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
</div>
<div class="row border-top">
<div class="col bg-primary-dark pt-3 pb-0" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
</div>
<div class="row border-top">
<div class="col border-right" style="width: 20%; flex-basis: unset;"></div>
<div class="col bg-info-dark pt-3 pb-0 border-right" style="width: 80%; flex-basis: unset;">
<p class="text-white"><b>Lorem ipsum</b></p>
<p class="text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
</p>
</div>
</div>
</div>
<div class="col-2 pt-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</p>
</div>
</div>
Now I want this to be responsive. Horizontal scroll, or any other way, any suggestions would be greatly appreciated
The class col in bootstrap will divide the row into amount of col elements you added.To make it responsive specify width of element for each screen type, using such classes as col-sm-12 (full width on small devices), col-md-6 (two column grid for medium screens) etc. Don't forget, bootstrap is mobile first.