Note that there are some explanatory texts on larger screens.

plurals
  1. POapplying additional css with bootstrap
    primarykey
    data
    text
    <p>I am using twitter bootstrap. I and created additional css file which has website specific styling inside <strong>"app.css"</strong> . </p> <p>And created another <strong>site.css</strong> and written following code inside it-</p> <pre><code>@import url('../Content/bootstrap/css/bootstrap.min.css'); @import url('../Content/bootstrap/css/bootstrap-responsive.min.css'); @import url('../Content/bootstrap/css/app.css'); </code></pre> <p>And I used site.css in my layout file. </p> <p>And inside app.css written following styling-</p> <pre><code>.margin0 { margin:0; } .text-span{ width: 100%; } .text-center { text-align:center; } </code></pre> <p>like that.</p> <p>And then i'm applying above classes with bootstrap styling as-</p> <pre><code>&lt;div class="span4"&gt; &lt;span class="text-span hideOverflow"&gt;@Html.ActionLink(item.Name, "Details", new { id = item.Id }, new { @class = "JumpLinks", @style = "font-size:13px;font-weight:bold;" })&lt;/span&gt; &lt;span style="color: #ADADAD; font-size: 11px;" class="text-span margin0"&gt;@Html.DisplayFor(modelItem =&gt; item.StartDate)&lt;/span&gt; &lt;/div&gt; </code></pre> <p>Now problem is that my <strong>margin0</strong> is not applying as I want. <strong>The bootstrap style effect overriding my css effect</strong>. And I don't want let it happen. How to resolve this problem ?</p> <p>I inspected the element then my class is overridden by bootstraps below class-</p> <pre><code>.row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 30px; margin-left: 2.127659574468085%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload