Trying to make horizontal scrolling cards to be equal height.
Have a row of cards wrapped with a "flex-nowrap overflow-auto" div but i am unable.
css "flex-direction:row " or class "flex-row" doesn't help.
Checked multiple posts in Stackoverflow, but almost all are for non scroll able card rows and doesn't work for this.
( Snippet edited as per experts' inputs)
img {
border-radius: 50%;
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-top: 5px;
}
.forlabel {
margin-top: -14px;
}
.forlabeldiv {
border: solid;
border-width: 1px;
border-radius: 5px;
<!-- margin-left: 5px;
margin-right: 5px;
margin-bottom: 15px;
-->margin: 0, auto;
width: 100%;
text-align: center;
}
.forlabelspan {
color: #0275d8;
background: white;
font-size: 14px;
font-weight: 800;
}
.btn {
width: 30%;
text-align: center margin-bottom:5px
}
.card-block {
min-height: 25vh;
min-width: 25vw;
margin-bottom: 15px;
}
.profile,
.card {
background: #ced7df!important;
text-align: center;
}
.master {
text-align: center;
margin: 0, auto;
}
.card { height:100%;}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Single Row Horizontal Scrolling Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!----------------------xxxxxxx---------------------------->
<h2>Horizontal Scrolling Cards equal height</h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
</div>
<!--*** end of row flex *** -->
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"></script>
Try this
add mb-3 to every col-12
add h-100 to card
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
that should solve the problem
To keep the button at same line across cards
you need to add d-flex flex-col these classes to the card element
and also add mt-auto to the anchor button
please refer the code snipped
Code snippet
img {
border-radius: 50%;
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-top: 5px;
}
.forlabel {
margin-top: -14px;
}
.forlabeldiv {
border: solid;
border-width: 1px;
border-radius: 5px;
<!-- margin-left: 5px;
margin-right: 5px;
margin-bottom: 15px;
-->margin: 0, auto;
width: 100%;
text-align: center;
}
.forlabelspan {
color: #0275d8;
background: white;
font-size: 14px;
font-weight: 800;
}
.btn {
width: 30%;
text-align: center margin-bottom:5px
}
.card-block {
min-height: 25vh;
min-width: 25vw;
margin-bottom: 15px;
}
.profile,
.card {
background: #ced7df!important;
text-align: center;
}
.master {
text-align: center;
margin: 0, auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Single Row Horizontal Scrolling Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!----------------------xxxxxxx---------------------------->
<h2>Horizontal Scrolling Cards equal height</h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-col">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block h-100 d-flex flex-col" style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
</div>
<!--*** end of row flex *** -->
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"></script>
I have found the solution. I have added the following CSS to the card class.
.card {
height: 100%;
}
.card {
height: 100%;
}
img {
border-radius: 50%;
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-top: 5px;
}
.forlabel {
margin-top: -14px;
}
.forlabeldiv {
border: solid;
border-width: 1px;
border-radius: 5px;
<!-- margin-left: 5px;
margin-right: 5px;
margin-bottom: 15px;
-->margin: 0, auto;
width: 100%;
text-align: center;
}
.forlabelspan {
color: #0275d8;
background: white;
font-size: 14px;
font-weight: 800;
}
.btn {
width: 30%;
text-align: center margin-bottom:5px
}
.card-block {
min-height: 25vh;
min-width: 25vw;
margin-bottom: 15px;
}
.profile,
.card {
background: #ced7df!important;
text-align: center;
}
.master {
text-align: center;
margin: 0, auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Single Row Horizontal Scrolling Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!----------------------xxxxxxx---------------------------->
<h2>Horizontal Scrolling Cards equal height</h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto">
<div class="col-12 col-lg-3">
<div class="card card-block profile">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3">
<div class="card card-block " style="text-align: center">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
</div>
<!--*** end of row flex *** -->
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"></script>
Related
I am using Bootstrap and I have an image, and I want to have the card on the right of the image, but it is at the bottom.
I tried using display: inline-block, but that did not work. I looked at the other answers on the site and they did not work for me either, so please don't recommend those.
<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">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
To have a card next to the image using Bootstrap, you can use the grid system. In the code below, the col-md-4 class is used to specify that the image will take up four columns out of a possible twelve, and the col-md-8 class is used to specify that the card will take up the remaining eight columns. If you find that the card is appearing below the image, it may be because the image is too wide for the column. To fix this, you can add the img-fluid class to the image to ensure that it is responsive and will fit within the column.
<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">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" class="img-fluid" alt="Group Picture">
</div>
<div class="col-md-8">
<div class="card">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
</div>
</div>
</div>
<h1 style="text-align: center; font-size: 70px;">Crabapple Lake Parc</h1>
<div class="row">
<div class="col-md-6">
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 100%;">
</div>
<div class="col-md-6">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
</div>
</div>
In your parent element you can use these styles
display: flex;
justify-content: space-between;
Or in Bootstrap: d-flex and justify-content-between classes:
<div class="d-flex justify-content-between">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
</div>
WITH TITLE IN THE TOP:
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<div class="d-flex justify-content-between">
<img src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture" style="display: block; margin-left: auto; margin-right: auto; width: 50%;">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
</div>
You could* use .d-inline-block if it is appropriate for your layout. You need to use it on both the img and the .card.
*I'm not necessarily recommending this, but it does what you ask.
<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">
<h1 style="text-align: center; font-size: 70px; ">Crabapple Lake Parc</h1>
<img class="d-inline-block w-50" src="https://th.bing.com/th/id/R.bb60507b5a1f567e6b6592f375bf5e8d?rik=FgkA6Taf%2fHwJsA&pid=ImgRaw&r=0" alt="Group Picture">
<div class="card d-inline-block" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Have Questions?</h5>
FAQ
Contact Us
</div>
</div>
Having an issue with Bootstrap 4 flexbox in creating horizontally scrollable cards on Desktop Screens ( works okay on mobile responsive mode):
Issue # 1: Unless there are a minimum of 8 cards, the cards are not filling the horizontal flexbox 'visible' window properly
Case A: 3 cards, the flexbox window is totally skewed and the 'badge' from below bills in there.
Case B: 7 cards, flexbox is almost filled, but there is a gap on left side. Case C: 8 cards, all perfect , visible & scrolling perfectly.
Issue 2: if the content in the card pushes the Button, how can I fill it with space, so that the buttons are in line?
#CBroe you gave the cue, i added .row { width:100%; max-width:100vw; }
and now it is working as expected , updating the
body {
padding: 5px;
}
img {
border-radius: 50%;
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-top: 5px;
}
.forlabel {
margin-top: -14px;
}
.forlabeldiv {
border: solid;
border-width: 1px;
border-radius: 5px;
<!-- margin-left: 5px;
margin-right: 5px;
margin-bottom: 15px;
-->margin: 0, auto;
width: 100%;
text-align: center;
}
.forlabelspan {
color: #0275d8;
background: white;
font-size: 14px;
font-weight: 800;
}
.btn {
width: 30%;
text-align: center margin-bottom:5px
}
.card-block {
min-height: 20vh;
min-width: 25vw;
margin-bottom: 15px;
}
.profile,
.card {
background: #ced7df!important;
text-align: center;
}
.master {
text-align: center;
margin: 0, auto;
font-size: 0.75em;
}
.card {
height: 100%;
}
.row {
width: 100%;
max-width: 100vw;
}
.badge {
width: 10rem;
flex: 1 0 auto;
font-size: 1em;
font-weight: 300;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Single Row Horizontal Scrolling Cards</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!----------------------xxxxxxx---------------------------->
<h2>Case A: Horizontal Scrolling Cards with 3 cards</h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto ">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> 1 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>2 <br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>3 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
</div>
<!--*** end of row flex *** -->
<div class="badge badge-secondary text-wrap text-center">
<i class="fa-solid fa-arrow-left"></i> Swipe for More <i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
<!----------------------xxxxxxx---------------------------->
<h2>Case B: Horizontal Scrolling Cards with 7 cards </h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> 1 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>2 <br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>3 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>4 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>5 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>6 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>7 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
</div>
<!--*** end of row flex *** -->
<div class="badge badge-secondary text-wrap text-center">
<i class="fa-solid fa-arrow-left"></i> Swipe for More <i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
<!----------------------xxxxxxx---------------------------->
<h2> Case C: Horizontal Scrolling Cards with 8 cards</h2>
<div class="container-fluid p-3 m-3 master">
<div class="container forlabeldiv row max-auto">
<label for="input1" class="col-sm-12 forlabel">
<span class=" forlabelspan">Expert Panel</span>
</label>
<div class="row flex-nowrap overflow-auto">
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/100/09f/fff.png" width="100" height="100"> First Name Last Name<br> 1 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>2 <br> Title of Person<br> Credentials of Person<br> First Name Last Name<br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>3 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>4 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>5 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>6 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>7 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
<div class="col-12 col-lg-3 mb-3">
<div class="card card-block profile h-100 d-flex flex-auto">
<img class="mx-auto" src="https://via.placeholder.com/150" width="100" height="100"> First Name Last Name<br>8 <br> Title of Person<br> Credentials of Person<br>
BOOK
</div>
</div>
</div>
<!--*** end of row flex *** -->
<div class="badge badge-secondary text-wrap text-center">
<i class="fa-solid fa-arrow-left"></i> Swipe for More <i class="fa-solid fa-arrow-right"></i>
</div>
</div>
<!--*** end of label div *** -->
</div>
<!--*** end of container-flex -->
<!----------------------xxxxxxx---------------------------->
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"></script>
Using cues from experts here, resolved the issues:
Added .row { width:100%; max-width:100vw; } to ensure even with 3 cards the width of the flex-box doesn't shrink.
Added d-flex flex-auto to card & mt-auto to ensure buttons appear in same line
Thank you
How can I draw the line showing in the picture below?
my current page looks like this:
I want to add that line at the top with the same title
(just to mention I'm using bootstrap 5)
<div class="container-fluid fixed-bottom" style="margin-bottom: 16px;">
<div class="row align-items-center" style="margin-left: 196px; margin-right: 196px;">
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/business.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">Business</p>
</div>
</div>
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/calculator.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">Calculator</p>
</div>
</div>
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/oogPermits.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">OOG Permits</p>
</div>
</div>
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/services.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">Services</p>
</div>
</div>
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/career.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">Career</p>
</div>
</div>
</div>
</div>
You can use flexbox. Then, you have to play with the borders. Here is an example
<html>
<header>
<meta charset="utf-8" />
<title>Example App</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</header>
<body>
<div class="content d-flex justify-content-center">
<div class="left-border align-self-center"></div>
<div class="text">FAST NAVIGATOR</div>
<div class="right-border align-self-center"></div>
</div>
<div class="text-center">Your content here</div>
</body>
</html>
<style>
.content {
padding: 1rem;
}
.left-border {
border: 2px solid black;
width: 100%;
height: 10px;
border-bottom: none;
border-right: none;
background: transparent;
}
.text {
font-size: 12px;
white-space: nowrap;
padding-left: 16px;
padding-right: 16px;
margin-top:-8px;
}
.right-border {
border: 2px solid black;
width: 100%;
height: 10px;
border-bottom: none;
border-left: none;
background: transparent;
}
</style>
fieldset {
padding: 0;
height: 8px;
border-bottom: none;
}
<fieldset>
<legend align="center">Title</legend>
</fieldset>
I was wondering how can I place a text below another text when they're in the same row but in different columns?
This is image shows my current situation and goals. I applied a border attribute to see how the row and columns were distributed.
This is my HTML code:
<!-- Bootstrap-4 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="row mt-3">
<div class="col-7 border d-flex justify-content-start">
<p class="mb-3 b d-block text-right" style="color: #00A0DE; font-size: 50px;">Choose it</p>
<br> <br>
<p class="d-block b border" style="padding-top:40px; color: #323e48;">Select your favorite <br>product</p>
<img src="../../../assets/images/Generals/Number1.PNG" alt="" style="align-self: center;" width="100" height="100" style="margin-left:500px;">
</div>
<div class="col-5">
<div class="semirounded-square-2">
<div>
<img src="../../../assets/images/Generals/Character_1.png" alt="" width="250" style="padding-bottom: 100px;">
</div>
</div>
</div>
</div>
Any ideas how can I distribute my HTML elements in a way that it resembles the desired result?
If you want this behavior for mobile screens you can change the display property for col-7's flex property on responsive view
#media screen and (max-width: 767px) {
.col-7.d-flex {
display: block!important;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="row mt-3">
<div class="col-7 border d-flex justify-content-start">
<p class="mb-3 b d-block text-right" style="color: #00A0DE; font-size: 50px;">Choose it</p>
<br> <br>
<p class="d-block b border" style="padding-top:40px; color: #323e48;">Select your favorite <br>product</p>
</div>
<div class="col-5 d-flex">
<img src="../../../assets/images/Generals/Number1.PNG" alt=""
style="align-self: center;" width="100" height="100" style="margin-left:500px;">
<div class="semirounded-square-2">
<div>
<img src="https://picsum.photos/id/237/200/300"
alt="" width="250" style="padding-bottom: 100px;">
</div>
</div>
</div>
</div>
Make sure to wrap both images in a same div
Else
If you want the same behavior desktop view you can try this
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">
<div class="row mt-3">
<div class="col-5 border d-flex justify-content-start">
<p class=" text-right" style="color: #00A0DE; font-size: 50px;">Choose it <span class='d-block' style="color:black; font-size:20px;">Select your favorite </span> <span class='d-block text-center' style="color:black; font-size:20px;">product</span></p>
<img src="../../../assets/images/Generals/Number1.PNG" alt=""
style="align-self: center;" width="100" height="100" style="margin-left:500px;">
</div>
<div class="col-4">
<div class="semirounded-square-2">
<div>
<img src="../../../assets/images/Generals/Character_1.png"
alt="" width="250" style="padding-bottom: 100px;">
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-5 border d-flex justify-content-start">
<p class=" text-right" style="color: #00A0DE; font-size: 50px;">Choose it <span class='d-block' style="color:black; font-size:20px;">Select your favorite </span> <span class='d-block text-center' style="color:black; font-size:20px;">product</span></p>
<img src="../../../assets/images/Generals/Number1.PNG" alt=""
style="align-self: center;" width="100" height="100" style="margin-left:500px;">
</div>
<div class="col-4">
<div class="semirounded-square-2">
<div>
<img src="../../../assets/images/Generals/Character_1.png"
alt="" width="250" style="padding-bottom: 100px;">
</div>
</div>
</div>
</div>
Im trying to display cards in two columns but the cards are not aligning correctly, the top of the card on the right is displaying at the bottom of the column. id like for the cards to be aligned horizontally by the top of each card
img {
width: 269px;
height: 402px;
}
.card-block{
margin: 20px;
}
.btn-dark{
width: 120px;
border-radius: 3px;
}
<div class="container" style="column-count: 2; margin-top: 100px;">
<div class="row">
<div class="col-sm-14 mx-auto">
<div *ngFor="let book of webService.book_list | async">
<div class="card bg-light mb-5 mr-5" [routerLink]="['/books', book._id]" style="cursor: pointer">
<div class="card-header">
<strong>{{book.title}}</strong> by <strong>{{book.author}}</strong>
</div>
<div class="row no-gutters">
<div class="col-auto">
<img [src]="book.imageLink" />
</div>
<div class="col">
<div class="card-block">
<strong>Country of Origin:</strong> {{book.country}} <br />
<strong>Year Released:</strong> {{book.year}} <br />
<strong>Language: </strong> {{book?.language}} <br />
<strong>Pages: </strong> {{book?.pages}}
</div>
</div>
</div>
<div class="card-footer">
<strong>{{book.review_count}}</strong>
review(s) available <br>
</div>
</div>
</div>
</div>
</div>
</div>