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>
Related
I have a BootStrap 5 row, the columns of which will always remain the same, even if the content inside of them overflows the column. How do I make it so that when content is larger than the column, the column expands in size?
As you can see, the columns (purple) let the cards inside of them overflow, therefore causing them to collide with other cards. What I want is for the columns to expand when the content inside of them is bound to overflow.
HTML for rows and columns:
<div class="row">
<div class="col">
<h1 class="header">User</h1>
<div class="card card-large border-0 me-1">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-user-pen" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Username: </a>
<a class="header row pt-2">Plan: </a>
<a class="header row pt-2">Discord: </a>
<a class="header row pt-2">Date of registration: </a>
<a class="header row pt-2">Used searches: /</a>
</div>
</div>
<div class="mt-2">
<a class="btn shadow text-white me-1" style="background-color: #7289da">Link Discord</a>
<a class="btn btn-secondary shadow text-white me-1">Change password</a>
<a class="btn btn-danger shadow text-white" data-bs-toggle="modal" data-bs-target="#logout">Log out</a>
<div class="modal fade" id="logout" data-bs-backdrop="logout" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" style=" width: 25rem">
<div class="modal-content text-white">
<div class="modal-body" style="background-color: #0e0e0e">
<div class="container">
<div class="row justify-content-center">
<div class="col-1" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-triangle-exclamation" style="font-size: 50px;"></i>
</div>
<div class="col-8 mt-4">
Are you sure you wish to log out?
</div>
</div>
</div>
</div>
<div class="modal-footer border-0 justify-content-center" style="background-color: #0e0e0e">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button data-bs-dismiss="modal" type="button" class="btn btn-danger" #click="deleteCookie()">Log out</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<h1 class="header">Plan</h1>
<div class="card card-large border-0 me-1">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-tag" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Plan: </a>
<a class="header row pt-2">Date of Purchase: </a>
<a class="header row pt-2">Date of Expiration: </a>
</div>
</div>
<div class="mt-2">
<a class="btn btn-primary shadow text-white me-1" #click="">Upgrade</a>
<a class="btn btn-danger shadow text-white">Cancel</a>
</div>
</div>
</div>
</div>
<div class="col">
<h1 class="header">API</h1>
<div class="card card-large border-0 me-3">
<div class="card-body shadow">
<div class="row row-cols-2">
<div class="col" style="text-align: left; margin-left: 15px; margin-top: 16px; width: 50px">
<i class="fa-solid fa-code" style="font-size: 50px;"></i>
</div>
<div class="right-column">
<a class="header row pt-2">Used searches: /</a>
</div>
</div>
<div class="mt-2">
<a class="btn btn-secondary shadow text-white me-1 disabled">API docs</a>
<a class="btn btn-secondary shadow text-white me-1" onclick="">Copy API key</a>
<a class="btn btn-secondary shadow text-white">Regenerate API key</a>
</div>
</div>
</div>
</div>
</div>
Add col-lg-4 in column row like this
<div class="row">
<div class="col-lg-4">
//content
</div>
<div class="col-lg-4">
//content
</div>
<div class="col-lg-4">
//content
</div>
</div>
For more information, please visit this link : https://getbootstrap.com/docs/5.2/layout/columns/#how-they-work
I want to make Vertical bootstrap tabs but when I tried to use the code from bootstrap 5 docs I faced a problem when opening the tabs as you can see in the screenshot the tabs are showing next to each other when I switch between them so what I'm missing in this
]
code
<div class="d-flex align-items-start center rounded" style="direction: rtl;">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="btn btn-lg btn-primary" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home"
type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="btn btn-lg btn-primary dflex" id="v-pills-profile-tab" data-bs-toggle="pill"
data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile"
aria-selected="false">Store</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="container contain bg-light rounded">
<div class="row" style="direction:rtl;">
<h4 class="title" >Home</h4><br>
</div><hr />
<div class="row" style="direction:rtl;">
<div class="card cashIncom shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:750px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="spanIncome">إجمالي الأرباح :</span>
<span class="spanValue" id="spanIncomeValue">500$</span>
<i class="fa-solid fa-credit-card iconstate"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="direction:rtl;">
<div class="card cashIncom shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:750px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="spanIncome">المصروفات :</span>
<span class="spanValuespent" id="spanIncomeValue">500$</span>
<i class="fa-solid fa-dollar-sign spenticon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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>
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
I made three blocks – using the CARD class in bootstrap. That worked well. Now I'd like to add a footer (or just a div) to the card that allows to "Show/Hide Details".
I tried 10 different ways and the cards always "break" for some reason. I have the code that works for the cards but without the collapsing
The goal is to have the last 3 lines collapsing, while the "Show payment schedule" changes to "Hide payment schedule".
Who knows how to get there? Where to put the div class for the collapsing without breaking the card?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!-- Wrapper for Cards -->
<div class="row mx-n2">
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card 1 -->
<a class="card h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x220/monthly.gif" alt="Monthly Animation">
<div class="card-body">
<h4>Monthly</h4>
<p class="font-size-1 text-body mb-0">You will be charged every month the amount of</p>
<h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 43</h3>
</div>
<hr/>
<!-- Collapsing Footer -->
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-black-50">Show payment schedule</span>
<div class="row pt-2">
<div class="col">
<span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 43</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">June 2020</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 43</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 43</span>
</div>
</div>
</div>
<!-- End Collapsing Footer -->
</a>
<!-- End Card 1 -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- Card 2 -->
<a class="card h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x220/quarterly.gif" alt="Quarterly Animation">
<div class="card-body">
<h4>Quarterly</h4>
<p class="font-size-1 text-body mb-0">You will be charged every third month the amount of</p>
<h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 102</h3>
</div>
<hr/>
<!-- Collapsing Footer -->
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-black-50 ">Show payment schedule</span>
<div class="row pt-2">
<div class="col">
<span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 102</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">July 2020</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 43</span>
</div>
</div>
</div>
<!-- End Collapsing Footer -->
</a>
<!-- End Card 2 -->
</div>
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- End Card 3 -->
<a class="card h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x220/yearly.gif" alt="Yearly Animation">
<div class="card-body">
<h4>Annually</h4>
<p class="font-size-1 text-body mb-0">You will be charged once every year the amount of</p>
<h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 408</h3>
</div>
<hr/>
<!-- Collapsing Footer -->
<div class="card-footer border-0 pt-0">
<span class="font-size-1 text-black-50">Show payment schedule</span>
<div class="row pt-2">
<div class="col">
<span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span> </div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2021</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2022</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
</div>
<!-- End Collapsing Footer -->
</a>
<!-- End Card 3 -->
</div>
</div>
<!-- End Wrapper for Cards -->
Like this? for more info, visit https://getbootstrap.com/docs/4.4/components/collapse/
Explanation
I added
data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"
to your span so, it works like collapsable toggler and added root div with
class="collapse show" id="collapseExample"
to your three items so only one div can collapse.
document.querySelectorAll('.change_text').forEach(cur => {
cur.addEventListener('click', e => {
const target = e.target;
if (target.textContent === 'Show payment schedule') {
target.textContent = 'Hide payment schedule';
} else {
target.textContent = 'Show payment schedule';
}
})
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="row mx-n2">
<div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
<!-- End Card 3 -->
<div class="card h-100 transition-3d-hover" href="#">
<img class="card-img-top" src="../../assets/img/480x220/yearly.gif" alt="Yearly Animation">
<div class="card-body">
<h4>Annually</h4>
<p class="change_text font-size-1 text-body mb-0">You will be charged once every year the amount of</p>
<h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 408</h3>
</div>
<hr/>
<!-- Collapsing Footer -->
<div class="card-footer border-0 pt-0">
<a class="change_text font-size-1 text-black-50" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Show payment schedule</a>
<div class="collapse show" id="collapseExample">
<div class="row pt-2">
<div class="col">
<span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span> </div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2021</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
<div class="row">
<div class="col">
<span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2022</span>
</div>
<div class="col">
<span class="font-size-1 text-black-50">USD 408</span>
</div>
</div>
</div>
</div>
<!-- End Collapsing Footer -->
</div>
<!-- End Card 3 -->
</div>
</div>
It looks like your collapsing section is just another card element nested in the parent card element. According to the docs, Bootstrap has a Collapse element and it's used in conjunction with data-toggle="collapse" when the element triggering the animation is a link. When the element triggering the animation is a div, like in your case, you have to give it the class collapse.
The docs show an examples for both. Trying something like the second part:
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>