Known Participant

Question

Aligning Bootstrap Cards Vertically

Forum|Forum|4 years ago
May 24, 2021
5 replies
15071 views

Hi all,

I have two questions. 1. How do I align my bootstrap cards vertically when they are in a row of columns? The cards are lined up side by side, but some of the cards have longer text than the others, which is causing some weird spacing vertically. 2. I have changed all of my text to Century Gothic, however, when I access my site via mobile phone it uses an alternate font. I'd love any tips or support, thanks in advance! My site can be accessed at 'gatewaygreenbuilding.com' and the page with the cards is located under the green roof icon (click the icon to get to the page). I've also included a screenshot to show what I am talking about.

This topic has been closed for replies.

BenPleysier

Community Expert

Hi all,

I have changed all of my text to Century Gothic, however, when I access my site via mobile phone it uses an alternate font.

By @defaultvbg7e1p6wn4g

If a person's device does not have Century Gothic font installed, then an alternative font will be used. For more, have a look at https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts#font_families_recap

As the article says, you can specify font files that are downloaded with the website that can be used. Some of these font files need to be purchased, others, like Google Fonts, are free of charge.

Have a look at https://fonts.google.com/?query=gothic for Gothic fonts, or search for more.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

Adobe Fonts (formerly called TypeKit) is included in your paid Creative Cloud subscription.

https://fonts.adobe.com/fonts/roboto

1. Simply choose your favorite fonts and variants.

2. Go to the My Fonts panel to activate your fonts and create a web project ID.

https://fonts.adobe.com/my_fonts#web_projects-section

3. Copy & paste the provided embed code into the <head> of your HTML document.

4. Add the font-family to your custom.css file.

Adobe Fonts has a dedicated support community if you need more help.

https://community.adobe.com/t5/adobe-fonts/bd-p/fonts?page=1&sort=latest_replies&filter=all

Nancy O'Shea— Product User, Community Expert & Moderator

BenPleysier

Community Expert

To give the cards the same height, add h-100 (height 100%) to the card element as in

<div class="card h-100 col-md-4 col-lg-12">

I notice that you have added extra CSS giving thr row a display value of flex\

.row {
display: flex;
align-items: stretch;
justify-content: center;
flex-direction: row;
padding-top: 10px;
}

This is not neccesary because the Bootstrap row element is already a flex container. Another thing to remember is that content may only be placed inside cols. The correct markup for your page would look like

<main>
    <div class="container mt-5">
        <div class="row">
            <div class="col">
                <h1>Fancy display heading</h1>
            </div>
        </div>
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5">
            <div class="col">
                <div class="card h-100">
                    <img src="http://gatewaygreenbuilding.com/images/Green%20Roof%20North.jpg" class="card-img-top" alt="Card image cap">
                    <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="http://gatewaygreenbuilding.com/images/Green%20Roof%20North.jpg" class="card-img-top" alt="Card image cap">
                    <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="http://gatewaygreenbuilding.com/images/Green%20Roof%20North.jpg" class="card-img-top" alt="Card image cap">
                    <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="http://gatewaygreenbuilding.com/images/Green%20Roof%20North.jpg" class="card-img-top" alt="Card image cap">
                    <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card h-100">
                    <img src="http://gatewaygreenbuilding.com/images/Green%20Roof%20North.jpg" class="card-img-top" alt="Card image cap">
                    <div class="card-body">
                        <h4 class="card-title">Card title</h4>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Notice the use of row-cols to organise the layout for different devices,

EDIT: Ooops! Just noticed that when I used the name of your images, the image names contain spaces. This is a no-no. In your case you could name them like Green_Roof_South_01.jpg or GreenRoofSouth_01.jpg

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_

Brainiac

Seriously, yet more added overhead, columns which shouldnt be necessary, is it any wonder why l condem Bootstrap, its like div soup all over again and if l remember correctly, pre Bootstrap days, you would have heavily frowned upon that, whats changed?

O

osgood_

Brainiac

What version of Bootstrap are you using? Version 4 should align the cards to equal heights if they are in a 'row' container <div>. You can further enhance the appearance by adding some Bootstrap utility classes.

