ASP.NET MVC 4 - Twitter Bootstrap Rendering Issue

Question

I am using Twitter's Bootstrap in an MVC 4 project, and it basically works, however the styling is off. For example, this is what a popover should look like:

enter image description here

However, the button renders incorrectly:

enter image description here

and the popover arrow is not aligned properly:

enter image description here

Any thoughts on what might be happening? Here is my .cshtml file:

<link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css"/>
<script src="@Url.Content("~/Scripts/bootstrap.js")"></script>

<div class="well">  
<a href="#" id="example" class="btn btn-danger" rel="popover" data-original-title="Twitter Bootstrap Popover">hover for popover</a>  
</div>  

<script>
    $(function () {
        $("#example").popover();
    });  
</script>

user1032657 · Accepted Answer · 2012-05-23 02:39:57Z

3

Found the answer.. it was due to CSS conflicts with the default Site.css file. body had a top border of 10 px, which was causing the misalignment of the popover Also, i changed <a to a <button and the button rendered correctly.

answered May 23, 2012 at 2:39

user1032657

2,4816 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ASP.NET MVC 4 - Twitter Bootstrap Rendering Issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related