Rails 6
Bootstrap 4
I am trying to create a navigation bar, using dropdown menus, with buttons. I am expecting the highlighted dropdown item, to be blue, but it's not. Please see picture.
Here's my code:
#NaviagationBar.btn-group
.dropdown
button#BooksMenu.btn.btn-primary.dropdown-toggle aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
| Books
.dropdown-menu aria-labelledby="BooksMenu"
button.btn.dropdown-item type="button" Action
button.btn.dropdown-item type="button" Another action
button.btn.dropdown-item type="button" Something else here
.dropdown
button#CardsMenu.btn.btn-primary.dropdown-toggle aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
| Cards
.dropdown-menu aria-labelledby="CardsMenu"
button.btn.dropdown-item type="button" Action
button.btn.dropdown-item type="button" Another action
button.btn.dropdown-item type="button" Something else here
Any ideas?
EDIT:
The menu items, turn into a blue button when I click on it, but not when I hover over it.
Just replace dropdown-item btn class by btn btn-primary w-100 from your dropdown-item button ?
Replace :
<button class="dropdown-item btn" href="#">Action</button>
By :
<button class="btn btn-primary w-100" href="#">Action</button>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<button class="btn btn-primary w-100" href="#">Action</button>
<button class="btn btn-primary w-100" href="#">Another action</button>
<button class="btn btn-primary w-100" href="#">Something else here</button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can write a customer scss rule to target the dropdown and the items within to change color on hover or focus. CssTricks - Hover-within this link talks about hover-within pseudo selector. But it also explains that you could also do it with just focus and or hover
Related
I am trying to prevent Bootstrap5 dropdown menu from closing when clicked inside. With Bootstrap 3 the code below works fine but with Bootstrap 5 it's not working.
//stop all bootstrap dropdown menu from closing on click inside
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
I am working with the code below:
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<script>
//stop all bootstrap dropdown menu from closing on click inside
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
</script>
<div class="container mt-3">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
</div>
</body>
</html>
In bootstrap 5, the option auto-close defines what happens on click.
In your case, you can add data-bs-auto-close="outside" to your dropdown.
See below:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuClickableInside" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
Clickable inside
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuClickableInside">
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
<li><a class="dropdown-item" href="#">Menu item</a></li>
</ul>
</div>
The examples on the Bootstrap 5 site only show non-LI nav items aligned to the right.
I have 4 menu items, 3 should be left aligned while the last should be pushed to the right.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
You could achieve this with the classes .me-auto on the left div or .ms-auto on the right div. This adds a margin between the two different navigation elements. Here a short demo, but you can see some other examples with a searchbar in the navbar-documentation.
Changed navbar-expand-lg to just navbar-expand so the example is easily visible without needing to go fullpage.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap navbar demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!-- div class="navbar-nav"> -->
<!-- use me-auto here... -->
<div class="navbar-nav me-auto">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
<!-- ...or use ms-auto here -->
<!-- <div class="navbar-nav ms-auto"> -->
<div class="navbar-nav">
<a class="nav-link" href="#">Settings</a>
<a class="nav-link" href="#">Account</a>
<a class="nav-link" href="#"><span class="btn btn-outline-danger btn-sm">Logout</span></a>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
Note that these changes would not have any visual effect on the mobile version of the navigation. Also, if you are using e.g. divs or lists (ul/ol) for the navigation will not make any visual difference with bootstrap. However, it could make an impact in SEO and accessability.
When I click the button the off-canvas popup but when I click on it, it closes just like when I click outside of it
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images,
lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<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>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
I even copy the exact code from the official site bootstrap5
Those are the images of result the first image is the button and the second is offcanvas popup but the moment I click on it closes
hi there I had the same problem, I solve this problem by changing place offcanvas content (modal). it wors perfectly
I can't seem to figure out why the buttons don't work when clicked on. Both carousel items are there (confirmed by changing which is active).
I have looked on the getbootstrap website and followed the code how it explains but there is no change.
Could it be that I'm missing a link in the head that I could not find / am unaware of?
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TinDog</title>
<!-- Bootstrap Scripts -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="css/styles2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<!-- Testimonial Section -->
<section id="testimonials">
<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="images/dog-img.jpg" alt="dog-image">
<em class="pebbles">Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2>My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-img" src="images/lady-img.jpg" alt="lady-img">
<em class="beverly">Beverly, Illinois</em>
</div>
</div>
<!-- Carousel Buttons -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
Remove the id="testimonials from this line
<section id="testimonials">
an ID should only be used once, and in this case the id testimonials is on the line that it needs to be (the buttons use this as their target data-bs-target="#testimonials")
<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
I am noticing that the version number of your bootstrap CSS and JS do not match. I would swap these CDNs with the ones provided on the bootstrap 5 page this helped give the desired result.
CSS - 5.0.0-beta2
https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css
JS - 5.0.0-alpha2
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"></script>
<!-- A blank template with twitter bootsrap and dependencies added as external resources, to play around. Feel free to fork this and use. -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TinDog</title>
<!-- Bootstrap Scripts -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles2.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;200;300;400;500;600;700;800;900&family=Ubuntu:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
</head>
<!-- Testimonial Section -->
<section >
<div id="testimonials" class="carousel slide" data-bs-ride="carousel" data-bs-keyboard="true">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-img" src="https://picsum.photos/200/300" alt="dog-image">
<em class="pebbles">Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2>My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-img" src="https://picsum.photos/500/300" alt="lady-img">
<em class="beverly">Beverly, Illinois</em>
</div>
</div>
<!-- Carousel Buttons -->
<button class="carousel-control-prev" type="button" data-bs-target="#testimonials" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonials" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
Change the buttons to anchors and use href. This is from bootstrap.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I am new to semantic-ui and I am having trouble creating an html link for a menu item, below is my test code:
<div class="ui blue borderless main menu">
<a href="#" class="blue item" data-vivaldi-spatnav-clickable="1">
Home
</a>
<a href="#" class="ui floated dropdown item" data-vivaldi-spatnav-clickable="1">
Products
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="http://www.google.com">Google</a>
<a class="item" href="http://www.zdnet.com">Zdnet</a>
</div>
</a>
What I get displayed is:
Home Products> Google Zdnet
What I want is Google and Zdnet to be displayed as items of Products:
Home |Products|
|Google |
|Zdnet |
Can anybody tell me what I need to do to my code to achieve this?
Thanks
Make sure you included jQuery and semantic.min.js libraries in <head> section (jQuery first!).
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
</head>
<body>
<div class="ui blue borderless main menu">
Home
<div class="ui dropdown item" data-vivaldi-spatnav-clickable="1">
Products
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="http://www.google.com">Google</a>
<a class="item" href="http://www.zdnet.com">Zdnet</a>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>