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

Braniac

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

Braniac

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

Braniac

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!

D

defaultvbg7e1p6wn4gAuthor

Known Participant

Hi @BenPleysier

Thank you!! I was able to implement the code you provided and it gave me the desired stretching, but I was wondering if there is anyway for me to display three cards on top of another three cards instead of 5 cards all together? I was also hoping you could help me edit my h1 correctly. I am looking to put a graphic icon on the left side of the black header bar where it says green roof, but when I nest it inside of the heading the spacing gets all messed up for the text and the image and I'm not sure if this is the correct way to be doing this. If you or anyone else could help me achieve this that would be great. This community has been so helpful as I just started working with Dreamweaver and know I am not the best at it. Thank you all for the support!!!!!

P

Paul-M

Braniac

Using the word `bloat` on every occasion when referring to Bootstrap, does give the word authentication. Pity that those in the knowledge tend to disgree.

This is the Lighhouse report for the home page of my personal Bootstrap site, which includes a background video.
Perhaps you could produce a similar report for one of your non-Bootstrap sites.

By @BenPleysier

When I refer to bloat I'm refering to the redundant code, not the performance of the website, which improves the managability of the code, in my opinion. Sifting through the Bootstrap html code, usually littered with divs and utility classes I find slows the management process down, for me at least. It takes me back to when trying to track down a problem when spaghetti table code was used for layout and no developer liked that, to my knowledge. I can produce the job twice as fast using vanilla code and meaningful classes written specifically for the project.

Personally I find Lighthouse inconsistant, it depends where you are in the world as to what rating you get. Also unless you compare like for like its pointless because all websites contain different content. A complex website will take longer to download than a simple website and more 'errors' can be expected. Does that mean we just produce a basic offering to get better prerfomance results and reduce the chances of 'errors' creeping in or do we concentrate more effort on the visual impact that a website creates, whislt obviously taking into acoount some performance aspects. All in all, coming from a visual background, as much as don't like it, because I'm a coder, the visual impact is the single most important aspect of web-design, it's the first contact that a user has. I've seen some rough coding BUT exceptional design and no-one but developers give a S**TE about the code, let's be honest.

Let me be clear here. I'm not trying to give you a hard time. You have a way of working, which is fine, I don't necessarily agree with it and am entitled to my opinions, just as you are entitled to yours. As they say 'there is more than one way to skin a cat'.

Using the word `bloat` on every occasion when referring to Bootstrap, does give the word authentication. Pity that those in the knowledge tend to disgree

By @osgood_

You don't have to use the entire Bootstrap library and you can always do a clean up of redundant styles etc couldn't you?

Paul-M - Community Expert

O

osgood_

Braniac

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_

Braniac

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

Braniac

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

Braniac

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

Braniac

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