.footerlink a{
color: inherit;
text-decoration: none;
}
.card{
height:18rem;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
#media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.thumbcard{
width: 15rem;
height: 18rem;
}
#media(max-width: 768px){
.thumbcard{
width: 10rem;
height: 18rem;
}
}
a.custom-card,
a.custom-card:hover {
color: inherit;
text-decoration: none;
}
#media(max-width: 768px){
a.custom-card h5{
font-size: 1rem;
}
a.custom-card .card-body{
padding: 0.5rem 0.5rem;
font-size: 0.95rem;
line-height: none;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.79.0">
<title>Album example · Bootstrap v5.0</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/album/">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style7.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<div class="flex-row d-flex">
<a class="navbar-brand" href="#" title="Brand">Brand</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Nav Item</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</div>
</div>
</nav>
<main>
<div class="album py-5 bg-light">
<!-- <h2>Latest Articles</h2> -->
<div class="container">
<h2>Recent Articles</h2>
<div class="row row-cols-1 row-cols-sm-3 row-cols-md-4 g-3">
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
</div>
</div>
<hr/>
<div class="container">
<h2>Adventure</h2>
<div class="row row-cols-1 row-cols-sm-3 row-cols-md-4 g-3">
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
<div class="col-6">
<a href="#" class="custom-card">
<div class="card shadow-sm thumbcard">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
<div class="card-body">
<h5>This is demo header</h5>
<p class="card-text">This is demo test. This is another demo text. This is demo text</p>
</div>
<!-- <div class="card-footer">Card Footer only as Headline. Anohter paragraph added to test content</div> -->
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted py-5">
<div class="container">
<!-- <p class="float-end mb-1">
Back to top
</p> -->
<p class="justify-content-center ms-5">©Website is affiliated to Third Party Websites</p>
<!-- <p class="mb-4 ms-5">Album example is © Bootstrap, but please download and customize it for yourself!</p> -->
<!-- <p class="mb-0">New to Bootstrap? Visit the homepage or read our getting started guide.</p> -->
<div class="footerlink"><h4>
<span>About</span>
<span>Contact</span>
<span>Disclaimer</span>
<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#3b5998" class="bi bi-facebook" viewBox="0 0 16 16"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/></svg></span>
<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#bc2a8d" class="bi bi-instagram" viewBox="0 0 16 16"><path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/></svg></span>
<span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#00acee" class="bi bi-twitter" viewBox="0 0 16 16"><path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/></svg></span>
</h4></div>
</div>
</footer>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/popper.js"></script>
</body>
</html>
After searching in the internet I could not find any viable solution.
Please bear with me, this is important project, and I could not find meaningful solution to this problem.
This is extended version of Bootstrap Album Example.
I have added navbar, and modified and added CSS to view and better render the cards in mobile screen.
However I could not get over the issue of overlapping in small screens. When I decrease the screen in Google developer option, I could see the overlapping cards in Tablet screen and smaller(less than 968px) screen size.
I want to find the issue, and get rid of overlapping cards.
Simply add width: 100% with .thumbcard classes and with #media(max-width:768px){} classes.
Edited CSS classes
.thumbcard{
width: 15rem;
width: 100%;
height: 18rem;
}
#media(max-width: 768px){
.thumbcard{
width: 10rem;
width: 100%;
height: 18rem;
}
}
Related
I have a laravel project using alpine.js and I'm trying to create a sidebar and topbar/nav that work together so that if the sidebar is open then the hamburger menu shows in the top bar (the hamburger menu is used to open and close the sidebar). If the Sidebar is closed then the top bar should reach all the way across the width of the screen.
Currently the functionality is backwards (sidebar open hides hamburger menu, but closed shows the menu and a big space where the sidebar should be)
I've tried swapping out my relative/absolute conditionally bound classes but it's still not working. AM I just missing something obvious here?
<head>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/alpinejs#3.x.x/dist/cdn.min.js"></script>
</head>
<body class="font-sans antialiased">
<div class="relative min-h-screen md:flex" x-data=" {open : true}">
<!--sidebar-->
<div :class="open ? '' : '-translate-x-full relative'" class="z-10 bg-blue-800 text-blue-100 w-64 px-2 py-4 absolute inset-y-0 left-0 transform overflow-y-auto transition ease-in-out duration-200 shadow-lg">
<!--Logo-->
<div class="flex items-center justify-between px-2">
<div class="flex items-center space-x-2">
<a href="">
<x-application-logo class="block h-10 w-auto fill-current text-blue-100" />
</a>
<span class="text-2xl font-extrabold">Admin</span>
</div>
<button type="button" #click="open = !open" class=" inline-flex p-2 items-center justify-center rounded-md text-blue-100 hover:bg-blue-700 focus:outline-none ">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<!--Nav links-->
<nav>
<x-side-nav-link href="{{ route('dashboard') }}">
Dashboard
</x-side-nav-link>
</nav>
</div>
<!--Main Content-->
<main class="flex-1 bg-gray-100 h-screen" :class="open ? '' : 'relative'">
<!--top bar-->
<nav class="bg-blue-900 shadow-lg">
<div class="mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between md:justify-end h-16">
<div class="absolute inset-y-0 left-0 flex items-center ">
<a href="">
<x-application-logo class="block h-10 w-auto fill-current text-blue-100" />
</a>
<!--mobile button-->
<button type="button" x-on:click="open = !open" class="inline-flex items-center justify-center p-4 rounded-md text-blue-100 hover:bg-blue-700 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
</div>
</div>
</div>
</nav>
<div>
{{ $slot }}
</div>
</main>
</div>
</body>
I was expecting that I could import this Footer.vue component and use it as a globally in my App.vue. If you need any further details please dont hesitate to ask, would really appreciate some help, I'm a bit of a noob trying to learn this new framework ahah!
So I have initially created a Footer Component in ./components/Footer.vue. Here is the code for that specific component (Footer component) -
<template>
<section>
<div class="skew skew-top mr-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
</svg>
</div>
<div class="skew skew-top ml-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
</svg>
</div>
<div class="py-20 bg-gray-900 radius-for-skewed">
<div class="container mx-auto px-4">
<div class="flex flex-wrap">
<div class="w-full lg:w-1/3 mb-16 lg:mb-0">
<a class="inline-block mb-3 text-white text-3xl font-bold leading-none" href="#">
<img class="mb-3 h-12" src="atis-assets/logo/atis/atis-color-white.svg" alt="" width="auto">
</a>
<p class="mb-4 max-w-sm text-gray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt felis eu est.</p>
<div>
<a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
<img class="mx-auto" src="atis-assets/social/facebook-purple.svg">
</a>
<a class="inline-block w-10 mr-2 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
<img class="mx-auto" src="atis-assets/social/twitter-purple.svg">
</a>
<a class="inline-block w-10 p-2 bg-gray-800 hover:bg-gray-700 rounded" href="#">
<img class="mx-auto" src="atis-assets/social/instagram-purple.svg">
</a>
</div>
</div>
<div class="w-full lg:w-2/3 lg:pl-16 flex flex-wrap justify-between">
<div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
<h3 class="mb-6 text-2xl font-bold text-purple-600">Products</h3>
<ul>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Services</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">News and Stories</a></li>
<li><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
</ul>
</div>
<div class="w-full md:w-1/3 lg:w-auto mb-16 md:mb-0">
<h3 class="mb-6 text-2xl font-bold text-purple-600">Important Links</h3>
<ul>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Organization Team</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Our Journeys</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Pricing Plans</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Roadmap</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Terms & Conditions</a></li>
<li><a class="text-gray-400 hover:text-gray-300" href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="w-full md:w-1/3 lg:w-auto">
<h3 class="mb-6 text-2xl font-bold text-purple-600">Company</h3>
<ul>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">About Us</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Jobs</a></li>
<li class="mb-4"><a class="text-gray-400 hover:text-gray-300" href="#">Press</a></li>
<li><a class="text-gray-400 hover:text-gray-300" href="#">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<p class="lg:text-center text-sm text-gray-400 border-t border-gray-800 pt-12 mt-16">© 2021. All rights reserved.</p>
</div>
</div>
<div class="skew skew-bottom mr-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
</svg>
</div>
<div class="skew skew-bottom ml-for-radius">
<svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewbox="0 0 10 10" preserveaspectratio="none">
<polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
</svg>
</div>
</section>
</template>
<script>
export default {}
</script>```
**And here is the contents of my App.vue -**
```<script>
import { createApp } from 'vue'
import Footer from './components/Footer.vue'
const globalComponents = createApp({})
globalComponents.component(
// the registered name
'Footer',
)
app
.component('Footer', Footer)
</script>
<template>
<h1 class="text-[100px] text-center m-auto text-red underline"> Hello Vue JS </h1>
</template>
<Footer />
<style scoped>
</style>```
However, when I run npm run dev everything opens and the local server but just shows a blank page, not even then <template><h1>Hello Vue JS</h1><template/>
Not only this but the footer doesnt appear at all and is highlighted grey in my IDE which is assume means its not being imported correctly.
I was expecting that I could import this Footer.vue component and use it as a globally in my App.vue. If you need any further details please dont hesitate to ask, would really appreciate some help, I'm a bit of a noob trying to learn this new framework ahah!**
Put footer inside <template>
Code is here
I don't think you need createApp
simply put like this <Footer /> in your App.vue inside the <templete> tag
<template>
Hello World!
<Footer />
</template>
Hello World! is your main content, Footer is your footer content or breadcrumb content
Same way you can add header if you have Header.vue
<template>
<Header />
Hello World!
<Footer />
</template>
I have 6 different cards all that display different content. Each card has a read more button and when clicked a modal shows up. The modal needs to show the content of the correct card that was clicked. how can I go about doing this?
I have got the modal functionality to work, just need help getting the correct card and modal pair to link together
card code:
<div class="card">
<div class="info">
<h5>This is to test card 1</h5>
<div class="button">
<a id="open-modal" class="btn">Read More</a>
</div>
</div>
</div>
<div class="card">
<div class="info">
<h5>This is to test card 2</h5>
<div class="button">
<a id="open-modal" class="btn">Read More</a>
</div>
</div>
</div>
modal code:
<div class="modal">
<div class="modal-box">
<div class="modal-box__exit-button">
<svg stroke="currentColor" fill="currentColor" stroke-
width="0" version="1.2" baseProfile="tiny"
viewBox="0 0 24 24" class="btn" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M17.414 6.586c-.78-.781-2.048-.781-2.828 0l-2.586 2.586-2.586-2.586c-.78-.781-2.048-.781-2.828 0-.781.781-.781 2.047 0 2.828l2.585 2.586-2.585 2.586c-.781.781-.781 2.047 0 2.828.39.391.902.586 1.414.586s1.024-.195 1.414-.586l2.586-2.586 2.586 2.586c.39.391.902.586 1.414.586s1.024-.195 1.414-.586c.781-.781.781-2.047 0-2.828l-2.585-2.586 2.585-2.586c.781-.781.781-2.047 0-2.828z">
</path>
</svg>
</div>
<div class="modal-content">
<h5>This is to test modal 1</h5>
</div>
<div class="modal-box__contact-button">
Contact Us
</div>
</div>
</div>
<div class="modal">
<div class="modal-box">
<div class="modal-box__exit-button">
<svg stroke="currentColor" fill="currentColor" stroke-
width="0" version="1.2" baseProfile="tiny"
viewBox="0 0 24 24" class="btn" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M17.414 6.586c-.78-.781-2.048-.781-2.828 0l-2.586 2.586-2.586-2.586c-.78-.781-2.048-.781-2.828 0-.781.781-.781 2.047 0 2.828l2.585 2.586-2.585 2.586c-.781.781-.781 2.047 0 2.828.39.391.902.586 1.414.586s1.024-.195 1.414-.586l2.586-2.586 2.586 2.586c.39.391.902.586 1.414.586s1.024-.195 1.414-.586c.781-.781.781-2.047 0-2.828l-2.585-2.586 2.585-2.586c.781-.781.781-2.047 0-2.828z">
</path>
</svg>
</div>
<div class="modal-content">
<h5>This is to test modal 2</h5>
</div>
<div class="modal-box__contact-button">
Contact Us
</div>
</div>
</div>
You can find them with custom data that connect with the element you clicked on
function showModal(){
alert(document.querySelectorAll("[data-target='"+this.id+"']")[0].innerText);
}
document.addEventListener("DOMContentLoaded", function() {
var cards = document.getElementsByClassName('card');
for(var i = 0; i < cards.length; i++) {
cards[i].addEventListener("click", showModal);
}
});
.d-none{
display:none;
}
<div class="card" id="1">One</div>
<div class="card" id="2">Two</div>
<div class="card" id="3">Three</div>
<div class="card" id="4">Four</div>
<div class="card" id="5">Five</div>
<div class="card" id="6">Six</div>
<div data-target="1" class="d-none">Description 1</div>
<div data-target="2" class="d-none">Description 2</div>
<div data-target="3" class="d-none">Description 3</div>
<div data-target="4" class="d-none">Description 4</div>
<div data-target="5" class="d-none">Description 5</div>
<div data-target="6" class="d-none">Description 6</div>
I have the following component:
<div class="p-5">
<div class="flex h-64 justify-center">
<div class="relative ">
<div class="flex flex-row cursor-pointer truncate p-2 px-4 rounded">
<div></div>
<div class="flex flex-row-reverse ml-2 w-full">
<div slot="icon" class="relative">
<div class="absolute text-xs rounded-full -mt-1 -mr-2 px-1 font-bold top-0 right-0 bg-red-700 text-white">3</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart w-6 h-6 mt-2">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</div>
</div>
</div>
<div class="absolute w-full rounded-b border-t-0 z-10">
<div class="shadow-xl w-64">
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 1</div>
<div class="truncate">Product 1 description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22</div>
</div>
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 2</div>
<div class="truncate">Product 2 long description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22</div>
</div>
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100" style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50" alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 3</div>
<div class="truncate">Product 3 description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22</div>
</div>
<div class="p-4 justify-center flex">
<button class="text-base undefined hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer
hover:bg-teal-700 hover:text-teal-100
bg-teal-100
text-teal-700
border duration-200 ease-in-out
border-teal-600 transition">Checkout $36.66</button>
</div>
</div>
</div>
</div>
</div>
<div class="h-32"></div>
</div>
Which looks like:
The Dropdown Component
The effect I am looking for is that the dropdown menu firstly is hidden, and each time I hover on the cart logo the dropdown menu will be visible for 2 seconds after leaving the mouse (after the hover finished) from the cart logo.
Added "group h-0" class to to parent
<div class="relative group h-0 ">
So that with the help of it access child class, also make height of parent 0px because don't want parent to take full height when child is hidden,
Then in child div First hide the child then add block on hover of parent " hidden group-hover:block" in div
<div class="absolute w-full hidden group-hover:block rounded-b border-t-0 z-10">
Hope it helps.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Document</title>
</head>
<body>
<div class="p-5">
<div class="flex h-64 justify-center">
<div class="relative group h-0 ">
<div class="flex flex-row cursor-pointer truncate p-2 px-4 rounded">
<div></div>
<div class="flex flex-row-reverse ml-2 w-full">
<div slot="icon" class="relative">
<div
class="absolute text-xs rounded-full -mt-1 -mr-2 px-1 font-bold top-0 right-0 bg-red-700 text-white">
3</div>
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-shopping-cart w-6 h-6 mt-2">
<circle cx="9" cy="21" r="1"></circle>
<circle cx="20" cy="21" r="1"></circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
</svg>
</div>
</div>
</div>
<div class="absolute w-full hidden group-hover:block rounded-b border-t-0 z-10">
<div class="shadow-xl w-64">
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100"
style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50"
alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 1</div>
<div class="truncate">Product 1 description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22
</div>
</div>
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100"
style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50"
alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 2</div>
<div class="truncate">Product 2 long description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22
</div>
</div>
<div class="p-2 flex bg-white hover:bg-gray-100 cursor-pointer border-b border-gray-100"
style="">
<div class="p-2 w-12"><img src="https://dummyimage.com/50x50/bababa/0011ff&text=50x50"
alt="img product"></div>
<div class="flex-auto text-sm w-32">
<div class="font-bold">Product 3</div>
<div class="truncate">Product 3 description</div>
<div class="text-gray-400">Qt: 2</div>
</div>
<div class="flex flex-col w-18 font-medium items-end">
<div class="w-4 h-4 mb-6 hover:bg-red-200 rounded-full cursor-pointer text-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="none"
viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 ">
<polyline points="3 6 5 6 21 6"></polyline>
<path
d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
</path>
<line x1="10" y1="11" x2="10" y2="17"></line>
<line x1="14" y1="11" x2="14" y2="17"></line>
</svg>
</div>
$12.22
</div>
</div>
<div class="p-4 justify-center flex">
<button class="text-base undefined hover:scale-110 focus:outline-none flex justify-center px-4 py-2 rounded font-bold cursor-pointer
hover:bg-teal-700 hover:text-teal-100
bg-teal-100
text-teal-700
border duration-200 ease-in-out
border-teal-600 transition">Checkout $36.66</button>
</div>
</div>
</div>
</div>
</div>
<div class="h-32"></div>
</div>
</body>
</html>
Toggle two classes d-block and d-none using mat-slide toggle. When toggled is checked I need to change the d-none class to d-block and d-block to d-none
<mat-slide-toggle >
View All Statuses
</mat-slide-toggle>
<div class="row">
<div class="col-12 d-block">
<svg id="bar-chart" width="550" height="300"></svg>
</div>
<div class="col-12 d-none">
<svg id="stacked-bar-chart" width="550" height="300"></svg>
</div>
</div>
try this it will works, otherwise you can use [ngClass]="bool ? 'd-block' : 'd-none'"
$("#toggleclick").click(function () {
if($(".d-block").hasClass("hide"))
{
$(".d-block").removeClass("hide");
$(".d-none").addClass("hide");
}
else if($(".d-none").hasClass("hide")) {
$(".d-none").removeClass("hide");
$(".d-block").addClass("hide");
}
})
.d-block{
background:#ff0;
}
.d-none{
background:#0ff;
}
.hide{
display:none;
}
mat-slide-toggle{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<mat-slide-toggle id="toggleclick">
View All Statuses
</mat-slide-toggle>
<div class="row">
<div class="col-12 d-block">
<svg id="bar-chart" width="550" height="300"></svg>
D-Block
</div>
<div class="col-12 d-none hide">
<svg id="stacked-bar-chart" width="550" height="300"></svg>
D-None
</div>
</div>
Below code using Angular's ngClassdirective
HTML:
<mat-slide-toggle [(ngModel)]="checked">
View All Statuses
</mat-slide-toggle>
<div class="row">
<div class="col-12" [ngClass]="checked ? 'd-none' : 'd-block'">
<svg id="bar-chart" width="550" height="300"></svg>Hello
</div>
<div class="col-12" [ngClass]="checked ? 'd-none' : 'd-block'">
<svg id="stacked-bar-chart" width="550" height="300"></svg>World
</div>
</div>
CSS:
.d-block {
display: block;
}
.d-none {
display: none;
}