Collapse bootstrap card on sm and\or md screens - javascript

I use bootstrap 4.1 card to display inside categories on right sidebar - Card example image;
On small screens I want to collapse this card, because it is big and goes first - mobile example.
So how can I collapse card on sm and md screens, and not collapse on lg screens? Or I need not to use card?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="card mb-3">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<h5>All</h5>
Categories here
</div>
</div>
</div>

<button class="btn d-lg-none" type="button" data-toggle="collapse" data-target="#example-collapse">
<span class="navbar-light"><span class="navbar-toggler-icon"></span></span>
</button>
<div id="example-collapse" class="collapse d-lg-block">
<!-- your card here -->
</div>
The class d-lg-none hides the button for lg and xl screen sizes and the class d-lg-block shows the div for lg and xl screen sizes. I am using the collapse icon for the navbar-light style, you may need to adjust this to match your navbar.

Can just use the built in Bootstrap classes to hide on smaller screens.
https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements
Would look something like this (untested)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container d-none d-lg-block">
<div class="card mb-3">
<h5 class="card-header">Categories</h5>
<div class="card-body">
<h5>All</h5>
Categories here
</div>
</div>
</div>
All it does is check media queries on the screen width and apply display:none if the screen size is lower than the threshold you put.

You could set it up this way :
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-block">
card block
</div>
</div>
</div>
And will do what you're trying to do.

Related

How to toggle between two different dropdown menus without having them both open at the same time?