See example code below. (I dont think Bootstrap has any classes to set the cards to a percentage width other than 25%, 50%, 75% and 100% - so you may have to set your own width of 31% for bigger screen devices, which is set in the <style></style> block of code below.

There might be a better way when using Bootstrap but I rarely use it myself so maybe one of the other contributors that swear by it could provide a better example for you.

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Cards - Equal Height</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
@media screen and (min-width: 768px) {
.card {
width: 31%;
}
}		
</style>
</head>
<body>
<div class="container px-5">
<div class="row justify-content-between flex-md-row">

<!-- start card -->
<div class="card mb-3">
<img class="card-img-top" src="..." alt="">
<div class="card-body d-flex flex-md-column flex-wrap">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, ut asperiores incidunt debitis sint beatae quia odit qui fugiat nihil consequuntur quam repellendus hic aliquam temporibus architecto corporis perspiciatis laborum!</p>
<a href="#" class="btn btn-primary mt-auto">Link 1</a>
</div>
</div>
<!-- end card-->


<!-- start card -->
<div class="card mb-3">
<img class="card-img-top" src="..." alt="">
<div class="card-body d-flex flex-md-column flex-wrap">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, ut asperiores incidunt debitis sint beatae quia odit.</p>
<a href="#" class="btn btn-primary mt-auto">Link 2</a>
</div>
</div>
<!-- end card-->


<!-- start card -->
<div class="card mb-3">
<img class="card-img-top" src="..." alt="">
<div class="card-body d-flex flex-md-column flex-wrap">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, ut asperiores incidunt debitis sint.</p>
<a href="#" class="btn btn-primary mt-auto">Link 3</a>
</div>
</div>
<!-- end card-->

</div>
<!-- end row-->

</div>
<!-- end container-->

</body>
</html>

O

osgood_

Brainiac

Bootstrap example in post above BUT if you want to use something a little more advanced, cleaner and less verbose, in my opinion, check out the code below. Personally I like to keep all of the styling together as it doesnt interfere with the html mark-up, which can get pretty hideous, when using a framework.

(Dont use the below with the Bootstrap framework css file hooked up to the page) This is a NON framework example.

<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<title>Cards</title>
<style>
.cardsWrapper {
font-family: helvetcica, sans-serif;
font-size: 16px;
line-height: 26px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 32px;
margin: 0 auto;
width: 90%;
}
@media screen and (max-width: 768px) {
.cardsWrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 480px) {
.cardsWrapper {
grid-template-columns: repeat(1, 1fr);
}
}
.card {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
border-radius: 6px;
padding: 15px;
}
.card figure {
margin: 0;
padding: 0;
}
.card h5 {
margin: 0 0 10px 0;
padding: 0;
font-size: 20px;
}
.card p {
margin: 0 0 15px 0;
padding: 0;
color: #666;
}
.card a {
text-decoration: none;
background-color: #0d66d0;
color: #fff;
padding: 7px 15px;
border-radius: 6px;
display: inline-block;
margin-top: auto;
align-self: start;
}
</style>
</head>
<body>

<div class="cardsWrapper">

<!-- start card-->
<div class="card">
<figure>
<img src="..." alt=""></figure>
<h5>Locations</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, ut asperiores incidunt debitis sint beatae quia.</p>
<a href="#">Go somewhere</a>
</div>
<!-- end card-->


<!-- start card -->
<div class="card">
<figure>
<img src="..." alt=""></figure>
<h5>Information</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, ut asperiores incidunt debitis sint beatae quia odit qui fugiat nihil consequuntur quam repellendus hic aliquam temporibus architecto corporis perspiciatis laborum!</p>
<a href="#">Go somewhere</a>
</div>
<!-- end card-->

<!-- start card-->
<div class="card">
<figure>
<img src="..." alt="">
</figure>
<h5>Other Resources</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, ut asperiores incidunt debitis sint beatae quia odit qui fugiat nihil.</p>
<a href="#">Go somewhere</a>
</div>
<!-- end card-->


</div>
<!-- end cardsWrapper-->

</body>
</html>

Nancy OShea

Community Expert

DISCLAIMER: Osgood is a Bootstrap hater. He condems everyone here who uses it. But we don't hold it against him. 🙂

Nancy O'Shea— Product User, Community Expert & Moderator

Nancy OShea

Community Expert

Part 2:

Bootstrap 4x vertically centered cards:

https://stackoverflow.com/questions/42252443/vertical-align-center-in-bootstrap

Nancy O'Shea— Product User, Community Expert & Moderator

Nancy OShea

Community Expert

This is the direct URL to the page in question.

http://gatewaygreenbuilding.com/GreenRoof.html

You don't know how to use Bootstrap's 12-box grid system do you? The absolute maximum number of columns you can have spanning a row is 12.

1 col x 12 = 12

12 col x 1 = 12

3 cols x 4 = 12

4 cols x 3 = 12

2 cols x 6 = 12

(1 col x 😎 + (1 col x 4) = 12

(1 col x 2) + (1 col x 10) = 12

and so on....

Fix your column totals to fit your layout classes (sm, md, lg) and you should be golden.

https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp

https://getbootstrap.com/docs/4.0/layout/grid/

Example:

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Hope that helps.

Nancy O'Shea— Product User, Community Expert & Moderator

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded