CODEWITHSUNDEEP
asp.net-mvctwitter-bootstrapasp.net-mvc-4
user1032657
user1032657

Reputation: 2471

ASP.NET MVC 4 - Twitter Bootstrap Rendering Issue

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>

Upvotes: 2

Views: 2587

Answers (1)

user1032657
user1032657

Reputation: 2471

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.

Upvotes: 3

Related Questions