I have two different dropdown options I'm using. One is for some search options, and the other is for a navigation menu.
Currently, I'm unable to open a single menu at one time. They both open, one on top of the other. I'm unable to figure out how to keep only one menu open at a time.
If the navigation menu is open and I click the search option, then the navigation menu should close. If I have the search option open and I click the navigation menu, then search should close.
How can I accomplish this with JavaScript?
//icon switch
const hamburgerMenuBtnContainer = document.querySelector('.hamburger-toggle');
const hamburgerMenuBtn = document.querySelector('.hamburger-toggle i');
const magnifyingGlassBtnContainer = document.querySelector('.search-toggle');
const magnifyingGlassBtn = document.querySelector('.search-toggle i');
hamburgerMenuBtnContainer.addEventListener('click', function() {
hamburgerMenuBtn.classList.toggle('fa-x');
hamburgerMenuBtn.classList.toggle('fa-bars');
});
magnifyingGlassBtnContainer.addEventListener('click', function() {
magnifyingGlassBtn.classList.toggle('fa-x');
magnifyingGlassBtn.classList.toggle('fa-magnifying-glass');
})
.search-collapse {
flex-basis: 100%;
flex-grow: 1;
padding: 1rem 0;
min-height: 1px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light shadow">
<div class="container-fluid nav-container">
<h3 class="logo">Logo Here</h3>
<div class="navbar-right">
<!-- Two -->
<button class="btn border-0 collapsed nav-btn me-3" type="button" data-bs-toggle="collapse" data-bs-target="#search-content">
<div class="search-toggle">
<div class="search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
</button>
<!-- Three -->
<button type="button" class="navbar-toggler collapsed nav-btn" data-bs-toggle="collapse" data-bs-target="#navbar-content">
<div class="hamburger-toggle">
<div class="hamburger">
<i class="fa-sharp fa-solid fa-bars"></i>
</div>
</div>
</button>
</div>
<!-- Nav Content -->
<div class="collapse search-collapse" id="search-content">
<h4>Search Options</h4>
</div>
<div class="collapse navbar-collapse" id="navbar-content">
<h4>Navigation Options</h4>
</div>
</div>
</nav>

From bootstrap Grid columns to carousel

So this is what I’m hoping to accomplish.
I currently have a bootstrap grid displaying 1 row and 4 columns.
On desktop devices the 4 columns appears next to each other
On tablets they appear in a 2 x 2 grid and in Mobile devices they appear 4 rows with 1 column.
Is it possible to make it so that when in tablet or mobile to have a carousel that I can slide between the 4 columns? So that when in Tablet there are 2 slides with two of the columns in each slide and when in mobile 4 slides with 1 column in each slide?
Here is my current grid code.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="how container">
<div class="title">SUBSCRIBE IN JUST 4 EASY STEPS</div>
<div class="row no-gutters">
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SIGN UP</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>SELECT AGE GROUP</span>
</div>
<div class="w-100 d-block d-lg-none"></div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>CHOOSE A SUBSCRIPTION PLAN</span>
</div>
<div class="col text-center">
<img src="https://dummyimage.com/400x400/000/fff" style="height:200px;">
<span>HAVE FUN</span>
</div>
</div>
<div class="row text-center pt-3">
<div class="col">
<button type="button" class="btn btn-dark btn-lg">GET STARTED</button>
</div>
</div>
</div>
If Bootstrap is the only library you're allowed to use, I would imagine you would have to have duplicate contents and show/hide one of them on different breakpoints for carousels or just regular 4-column content.
If that's not the case, I would highly recommend you to use OwlCarousel! That has everything you're looking for.
HTML
<div class="how container">
<h4 class="title">
SUBSCRIBE IN JUST 4 EASY STEPS
</h4>
<div class="owl-carousel owl-theme">
<div class="item">
<figure class="figure">
<img src="https://loremflickr.com/600/200?random=1"
class="figure-img img-fluid w-100" />
<figcaption class="figure-caption">
SIGN UP
</figcaption>
</figure>
</div>
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
</div>
</div>
As you can see, basically you just need a wrapper with a class .owl-theme that wraps a collection of .items. Inside each item, you can have any content you want. Here I just demonstrated to have a <figure /> inside of each item.
JavaScript
Make sure you've loaded jQuery first, then the javascript file of OwlCarousel, and then 2 style files: 1 core css and 1 theme. Installation details are documented here.
$(function() {
$('.owl-carousel').owlCarousel({
loop: false,
margin: 0,
nav: false,
responsive:{
0:{
items:1
},
768:{
items:2
},
992:{
items:4
}
}
});
});
See, in the responsive option, this is where you define how many items you want per break point. More info from their documentation site here!
Result
demo: https://jsfiddle.net/davidliang2008/mvn3k08u/22/

Plus and Minus icons on bootstrap accordion

I'm trying to toggle between plus and minus icon for bootstrap accordion. On default, plus icon is showing. When accordion collapses, it shows the minus icons and hides the plus icon. I don't know if what I'm saying makes sense but it's really basic for some of you. I'm just a beginner.
I've tried doing it with css with :after and content "+" and content "-" but this is not what I want. I need to use font awesome. I've also tried the js way.
<script>
$(document).ready(function(){
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
</script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend><?php echo $header_title; ?></legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fa fa-plus"></i>
Card Info
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I don't know how to check where I went wrong. All I want is to show the plus and minus icon
$(document).ready(function() {
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
/*$("#btnCollapse").on("click", function() {
$(".fa-plus").toggleClass("fa-minus");
})
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend>
<?php echo $header_title; ?>
</legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Card Info
<i class="fa fa-plus"></i>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
You can use alternate solution as follow:
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
Alex, your code is working fine. Please check this fiddle.
[https://jsfiddle.net/boilerplate/bootstrap][1]
Please make sure your js code must be written after the jquery.js and bootstrap.js loaded.

Bootstrap Hidden Element Requires Place

I'm using Bootstrap and I have included a navbar at the bottom of the page.
But The notification bar element (look comment - it is the div element with the id warning.
The notification bar can change It's visibility. But when the visibility is 'collapsed' the div is still taking up all space.
My code:
<div class="navbar navbar-default navbar-fixed-bottom">
<!-- notification bar element can change visibility -->
<div class="row" id="warning" style="visibility: hidden;">
<h2>Bottom Notification</h2>
<small>Timestamp</small>
<h3>This is a message.</h3>
</div>
<!-- -->
<!-- element is static - can't change visibility -->
<div class="container row">
<p class="navbar-text pull-left">© 2016 - xxxx</p>
</div>
</div>
How can I change it so that the div is not taking any space away when the visibility is hidden?
That is correct. The visibility could be seen as an opacity... so the element is there but with opacity zero, when hidden.
If you don't want it to use the place, rather use display:
<div class="row" id="warning" style="display: none;">
Instead of visibility you can use hide class and toggle it
<div class="navbar navbar-default navbar-fixed-bottom">
<!-- notification bar element can change visibility -->
<div class="row hide" id="warning">
<h2>Bottom Notification</h2>
<small>Timestamp</small>
<h3>This is a message.</h3>
</div>
<!-- -->
<!-- element is static - can't change visibility -->
<div class="container row">
<p class="navbar-text pull-left">© 2016 - xxxx</p>
</div>
</div>
Change style="visibility: hidden;" to style="display: none;:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="navbar navbar-default navbar-fixed-bottom">
<!-- notification bar element can change visibility -->
<div class="row" id="warning" style="display: none;">
<h2>Bottom Notification</h2>
<small>Timestamp</small>
<h3>This is a message.</h3>
</div>
<!-- -->
<!-- element is static - can't change visibility -->
<div class="container row">
<p class="navbar-text pull-left">© 2016 - xxxx
</p>
</div>
</div>
Use
display: none
instead of
visibility: hidden
The difference is well explained on w3schools
that's the whole idea of visibility: hidden;, it keeps the space even it hides the element. But in display:none will leave the space .

How do I make my website responsive using Bootstrap?

I am a newbie making a website. The website shows perfect on big screens but its layout gets jumbled up on smaller screens. Can someone please help me out with what I'm doing wrong? How can I fix it?
Thank you so much.
Here is My Code and Link to my website.
Link:
https://luckdrum.herokuapp.com/index.html
Code
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>LuckDrum</title>
<link rel="shortcut icon" href="img/fav.ico" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css"href="css/bootstrap.css" >
<!-- Custom styles for this template -->
<link rel="stylesheet"type="text/css" href="jumbotron.css">
</head>
<body>
<!--Heading Formation-->
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<h5 align="left">PEOPE SEARCH</h5>
<!---->
<h6 class="text-center">PEOPLE-THINGS RECOMENDATION</h6>
<h6 id="h12">Actors/movies</h6>
<h6 id="h13" class="text-center">Authors</h6>
<h6 id="h14"class="text-center">Chefs</h6>
<h6 id="h15"class="text-right">Designers</h6>
<h6 id="h16"class="text-center">Handcrafters</h6>
<h6 id="h17">Jewelers</h6>
<h6 id="h18">Musicans</h6>
<h6 id="h19">Painters</h6>
<h6 id="h20">Singers</h6>
<h6 id="h21">Winemaker</h6>
<h6 id="h22">Architect</h6>
<h6 id="h23">bloggers</h6>
<h6 id="h24">Hosts</h6>
<h6 id="h25">Infographers</h6>
</div>
</div>
</div></body>
Bootstrap works on a col-* grid system with designated breakpoints that depend on the viewport size. The col-* sizes are set to break at specific widths on that viewport.
Here are the standard Bootstrap v3.3.5 media queries that corresponds with the documentation that outlines the responsive classes that are available.
/* Extra Small Devices, .visible-xs-* */
#media (max-width: 767px) {}
/* Small Devices, .visible-sm-* */
#media (min-width: 768px) and (max-width: 991px) {}
/* Medium Devices, .visible-md-* */
#media (min-width: 992px) and (max-width: 1199px) {}
/* Large Devices, .visible-lg-* */
#media (min-width: 1200px) {}
http://getbootstrap.com/css/#responsive-utilities
Below is an example of an acceptable bootstrap layout, note it looks nothing like yours currently,
<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
CODEPEN DEMO

Categories