bootstrap simple dropdown not showing at all
I'm trying to put something like a side menu to my ASP.NET MVC5 application, but the dropdown-menu just doesn't show.
Resuming, I just copy the example from bootstrap page, pasted and nothing shows up:
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
Created this fiddle that have the issue: enter link description here
Maybe the problem is something more that I have to add. I want something just like the image.enter image description here
html drop-down-menu
asked Nov 23 '18 at 21:48
Cristopher Taborda de PaulaCristopher Taborda de Paula
1315
add a comment |
I'm trying to put something like a side menu to my ASP.NET MVC5 application, but the dropdown-menu just doesn't show.
Resuming, I just copy the example from bootstrap page, pasted and nothing shows up:
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
Created this fiddle that have the issue: enter link description here
Maybe the problem is something more that I have to add. I want something just like the image.enter image description here
html drop-down-menu
asked Nov 23 '18 at 21:48
Cristopher Taborda de PaulaCristopher Taborda de Paula
1315
add a comment |
I'm trying to put something like a side menu to my ASP.NET MVC5 application, but the dropdown-menu just doesn't show.
Resuming, I just copy the example from bootstrap page, pasted and nothing shows up:
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
Created this fiddle that have the issue: enter link description here
Maybe the problem is something more that I have to add. I want something just like the image.enter image description here
html drop-down-menu
asked Nov 23 '18 at 21:48
Cristopher Taborda de PaulaCristopher Taborda de Paula
1315
I'm trying to put something like a side menu to my ASP.NET MVC5 application, but the dropdown-menu just doesn't show.
Resuming, I just copy the example from bootstrap page, pasted and nothing shows up:
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
Created this fiddle that have the issue: enter link description here
Maybe the problem is something more that I have to add. I want something just like the image.enter image description here
html drop-down-menu
html drop-down-menu
asked Nov 23 '18 at 21:48
Cristopher Taborda de PaulaCristopher Taborda de Paula
1315
asked Nov 23 '18 at 21:48
Cristopher Taborda de PaulaCristopher Taborda de Paula
1315
asked Nov 23 '18 at 21:48
Cristopher Taborda de PaulaCristopher Taborda de Paula
1315
asked Nov 23 '18 at 21:48
Cristopher Taborda de PaulaCristopher Taborda de Paula
1315
asked Nov 23 '18 at 21:48
Cristopher Taborda de PaulaCristopher Taborda de Paula
1315
1315
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Make sure you load popper.js before bootstrap.min.js. See below:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Then the order for your Javascript should be as follows;
- jQuery
- popper.js
- bootstrap.js
answered Nov 23 '18 at 22:05
Peter SowahPeter Sowah
445211
add a comment |
You need to wrap the menu item a div with a class of "dropdown" and include the dropdown button as well.
Here is an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Here is the link to the Bootstrap docs, if you want to read more about dropdowns: Bootstrap 4 - Dropdowns
answered Nov 23 '18 at 22:07
DevticianDevtician
266
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453268%2fbootstrap-simple-dropdown-not-showing-at-all%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Make sure you load popper.js before bootstrap.min.js. See below:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Then the order for your Javascript should be as follows;
- jQuery
- popper.js
- bootstrap.js
answered Nov 23 '18 at 22:05
Peter SowahPeter Sowah
445211
add a comment |
Make sure you load popper.js before bootstrap.min.js. See below:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Then the order for your Javascript should be as follows;
- jQuery
- popper.js
- bootstrap.js
answered Nov 23 '18 at 22:05
Peter SowahPeter Sowah
445211
add a comment |
Make sure you load popper.js before bootstrap.min.js. See below:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Then the order for your Javascript should be as follows;
- jQuery
- popper.js
- bootstrap.js
answered Nov 23 '18 at 22:05
Peter SowahPeter Sowah
445211
Make sure you load popper.js before bootstrap.min.js. See below:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Then the order for your Javascript should be as follows;
- jQuery
- popper.js
- bootstrap.js
answered Nov 23 '18 at 22:05
Peter SowahPeter Sowah
445211
answered Nov 23 '18 at 22:05
Peter SowahPeter Sowah
445211
answered Nov 23 '18 at 22:05
Peter SowahPeter Sowah
445211
answered Nov 23 '18 at 22:05
Peter SowahPeter Sowah
445211
445211
add a comment |
add a comment |
You need to wrap the menu item a div with a class of "dropdown" and include the dropdown button as well.
Here is an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Here is the link to the Bootstrap docs, if you want to read more about dropdowns: Bootstrap 4 - Dropdowns
answered Nov 23 '18 at 22:07
DevticianDevtician
266
add a comment |
You need to wrap the menu item a div with a class of "dropdown" and include the dropdown button as well.
Here is an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Here is the link to the Bootstrap docs, if you want to read more about dropdowns: Bootstrap 4 - Dropdowns
answered Nov 23 '18 at 22:07
DevticianDevtician
266
add a comment |
You need to wrap the menu item a div with a class of "dropdown" and include the dropdown button as well.
Here is an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Here is the link to the Bootstrap docs, if you want to read more about dropdowns: Bootstrap 4 - Dropdowns
answered Nov 23 '18 at 22:07
DevticianDevtician
266
You need to wrap the menu item a div with a class of "dropdown" and include the dropdown button as well.
Here is an example:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu">
<span class="dropdown-item-text">Dropdown item text</span>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Here is the link to the Bootstrap docs, if you want to read more about dropdowns: Bootstrap 4 - Dropdowns
answered Nov 23 '18 at 22:07
DevticianDevtician
266
answered Nov 23 '18 at 22:07
DevticianDevtician
266
answered Nov 23 '18 at 22:07
DevticianDevtician
266
answered Nov 23 '18 at 22:07
DevticianDevtician
266
266
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453268%2fbootstrap-simple-dropdown-not-showing-at-all%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
