CODEWITHSUNDEEP
cssasp.net-mvcasp.net-mvc-3twitter-bootstrap
aknuds1
aknuds1

Reputation: 67997

Twitter Bootstrap changes rendering of fieldset legend, why?

In this ASP.NET MVC 3 project, I've just started experimenting with Twitter Bootstrap, but I notice it messes with the rendering of <fieldset> legends. What is happening to the legend rendering here, and how do I get it back to normal? That is, I want the right line to be vertically aligned with the left line again.

The standard legend rendering, pre-Bootstrap, to the left, Bootstrap-affected rendering to the right:

Normal legend Twitter Bootstrap legend

Update: I've found out what's causing the broken rendering, at least: Bootstrap changes the legend's width property to 100% and the border-bottom property to '1px solid'. This causes the original border to the right of the legend to be erased and a border beneath it to appear instead. The question is how this is meant to work. Maybe MVC's CSS (Site.css) is interfering with that of Bootstrap?

Upvotes: 8

Views: 18215

Answers (1)

MikeM
MikeM

Reputation: 27405

If you switch your stylesheet declarations so that the bootstrap is last it should correct the issue, ie:

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/css/bootstrap.min.css")" rel="stylesheet" type="text/css" />

Bootstrap styles

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 27px;
    font-size: 19.5px;
    line-height: 36px;
    color: #333;
    border: 0;
    border-bottom: 1px solid #E5E5E5;
}

default MVC Style.css styles 

fieldset {
    border: 1px solid #DDD;
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend {
    font-size: 1.2em;
    font-weight: bold;
}

end result should look like:

enter image description here

vs the other way around (MVC default styles declared last)

enter image description here

Alternatively, get rid of the MVC stylesheet altogether and use bootstrap along with whatever custom styles you need.

Upvotes: 8

Related Questions