How can I fix Buttongroup Dropdowntoggle-Buttons in Bootstrap?


Tags: html,css,asp.net-mvc,twitter-bootstrap

Problem :

I’m using Bootstrap 3 in my MVC-Project. In my _Layout page I’m using a buttongroup to do something like the example.

Example:

<div class="btn-group">
  <button type="button" class="btn btn-primary">MyButton</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Hello</a></li>
    <li><a href="#">World</a></li>
  </ul>
</div>

(Surce: http://www.w3schools.com/bootstrap/bootstrap_button_groups.asp)

The issue is the button looks like this:

Screenshot of the Buttongroup

How can I fix this?

Edit: I need a solution without using a CDN or downloading a custom Bootstrap CSS-File



Solution :

I threw it into a CDN and it was fine. So that means it is your CSS. I would try adjusting the padding and/or the height of the .dropdown-toggle


    CSS Howto..

    Show warnings screen resolution

    How to make an image fully flexible in terms of display size?

    How do I keep my footer text from appearing outside my footer

    How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)

    How to create this image using CSS?

    How can I replicate something similar to querySelector in browsers like IE 7 and 6?

    How to remove a element after animation?

    How to create Curved & Overlapping Menu Tabs in CSS

    How to Convert this Inline CSS to External CSS using just a single class?

    How to layout ASP.Net RadioButtons with Images?

    How to change expand div after click and collapse it after another click?

    How to create CSS/JavaScript circles grid

    CSS - How to use by ID and by class

    How to Tie Events to CSS

    How to force html element click wireup from js in dynamically loaded page

    how to apply two kind of css to one control, one for internet explorer, another for firefox and chrome

    How to find elements and siblings within a tree

    CSS How to add a button below an image [closed]

    How do I get this CSS text-decoration override to work?

    CSS - How it works

    How to hide first level span element by CSS “>” selector

    How to have video faded when paused - HTML

    How to refine CSS media types and properties?

    How can I make browser scale image frames according to CSS before loading actual images into frames?

    How to stack a div absolutely on top of table cells

    How to correctly override inaccessible HTML content with CSS?

    How to style 3 (div) boxes using CSS

    React & CSS Modules: how to style components without assuming their content

    How to center div the whole screen page using css