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>
Related
I am following this BootStrap 5 Crash Course: https://www.youtube.com/watch?v=4sosXZsdy-s. This end-result website is: https://www.frontendbootcampdemo.com
In it, there's a part where Cards are used. The problem I am seeing is that if the text length differs, the cards do not align properly. Here is the HTML for that:
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
I have tried adding h-100 to the card-body. The problem is that, while all the cards keep the same height, the buttons are not aligned at the bottom.
How do I keep the cards at the same height and keep the buttons aligned at the bottom?
Thank you!
You can play around with flex CSS. Let me demo to you by using back your code.
add .h-100 to .card
add .d-md-flex and .flex-column to .card-body
add .flex-grow-1 to .card-text
Voila~ My method is just demonstratte one of the method to achieve what you want but still it is depends on what you want the layout to become in different screen sizing at the end.
You can refer this page for full capability of flexbox for Bootstrap 5.
Hope it helps.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<section class="p-5">
<div class="container">
<div class="row text-center g-4">
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-laptop"></i>
</div>
<h3 class="card-title mb-3">Virtual</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-secondary text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-person-square"></i>
</div>
<h3 class="card-title mb-3">Hybrid</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
Read More
</div>
</div>
</div>
<div class="col-md">
<div class="card bg-dark text-light h-100">
<div class="card-body text-center d-md-flex flex-column">
<div class="h1 mb-3">
<i class="bi bi-people"></i>
</div>
<h3 class="card-title mb-3">In Person</h3>
<p class="card-text flex-grow-1">
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iure, quas quidem possimus dolorum esse eligendi?
</p>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
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.
For bannerimage section which has texts on the specific position, I don't want to write custom CSS to place the div. The below code fits correctly according to design and it's good in responsive also. I've not used this code everywhere but only in 1 section where there is a condition to display div or text at a specific position. I don't want to write custom CSS. But using bootstrap empty div problem is solving, Is this correct or not.
<div class="mainbannerimagewithtext">
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 ">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class=" row-cols-1 row-cols-md-3 g-4 py-5 media ">
<div class="col px-5 ">
<p class="twentyfive ">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteen">Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet,
consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
<p class="adm-nf-twenty"></p>
<p class="adm-nf-twentyitalic"></p>
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class=" ">
<div class="text-start px-5 py-5">
</div>
</div>
</div>
<div class="container py-5">
<div class="bluebox ">
<div class="text-start px-5 py-5">
<p class="twenty">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="twentyitalic">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p class="fifteenwhite"> Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
My opinion is you should consider using offset for the best practice, also you can customize it for all available screen size Bootstrap provided.
Like this for example :
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">normal .col-md-4</div>
<div class="col-md-4 offset-md-4">.col-4 getting offset for 4 col in md screen size</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 getting offset for 3 col in md screen size</div>
<div class="col-md-3 offset-md-3">.col-md-3 getting offset for 3 col in md screen size</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 getting offset for 3 col in md screen size</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Also always remember offset always arrange the column to the right
Problem:
I am currently working on a website and tried my best using/learning bootstrap and wanted to implement e.g. 3 cards. But once I resized the window vertically all my elements shift upwards and it kind of destroys the look of the site, because they overlap into other elements. I think the problem might be my flex elements but I don't know how to make it work any other way.
Code:
Card elements
<section class="row container-fluid h-75 justify-content-evenly align-items-center">
<div class="col-md-3">
<div class="card text-white bg-dark p-4">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, natus?
</p>
Go somewhere
</div>
</div>
</div>
+2 identical cards
</section>
e.g. my footer
<footer class="container-fluid text-center py-5 text-white bg-dark">
<h1 class="pb-5">Partners:</h1>
<div class="d-lg-flex justify-content-evenly pb-5">
<img class="img-fluid w-25" src=".." alt="">
<img class="img-fluid w-25" src=".." alt="">
</div>
</footer>
Images:
Overlapping card
you can make it work by giving the margin-top on footer and to cards also,
try to run this code, if you need it like this:
<section class="row container-fluid h-75 justify-content-evenly mx-auto align-items-center">
<div class="mb-3 col-12 col-md-3">
<div class="card text-white bg-dark p-4">
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perspiciatis, natus?
</p>
Go somewhere
</div>
</div>
</div>
+2 more identical cards
</section>
footer with mt-5
<footer class="container-fluid text-center py-5 mt-5 text-white bg-dark">
<h1 class="pb-5">Partners:</h1>
<div class="d-lg-flex justify-content-evenly pb-5">
<img class="img-fluid w-25" src=".." alt="" />
<img class="img-fluid w-25" src=".." alt="" />
</div>
</footer>
Can't figure out how to align this item like on photo
Making a web design from my prototype, but stacked here, tried many variations, couldn't figure out, this is what I've got.
If you can help somehow, it is would great.[this is how it should look like1.
<div class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col">
<h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
<h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
</div>
<div class="row">
<div class="col">
<h1 class="text-left pqesbtitle">Garantizar </h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
<div class="col">
<h1 class="text-left pqesbtitle">Soporte</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
</div>
<div class="row">
<div class="col text-center">
<img class="pqeimg"src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
</div>
</div>
<div class="row">
<div class="col">
<h1 class="text-left pqesbtitle">Instalación</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
<div class="col">
<h1 class="text-left pqesbtitle">Innovaciones</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">
<p>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
I guess you are using Bootstrap.
Have a look, maybe this is what you are looking for :)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid bg-light">
<div class="container">
<div class="row">
<div class="col" style="text-align: center;">
<h1 class="text-center pqetitle">¿Por qué elegirnos?</h1>
<h3 class="text-center pqetxt">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Garantizar </h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Garantizar_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Soporte</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Soporte_Tecnico_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="big-box text-center">
<img class="pqeimg" src="./img/quienes_somos/pic_por_que_elegirnos.png" alt="">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Instalación</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Instalacion_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="col-xs-12">
<div class="mini-box">
<h1 class="text-left pqesbtitle">Innovaciones</h1>
<img class="text-right pqeicn" src="./img/quienes_somos/Innovations_icon.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>