Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Split dropdown buttons not the same size

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.

enter image description here

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>
like image 701
foklepoint Avatar asked Feb 14 '13 04:02

foklepoint


People also ask

How to separate two buttons in html?

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.

How to separate 2 buttons in 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.

How to use dropdown Bootstrap?

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.


1 Answers

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.

like image 113
Adam Taylor Avatar answered Nov 05 '22 23:11

Adam Taylor