Getting button to align center in Bootstrap card footer - html

I am using Bootstrap 5.1.3 and trying to get a button to center in the footer of a card. Here's the code I'm using:
CSS
.btnStandard {
min-width: 10vw;
}
HTML
<div class="card-footer justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>
Nothing I've tried will let me center the button in the card footer. Any thoughts?


Try this as well:
<div class="card-footer mx-auto justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-
content-center btnStandard">
<div class="col-10 text-center">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i>
</div>
</button>
</div>


Here you go... You forgot to add d-flex.
Change this...
<div class="card-footer justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>
...to this.
<div class="card-footer d-flex justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>

Related

Fill row content with an image keeping the size

My problem is in containing the images within a bootstrap row. When I add the image this is not contained adapting to the size of the row but for some reason it follows its size by activating the scroll.
I would like the image to fit into the container without causing scrolling when resizing the image.
This is the correct behavior when not adding any elements in the row:
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
While this is the behavior when I add an image:
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can use a trick sizing image to an height of 0 and a min-height of 100%
style="height:0;min-height:100%;" or via a custom class (better practice)
idea:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 mh-100 pt-3 ps-3 pb-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100 ">
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive px-0 rounded" style="height:0;min-height:100%;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive px-0 rounded" style="height:0;min-height:100%;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Another possibility is also to set a max-height on the conatiners
other possible example:
.max-vh-100{max-height:calc(100vh - 2em);}/* takes into account : pt-3 p-s3 pb-3 that could be turned into p-3 */
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 p-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100 max-vh-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100 max-vh-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.max-vh-100{max-height:calc(100vh - 2em);}takes into account : pt-3 ps-3 pb-3 that could be turned into p-3

Making bootstrap5 col only go down to footer

For this project I have to display a specific email adresses mailbox. In particular I need the 'Mail Card List' to be a scrollable component instead of stretching down the page, past the footer. I have tried using the 'max-height: ;' css style but that sets a fixed height. I am after a variable height (so it will work on different screen sizes, etc).
I
Any advice on how to achieve this (or even where to look) would be great. Thank you.
JsFiddle: https://jsfiddle.net/6fr9bh4v/4/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>TEMP MAIL</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">EMAIL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Report</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- MAILBOX PAGE -->
<div class="container">
<div class="row">
<div class="col-10">
<h1 class="d-flex justify-content-center">
<span class="badge bg-secondary m-3">user#domain.com</span>
</h1>
</div>
<div class="col-2 d-flex justify-content-center">
<button class="btn btn-outline-success mt-4 mb-4 mx-1">Return</button>
<button class="btn btn-outline-primary mt-4 mb-4 mx-1">Refresh</button>
</div>
<hr>
<!-- BASE - Search component -->
<div class="col-3">
<div class="input-group mb-3">
<input class="form-control" type="text">
<button class="btn btn-outline-success">Search</button>
<button class="btn btn-outline-danger">Clear</button>
</div>
</div>
<!-- EMAIL VIEW ONLY | ADD -->
<div class="col-7">
<div>
<dl class="row">
<dt class="col-2 text-end m-0">
From:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
To:
</dt>
<dd class="col-10 m-0">
Dan
</dd>
<dt class="col-2 text-end m-0">
Date:
</dt>
<dd class="col-10 m-0">
1/1/2000
</dd>
<dt class="col-2 text-end m-0">
Subject:
</dt>
<dd class="col-10 m-0">
Test email!
</dd>
</dl>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div>
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
<br>
<!--
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
-->
</div>
</div>
<hr>
<!-- EMAIL CARD LIST -->
<div class="col-3" style="overflow-y: scroll;">
<!-- EMAIL CARD -->
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 1</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 2</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 3</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
</div>
<!-- EMAIL VIEW ONLY -->
<div class="col-9">SHOW EMAIL HERE</div>
</div>
</div>
<footer class="footer fixed-bottom">
<div class="container-fluid text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
THIS IS A FOOTER
<br>
<a class="text-reset fw-bold" href="#">FOOTER LINK</a>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>

