When I add the class float-end it pushes the button to right but the div tags next to that comes front of it.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="col-md-7 bg-white shadow-sm rounded-3 mx-3 ">
<div>
<a href="#" class="btn btn-sm btn-primary m-2 mr-0">
Edit <i class="bi bi-pencil"></i>
</a>
</div>
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Pan no</div>
<div class="text-secondary">not added</div>
</div>
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Birthdate</div>
<div class="text-secondary">not added</div>
</div>
</div>
I fixed it by adding the "clearfix" class to button's parent div.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="col-md-7 bg-white shadow-sm rounded-3 mx-3 ">
<div class="clearfix">
<a href="#" class="btn btn-sm btn-primary m-2 mr-0">
Edit <i class="bi bi-pencil"></i>
</a>
</div>
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Pan no</div>
<div class="text-secondary">not added</div>
</div>
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Birthdate</div>
<div class="text-secondary">not added</div>
</div>
</div>
Here, in the overview section
Float - Bootstrap v5.0
Please be aware float utilities have no effect on flex items.
Note that float will will make it pop to the left-most or right-most position in the parent element. so you must add clearfix to the parent element.
Hello I have two options for you
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- one options -->
<div class="col-md-7 bg-white shadow-sm rounded-3 mx-3 ">
<div class="position-relative">
<div class="position-absolute top-0 end-0">
<a href="#" class="btn btn-sm btn-primary m-2 mr-0">
Edit
</a>
</div>
</div>
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Pan no</div>
<div class="text-secondary">not added</div>
</div>
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Birthdate</div>
<div class="text-secondary">not added</div>
</div>
</div>
<br>
<!-- two options -->
<br>
<div class="col-md-7 bg-white shadow-sm rounded-3 mx-3 ">
<div class="float-start col-10 p-2">
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Pan no</div>
<div class="text-secondary">not added</div>
</div>
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Birthdate</div>
<div class="text-secondary">not added</div>
</div>
</div>
<div class="float-end col-2 p-2">
<a href="#" class="btn btn-sm btn-primary d-flex justify-content-center align-self-center">
Edit
</a>
</div>
<div class="float-start col-12 p-2">
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Addres</div>
<div class="text-secondary">not added</div>
</div>
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">Zip Code</div>
<div class="text-secondary">not added</div>
</div>
<div class="d-flex p-2 justify-content-between border-bottom">
<div class="fw-bold">City</div>
<div class="text-secondary">not added</div>
</div>
</div>
</div>
Related
I'm using Tailwind CSS along with Font Awesome Icons. Here the icons show like this,
Is it not suitable to adjust every div's width. Here is my code (For an element),
<!-- Navigation Link-->
<div class="w-100 p-3 hover:bg-white/30">
<div class="flex gap-4 text-white-max pl-3">
<div>
<i class="fas fa-tags"></i>
</div>
<div>Products</div>
</div>
</div>
<!-- End Navigation Link-->
My question is how to adjust this without changing every single element.
Add fa-fw class to the icon, see more info about Fixed Width Icons
Add a class of fa-fw on the HTML element referencing your icon to set one or more icons to the same fixed width.
console.clear()
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
<div class="w-100 p-3 hover:bg-white/30">
<div class="flex gap-4 text-white-max pl-3">
<div>
<i class="fas fa-tags fa-fw"></i>
</div>
<div>Products</div>
</div>
<div class="flex gap-4 text-white-max pl-3">
<div>
<i class="fa-brands fa-fw fa-windows"></i>
</div>
<div>Dashboard</div>
</div>
</div>
FontAwesome has a class for this fa-fw which will make an icon square, this is applied to each icon along with the variant and name class, so like fa-solid fa-fw fa-file-lines for example
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
<div class="text-white bg-stone-900 inline-flex flex-col" style="--fa-animation-duration: 1.5s; --fa-animation-iteration-count: 3; --fa-animation-timing: ease-in-out">
<div class="cursor-pointer p-3 hover:bg-white/30">
<div class="flex items-center gap-3 px-3">
<i class="fa-brands fa-fw fa-windows fa-beat"></i>
Dashboard
</div>
</div>
<div class="cursor-pointer p-3 hover:bg-white/30">
<div class="flex items-center gap-3 px-3">
<i class="fa-solid fa-fw fa-file-lines fa-beat"></i>
Documents
</div>
</div>
<div class="cursor-pointer p-3 hover:bg-white/30">
<div class="flex items-center gap-3 px-3">
<i class="fa-solid fa-fw fa-tags fa-beat"></i>
Products
</div>
</div>
<div class="cursor-pointer p-3 hover:bg-white/30">
<div class="flex items-center gap-3 px-3">
<i class="fa-solid fa-fw fa-cube fa-beat"></i>
Stock
</div>
</div>
</div>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js" integrity="sha512-6PM0qYu5KExuNcKt5bURAoT6KCThUmHRewN3zUFNaoI6Di7XJPTMoT6K0nsagZKk2OB4L7E3q1uQKHNHd4stIQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="w-100 p-3 hover:bg-white/30">
<div class="flex gap-3 text-white-max pl-3">
<div>
<i class="fa-brands fa-fw fa-windows"></i>
</div>
<div>Dashboard</div>
</div>
<div class="flex gap-3 text-white-max pl-3">
<div>
<i class="fa-solid fa-fw fa-file-lines"></i>
</div>
<div>Documents</div>
</div>
<div class="flex gap-3 text-white-max pl-3">
<div>
<i class="fa-solid fa-fw fa-tags"></i>
</div>
<div>Products</div>
</div>
<div class="flex gap-3 text-white-max pl-3">
<div>
<i class="fa-solid fa-fw fa-cube"></i>
</div>
<div>Stock</div>
</div>
</div>
I am trying to fit in the admin page this dashboard component. The content does not align correctly with the container (from the sidebar to the other end horizontally and from the navbar to the footer vertically). The issue I'm having is that I cannot fit it just right. The admin panel is made out of 3 components: admin page/sidebar/dashboard component.
The Dashboard content and how it aligns so far:
How can I align it correctly using Bootstrap 5?
Admin Page:
<template>
<div>
<sidebar></sidebar>
<div class="container">
<div class="row gutters-sm">
<div class="vh-100 d-flex justify-content-center align-items-center">
<div class="card">
<div class="card-body tab-content">
<div class="tab-pane active">
<keep-alive>
<component :is="retrieveComponentMethod"></component>
</keep-alive>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
Dashboard Component:
<template>
<div class="row mb-3">
<!-- Earnings (Monthly) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's sales amount</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ todaysell }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-primary"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Earnings (Annual) Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's income</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ income }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>
<span>Since last years</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-shopping-cart fa-2x text-success"></i>
</div>
</div>
</div>
</div>
</div>
<!-- New User Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's due</div>
<div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">$ {{ due }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 20.4%</span>
<span>Since last month</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-users fa-2x text-info"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Pending Requests Card Example -->
<div class="col-xl-3 col-md-6 mb-4">
<div class="card h-100">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-uppercase mb-1">Today's Expenses</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">$ {{ expense }}</div>
<div class="mt-2 mb-0 text-muted text-xs">
<span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>
<span>Since yesterday</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-comments fa-2x text-warning"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12 mb-4">
<!-- Simple Tables -->
<div class="card">
<div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
<h6 class="m-0 font-weight-bold text-primary">Out of Stock Product</h6>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
...
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
</div>
<div class="card-footer"></div>
</div>
</div>
</div>
</template>
I have a problem:
as you can see in the picture, the problem is, that the column doesnt take the full hight. On the left side is what i got and on the right is what i want. Maybe you guys can help me out. Here is the source code which leads to the image on the left. I have searched for a solution but unfortunatelly nothing fits my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation-->
Message
</div>
</div>
<div class="row">
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This question is basically the same as this and this, but the overly complex, nested and incorrect Bootstrap grid structure you're using make it almost impossible to make the height work as expected.
If you simplify the markup as recommended in your other questions, the height issue is resolved using the flexbox grow and shrink utilities as explained in the Bootstrap docs...
"Use .flex-grow-* utilities to toggle a flex item’s ability to grow to
fill available space. "
Using vh-100, flex-grow-0, flex-grow-1, flex-column, etc...
<div class="container-fluid d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
<div class="row flex-grow-1">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
</div>
<div class="col-md-8 bg-primary d-flex flex-column flex-grow-1">
<div class="row flex-column flex-fill">
<div class="col bg-success flex-grow-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
<div class="col bg-info flex-fill">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation--> Message </div>
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col bg-success flex-grow-0"> Text-Input and Button </div>
</div>
</div>
</div>
</div>
https://codeply.com/p/iP18GJ1ZdU
It can be done through display: flex. It is necessary to set height: 100% to take available height.
So I've edited some classes and add some classes.
The complete stackblitz example can be seen here
An example:
<div class="box">
<div class="row box m-0">
<div class="col-md-12 p-0 foo-flex">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid foo-flex-item">
<div class="row h-100">
<div class="col-md-4 bg-warning">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style="height: 0%; width: 100%; paddingLeft: 0; paddingRight: 0; paddingTop: 8px;">
<input class="form-control mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="7.5px; marginBottom: 7.5px;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Message
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script src=" index.js"></script> -->
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
I'm using the class vh-100 to make a multiple screen / section design. Idea being it's Step 1, 2 etc..
Seems to work absolutley fine on a desktop device, but when shrinking screen down to a sm device, overything seems to overlap.
I am using flex utils to align-items to the center of the section, but it overlaps on a mobile.
JS Fiddle can be seen here : https://jsfiddle.net/km3v12gz/
Any ideas or reasons why this would happen?
HTML is :
<section id="step-1" class="vh-100 align-items-center d-flex position-relative">
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 mb-4 mb-sm-0">
<div class="text-center">
<h2 class="mb-4">Select an option</h2>
<a class="button -primary u-block-mobile d-inline-block mr-2 mt-1 mt-sm-0" href="#">Sell</a>
<a class="button -primary u-block-mobile d-inline-block mb-2 mt-1 mt-sm-0" href="#">Rent</a>
</div><!-- /.text-center -->
</div><!-- /.col-sm-8 -->
<div class="col-12 col-sm-4">
<div class="text-center">
<h2 class="mb-4">Enter your postcode</h2>
</div><!-- /.text-center -->
<input class="postcode form__input -light w-100 mb-3 text-center" name="postcode" type="text" placeholder="Enter Postcode">
<button class="button -secondary w-100 find-address" type="submit">Find Address</button>
<div class="hidden-addresses mt-3 mb-3" style="display: none;">
<div class="row">
<div class="col">
<select class="addresses">
<!-- /jQuery Populate -->
</select>
</div>
</div><!-- /.row -->
</div><!-- /.hidden-address -->
<div class="hidden-address mt-3 mb-3" style="display:none;">
<p>Address of Property:</p>
<div class="property-address">
<!-- /.jQuery Populated -->
</div><!-- /.property-address -->
</div><!-- /.hidden-address -->
<div class="d-block mt-2">
Enter your address manually
</div><!-- /.d-block -->
</div><!-- /.col-sm-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
</section>
<section>
<div class="vh-100 align-items-center d-flex position-relative flex-grow-1">
<div class="container">
<div class="row">
<div class="col-12 col-sm-6">
<div class="text-center mb-4">
<h3>Choose a date & time</h3>
</div><!-- /.text-center -->
<div class="row">
<div class="col">
<div class="text-center">
<strong class="d-block mb-4">February
/ March
2020
</strong>
</div><!-- /.text-center -->
</div><!-- /.col -->
</div><!-- /.row -->
<div class="pl-2 pr-2 pl-sm-5 pr-sm-5">
<div class="row seven-cols">
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Sa</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-22">
22
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Su</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-23">
23
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Mo</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-24">
24
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Tu</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-25">
25
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">We</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-26">
26
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Th</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-27">
27
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<div class="d-block mb-4">
<span class="c-dark f-bold">Fr</span>
</div>
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-28">
28
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-02-29">
29
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-01">
01
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-02">
02
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-03">
03
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-04">
04
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-05">
05
</a>
</div><!-- /.text-center -->
</div>
<div class="col-md-1 mb-4">
<div class="text-center">
<a class="d-inline-block p-2 data-select-block w-100 date-selection" href="#" data-date="2020-03-06">
06
</a>
</div><!-- /.text-center -->
</div>
<div class="col-12 mt-3 mb-3">
<div class="row slots">
<!-- /.jQuery -->
</div><!-- /.slots -->
</div><!-- /.col-12 -->
</div><!-- /.row -->
</div><!-- /.pl-5 -->
</div><!-- /.col-6 -->
<div class="col-12 col-sm-6">
<div class="text-center mb-4">
<h3>Your Details</h3>
</div><!-- /.text-center -->
</div><!-- /.col-6 -->
</div><!-- /.row -->
</div>
</div><!-- /.align-items-center -->
</section>
Thanks
I am using Angular 7 + Bootstrap. I am using bootstrap card deck to create 3 menus.
When the routerlinkactive is active, I want to style the border for that particular card, where the link is available.
<div class="container-fluid">
<div class="card-deck mb-3 text-center">
<div class="card mb-4 box-shadow"> <!-- want to style at this level when link is active -->
<div class="card-header pb-2">
<h4 class="my-0 font-weight-normal">Menu 1</h4>
</div>
<div class="card-body">
<a routerLinkActive="active" routerLink='my-courses' class="link-unstyled">
<i class="fas fa-tasks fa-9x"></i></a>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header pb-2">
<h4 class="my-0 font-weight-normal">Menu 2</h4>
</div>
<div class="card-body">
<a routerLinkActive="active" routerLink='completion-certs' class="link-unstyled">
<i class="fas fa-award fa-9x"></i></a>
</div>
</div>
<div class="card mb-4 box-shadow">
<div class="card-header pb-2">
<h4 class="my-0 font-weight-normal">Menu 3</h4>
</div>
<div class="card-body">
<a routerLinkActive="active" routerLink='self-certification' class="link-unstyled">
<i class="fas fa-book-reader fa-9x"></i></a>
</div>
</div>
</div>
</div>
You can use something like this.
<a #rla="routerLinkActive" routerLinkActive="active" routerLink='my-courses' class="link-unstyled">.... </a>
and on the card div you can use [class.active-card]="rla.isActive"