I am having the weirdest error ever! I am using code line by line from twitter bootstrap components page for the dropdown and I am not getting the same results. Here is what my drop down is looking like.
I have NOT overriden any bootstrap css. I even removed ALL stylesheets and used JUST the button and I still get the same result.
PS: I am using rails will-paginate-bootstrap plugin..which I assume has all necessary bootstrap files
Here is my HTML output
<div class="btn-group">
<a class="btn btn-primary" href="/user/profile/test_user">
<i class="icon-user icon-white"></i>
test_user
</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
</ul>
</div>
Example ExplainedUse any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
There are several methods that we can use to put spacing between two buttons. But the easiest way to achieve this is by using the margin property. You can either apply margin-right on the first button or margin-left on the second button. Both ways you can achieve the same task.
To open the dropdown menu, use a button or a link with a class of . dropdown-toggle and the data-toggle="dropdown" attribute. The . caret class creates a caret arrow icon (), which indicates that the button is a dropdown.
I'm pretty sure you're not using the HTML5 doctype (<!DOCTYPE html>
).
From Bootstrap's documentation:
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With