Replace the inline style rule for overflow, you are using bootstrap, use the overflow-scroll class.
For the overflow to work you need to give it height, but since this is to be dynamic (to work across devices), so you will need to make it relative to viewport
<!-- EMAIL LIST -->
<div class="col-3 overflow-scroll vh-100">
.
.
.
</div>
With the above changes you'll see improvements but, you will need to consider the height that the rest of the elements (navigation etc) take. And when you have this in pixels, you can use CSS calc() to subtract it from the full viewport height. Create a class for your custom height relative to the viewport, for example:
.custom-height {
height: calc(100vh - 400px);
min-height: 60px; /* add min-height to prevent it from becoming way too small if not enough vertical space*/
}
To allow space for the footer add margin on the "mailbox page" container div, mb-5
Remove fixed-bottom from <footer>
Full code:
.custom-height {
height: calc(100vh - 400px);
min-height: 60px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>TEMP MAIL</title>
</head>
<body>
<!-- https://getbootstrap.com/docs/5.1/getting-started/introduction/ -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">LarryMail</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Report</a>
</li>
<!-- API ACCESS | ON BACK LIST
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">API</a>
</li>
-->
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<select class="form-select me-2" aria-label="Default select example">
<option selected>Select Domain</option>
<option value="1">#crazyforher.com</option>
<option value="2">#etc...</option>
<option value="3">#etc...</option>
</select>
<button class="btn btn-outline-success me-2" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!--
{% block content %}
{% endblock %}
-->
<!-- HOME PAGE
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">LarryMail</h1>
<p class="lead">Unlimited mailboxes. Courtesy of Larry.</p>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<select class="form-select me-2" aria-label="Default select example">
<option selected>Select Domain</option>
<option value="1">#crazyforher.com</option>
<option value="2">#etc...</option>
<option value="3">#etc...</option>
</select>
<button class="btn btn-outline-success me-2" type="submit">Search</button>
</form>
</div>
</main>
-->
<!-- MAILBOX PAGE -->
<div class="container mb-5">
<div class="row">
<div class="col-10">
<h1 class="d-flex justify-content-center">
<span class="badge bg-secondary m-3">admin#crazyforher.com</span>
</h1>
</div>
<div class="col-2 d-flex justify-content-center">
<button class="btn btn-outline-success mt-4 mb-4 mx-1">Return</button>
<button class="btn btn-outline-primary mt-4 mb-4 mx-1">Refresh</button>
</div>
<hr>
<!-- BASE - Search component -->
<div class="col-3">
<div class="input-group mb-3">
<input class="form-control" type="text">
<button class="btn btn-outline-success">Search</button>
<button class="btn btn-outline-danger">Clear</button>
</div>
</div>
<!-- EMAIL VIEW ONLY | ADD -->
<div class="col-7">
<!-- IF MAILBOX EMPTY
<p>
Select a message at left, or enter a different username into the box on upper right.
</p>
-->
<div>
<dl class="row">
<dt class="col-2 text-end m-0">
From:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
To:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
Date:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
<dt class="col-2 text-end m-0">
Subject:
</dt>
<dd class="col-10 m-0">
Larry
</dd>
</dl>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div>
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
<br>
<!--
<button class="btn btn-outline-danger mt-2 mb-2">Delete</button>
-->
</div>
</div>
<hr>
<!-- EMAIL LIST -->
<div class="col-3 overflow-scroll custom-height">
<!-- EMAIL CARD -->
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 1</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 2</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 3</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
<div class="row card mt-1 mb-1">
<button class="btn btn-block px-4">
<div class="row">Email Subject 4</div>
<div class="row">Test#Domain.com</div>
<div class="row">TIME</div>
</button>
</div>
</div>
<!-- EMAIL VIEW ONLY -->
<div class="col-9">SHOW EMAIL HERE</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid text-center p-4" style="background-color: rgba(0, 0, 0, 0.05);">
THIS IS A FOOTER
<br>
<a class="text-reset fw-bold" href="#">FOOTER LINK</a>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap 5 and vertical positioning

I am using Bootstrap 5's flexbox grid to design a responsive mobile-first Angular web application.
I would like the home screen of my app to have these 3 elements :
The name of the app at the top of the screen
A row of buttons in the middle of the screen
A footer at the bottom of the screen
What would be the best responsive way to position these elements at the top, middle and bottom of the screen respectively, while keeping them horizontally centered.
My code at the moment looks like this :
<div class="container-fluid">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<h1>App name</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">First button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Second button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Third button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Fourth button</button>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-center">
<p>Footer</p>
</div>
</div>
Thank you!

The same way as with any flexbox vertical alignment in Bootstrap. For example, auto-margins in flexbox container...
<div class="container-fluid vh-100 d-flex flex-column">
<div class="row">
<div class="col-12 d-flex justify-content-center">
<h1>App name</h1>
</div>
</div>
<div class="row my-auto">
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">First button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Second button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Third button</button>
</div>
<div class="col-12 col-sm-6 col-lg-3 d-flex">
<button type="button" class="btn btn-outline-primary flex-fill">Fourth button</button>
</div>
</div>
<div class="row">
<div class="col-12 d-flex justify-content-center">
<p>Footer</p>
</div>
</div>
</div>
Demo

CSS Circle Behind Image Taking Up Full Container Width

I'm trying to get a circle behind a logo using CSS but struggling as it keeps taking up the whole width of the container.
https://jsfiddle.net/leelawtondesign/hfqk6a0g/5/#&togetherjs=HAg4AK4vSo
This is how it looks...
This is how it is meant to look...
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-md-3 my-auto order-2 order-md-1">
<div class="pt-5 pt-md-3 d-flex justify-content-center">
<div class=""></div>
<button type="button" class="btn btn-social-icon btn-facebook btn-rounded mx-2"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-social-icon btn-twitter btn-rounded mx-2"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-social-icon btn-instagram btn-rounded mx-2"><i class="fa fa-instagram"></i></button>
</div>
</div>
<div class="col-12 col-md-6 order-1 order-md-2 logo d-flex position-relative">
<img class="pt-3 pt-md-5 pb-4 pb-md-5 m-auto align-content-center" src="img/safety_first_logo.png">
</div>
<div class="pt-3 pt-md-0 col-12 col-md-3 text-right my-auto order-3 d-flex justify-content-center justify-content-md-end">
<i class="fas fa-phone px-2"></i> 07460162247
</div>
</div>
</div>

Align components using angled bootstrap

I'm trying to generate a component aligned in the middle, as follows:
<app-card titulo="Painel ao Vivo" [zeroPadding]="false" icon="fa-heartbeat fas">
<div class="col-md-12 col-lg-12 col-sm-12">
<div class="justify-content-center">
<span class="text-sm text-black font-weight-bold mr-2">{{jogo.timeCasa.nome}}</span>
<app-avatar [titulo]="jogo.timeCasa.nome" [img]="jogo.timeCasa.logo"
class="avatar rounded-circle bg-primary mr-2"></app-avatar>
<button type="button" class="btn btn-primary btn-sm">0</button>
<button type="button" class="btn btn-primary btn-sm">0</button>
<app-avatar [titulo]="jogo.timeVisita.nome" [img]="jogo.timeVisita.logo"
class="avatar rounded-circle bg-primary mr-2"></app-avatar>
<span class="text-sm text-black font-weight-bold">{{jogo.timeVisita.nome}}</span>
</div>
</div>
</app-card>
app-card:
<div class="card">
<div class="card-header border-0" >
<h4 *ngIf="titulo" class="card-title"><i class="{{icon}}"></i> {{titulo}} </h4>
<ng-container *ngIf="header" [ngTemplateOutlet]="header"></ng-container>
</div>
<div class="card-body border-radius-bottom" [ngClass]="{'p-0': zeroPadding}">
<ng-content></ng-content>
</div>
</div>
How should it look: https://i.stack.imgur.com/NfuKw.png, how was it on the web: https://i.stack.imgur.com/cwKmq.png, how was it on the mobile: https://i.stack.imgur.com/RR6GP.png