I am trying to use a drop down in between button groups and i am using bootstrap 4, but if you run the code snippet you can see the drop down items besides the drop down button.
I don't know where it went wrong i added the external resources from Quack it.
<head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<div class="btn-group btn-group-vertical" role="group">
<button class="btn btn-outline-primary btn-large disabled mr-3">Samba|Tax Consultant</button>
<button class="btn btn-outline-primary btn-large">Income Tax</button>
<button class="btn btn-outline-primary btn-large">GST Returns</button>
<button class="btn btn-outline-primary btn-large">NRI Services</button>
<div class="btn-group" role="group">
<button class="btn btn-outline-primary btn-large dropdown-toggle" type="button" id="our-services" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Services</button>
<div class="dopdown-menu" aria-labelledby="our-services">
<a class="dropdown-item" href="#">Acconting & Auditing</a>
<a class="dropdown-item" href="#">Business Establishment</a>
<a class="dropdown-item" href="#">PAN & TAN Services</a>
<a class="dropdown-item" href="#">Banking Services</a>
<a class="dropdown-item" href="#">NRI Services</a>
</div>
</div>
<button class="btn btn-outline-primary btn-large">Contact Form</button>
</div>
</body>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn-group btn-group-vertical" role="group">
<button class="btn btn-outline-primary btn-large disabled mr-3">Samba|Tax Consultant</button>
<button class="btn btn-outline-primary btn-large">Income Tax</button>
<button class="btn btn-outline-primary btn-large">GST Returns</button>
<button class="btn btn-outline-primary btn-large">NRI Services</button>
<div class="btn-group" role="group">
<button class="btn btn-outline-primary btn-large dropdown-toggle" type="button" id="our-services" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Services</button>
<div class="dropdown-menu" aria-labelledby="our-services">
<a class="dropdown-item" href="#">Acconting & Auditing</a>
<a class="dropdown-item" href="#">Business Establishment</a>
<a class="dropdown-item" href="#">PAN & TAN Services</a>
<a class="dropdown-item" href="#">Banking Services</a>
<a class="dropdown-item" href="#">NRI Services</a>
</div>
</div>
<button class="btn btn-outline-primary btn-large">Contact Form</button>
</div>
</body>
</html>
your have a typo in here
<div class="dropdown-menu" aria-labelledby="our-services">
Related
I want to add a dropdown menu to my navbar but the menu is always out of the page.
Here is my code :
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">PEL</a>
<div class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle mr-3"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">${pseudo}</button>
<div class="dropdown-menu dropdown-menu-right">
<button
class="dropdown-item dropdown-menu-right"
type="button">Action</button>
<button
class="dropdown-item dropdown-menu-right"
type="button">Another action</button>
<button
class="dropdown-item dropdown-menu-right"
type="button">Something else here</button>
</div>
</div>
</nav>
Dropdown works good but it is always out of the right side of my screen...
A little space is created by my dropdown menu on the right side of the page.
According to the v4.0 doc :
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
Heads up! Dropdowns are positioned thanks to Popper.js (except when they are contained in a navbar).
Two options :
Upgrade your bootstrap version. It's working fine with v4.6
Use custom classes instead of bootstrap navbar
[EDIT 1] Here is a working example with bootstrap v4.6. Also i have removed the mr-3 class for better rendering.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">PEL</a>
<div class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">${pseudo}</button>
<div class="dropdown-menu dropdown-menu-right">
<button
class="dropdown-item"
type="button">Action</button>
<button
class="dropdown-item"
type="button">Another action</button>
<button
class="dropdown-item"
type="button">Something else here</button>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
I want to position all the buttons and DB's under the image but in the middle.
I can use javascript, css or HTML so please respond in these languages.
Here is what I want. The content is c.
img
c
Here is my code if you know how to help pls do:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieDB</title>
<link rel="stylesheet" href="ps4.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MovieDB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Credits</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Fantasy</a>
<a class="dropdown-item" href="#">Kids</a>
<a class="dropdown-item" href="#">pg</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search Movie" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<h1 class="display-1 d-flex justify-content-center mb-5"><img src="https://www.freelogodesign.org/file/app/client/thumb/da9eb726-0742-4b5b-a19a-7c42fcaa54ec_200x200.png?1581566782305" alt=""> </h1>
<img class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3" src="https://i.ebayimg.com/images/g/LVEAAOSwIttddvIz/s-l400.jpg" alt="">
<button class="btn btn-outline-danger ml-5 p-2 ml-md-5" type="submit">❤</button>
<h3 class="d-inline border border-success rounded-pill px-5">DB: 7.9</h3>
<button class="btn btn-outline-danger mr-5" type="submit">Search</button>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin></script>
</body>
</html>
I guess this is what your looking for:
Your size adjustment seems to be m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3. So I just reused them (I think you shouldn't need that much of class to make it work, it is not good for efficiency).
Anyway, there is you answer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieDB</title>
<link rel="stylesheet" href="ps4.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MovieDB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Credits</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Fantasy</a>
<a class="dropdown-item" href="#">Kids</a>
<a class="dropdown-item" href="#">pg</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search Movie" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<h1 class="display-1 d-flex justify-content-center mb-5"><img src="https://www.freelogodesign.org/file/app/client/thumb/da9eb726-0742-4b5b-a19a-7c42fcaa54ec_200x200.png?1581566782305" alt=""> </h1>
<div class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3">
</div>
<img class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3" src="https://i.ebayimg.com/images/g/LVEAAOSwIttddvIz/s-l400.jpg" alt="">
<div class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3">
<div class="text-center" style="width: 100%; height: 100%;">
<button class="btn btn-outline-danger ml-5 p-2 ml-md-5" style="
margin: 0!important;" type="submit">❤</button>
<h3 class="d-inline border border-success rounded-pill px-5">DB: 7.9</h3>
<button class="btn btn-outline-danger mr-5" style="
margin: 0!important;" type="submit">Search</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin></script>
</body>
</html>
I just wrapped the buttons in a DIV and added the text-center class to put the buttons in the middle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieDB</title>
<link rel="stylesheet" href="ps4.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MovieDB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Credits</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Fantasy</a>
<a class="dropdown-item" href="#">Kids</a>
<a class="dropdown-item" href="#">pg</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search Movie" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<h1 class="display-1 d-flex justify-content-center mb-5"><img src="https://www.freelogodesign.org/file/app/client/thumb/da9eb726-0742-4b5b-a19a-7c42fcaa54ec_200x200.png?1581566782305" alt=""> </h1>
<img class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3" src="https://i.ebayimg.com/images/g/LVEAAOSwIttddvIz/s-l400.jpg" alt="">
<div class="text-center">
<button class="btn btn-outline-danger ml-5 p-2 ml-md-5" type="submit">❤</button>
<h3 class="d-inline border border-success rounded-pill px-5">DB: 7.9</h3>
<button class="btn btn-outline-danger mr-5" type="submit">Search</button>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>movieDB</title>
<link rel="stylesheet" href="ps4.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MovieDB</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Credits</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Filter
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Comedy</a>
<a class="dropdown-item" href="#">Fantasy</a>
<a class="dropdown-item" href="#">Kids</a>
<a class="dropdown-item" href="#">pg</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search Movie" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<h1 class="display-1 d-flex justify-content-center mb-5"><img src="https://www.freelogodesign.org/file/app/client/thumb/da9eb726-0742-4b5b-a19a-7c42fcaa54ec_200x200.png?1581566782305" alt=""> </h1>
<!--i have taken new div(flex box) for image-->
<div class="d-flex justify-content-center">
<img class="m-0 mx-md-5 col-sm-12 col-md-4 d-block mb-3" src="https://i.ebayimg.com/images/g/LVEAAOSwIttddvIz/s-l400.jpg" alt="">
</div>
<!--i have taken new div(flex box) for buttons-->
<div class="d-flex justify-content-center">
<button class="btn btn-outline-danger ml-5 p-2 ml-md-5" type="submit">❤</button>
<h3 class="d-inline border border-success rounded-pill px-5">DB: 7.9</h3>
<button class="btn btn-outline-danger mr-5" type="submit">Search</button>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin></script>
</body>
</html>
This question already has answers here:
Bootstrap 4 Dropdown Menu not working?
(14 answers)
Closed 4 years ago.
Seems like a simple problem, it's likely I'm missing something obvious.
I have a card layout with a series of text / buttons / lists inside. One of these buttons is a dropdown, and for some reason the dropdown doesn't "drop". This code is copied directly from bootstrap 4's site on dropdown menu buttons, except for the button class styling (outline-primary).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
You have to include Bootstrap JS.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- 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>
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
Refer this link: https://getbootstrap.com/docs/4.0/getting-started/introduction/
Are all your js files included? Jquery, Popper and Bootstrap?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
<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>
Bootstrap's v4 btn-outline-primary doesn't work on the nav links when viewed on my iPhone, but works fine (albeit solid without outline) when viewed on my laptop and desktop screens. I looked around and didn't find any solutions specific to this. I'm using Bootstrap 4.0.0.
HTML is:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<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-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>
<body>
<!-- START NAVBAR -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container">
<!-- ADDED DIV TO MANIPULATE POSITIONS OF "navbar-brand" and "navbar-nav", the ul -->
<span class="navbar-brand mb-0 h1">JavaScript Is Cool</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<!-- removed .active -->
<a class="nav-link btn-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/bio">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link btn-outline-primary" href="/history">Resume´</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle btn-outline-primary" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
</div>
</li>
</ul>
<!-- REMOVED THE SEARCH FORM -->
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</div>
<!-- END ADDED DIV -->
</nav>
<!-- END NAVBAR -->
<!-- START JUMBOTRON -->
<div class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row">
<div class="col titleDiv">
<h1 class="line1">RON SMITH</h1>
<p class="line2">JavaScript Is Cool</p>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
<!-- START FOOTER -->
{{>footer}}
<!-- END FOOTER -->
<script src="../js/jquery.slim.min.js"></script>
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
Everything works fine except when tapping on iPhone. There's no highlighting of the button or links with color in responsive mode.
The btn-outline-primary class is not designed to be used the way you were using it. So, saying that it "works fine" means you misunderstood how it was supposed to work in the first place because based on the current behavior resulting from your code, it does NOT work "fine".
To make the btn-outline-primary class work the way it's supposed to be used and work, you need to add the btn class additionally to that as shown in the code snippet below. In other words, btn is required for btn-outline-primary to work properly even though the effect you get that way might not be the effect you were going for.
Here's the code snippet (click "run code snippet" below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container"> <!-- ADDED DIV TO MANIPULATE POSITIONS OF "navbar-brand" and "navbar-nav", the ul -->
<span class="navbar-brand mb-0 h1">JavaScript Is Cool</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <!-- removed .active -->
<a class="nav-link btn btn-outline-primary" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary" href="/bio">Bio</a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary" href="/history">Resume´</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link btn dropdown-toggle btn-outline-primary" href="" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
<a class="dropdown-item" href="#">Coming Soon</a>
</div>
</li>
</ul>
<!-- REMOVED THE SEARCH FORM -->
<!-- <form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form> -->
</div>
</div> <!-- END ADDED DIV -->
</nav>
I have a table and in last column I have the following drop down:
<td>
<div>
<button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" id="dropdownMenu2" type="button">Dropdown</button>
<div aria-labelledby="dropdownMenu2">
<button type="button">Action</button> <button type="button">Another action</button> <button type="button">Something else here</button>
</div>
</div>
</td>
When I click on drop down it doesn't open, what could the problem be?
Could it caused by the aria and data attributes?
I don't think the className attributes are working here. If you replace "className" by "class" and just add bootstrap it works.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<td>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
</td>
</body>
</html>
I had a similar issue. After moving the script files (bootstrap, jquery, etc) from bottom of the file into the <head> bootstrap dropdowns started working.