CODEWITHSUNDEEP
csstwitter-bootstrap
Craig
Craig

Reputation: 18734

Display Text in Bootstrap

At the moment, I am displaying text from my model on the screen:

<div class="col-xs-6 col-lg-4">
    @Model.AccountNumber
</div>

But I want to add a css class to this bit of text. How can I add a css class to the text? The class simply bolds the text, but I don't want to add <strong></strong> to all the areas I want to bold. I want to add a class, so I can change it later.

I have tried:

<div class="col-xs-6 col-lg-4">
     <span class="display_text">@Model.AccountNumber</span>
</div>

But it seems to make no difference.

My CSS:

.display_text{
    font-size: 200%;
}

I created a fiddle, and it works, so something else is wrong. https://jsfiddle.net/he7oj42u/

Upvotes: 0

Views: 717

Answers (6)

Craig
Craig

Reputation: 18734

The issue was that my .less file was not being copied to my .min.css file, due to a upgrade from Visual Studio 2013 to 2015. I noticed that in the console, the class was not displayed. I checked the .min.css and it didn't have the updated from the .less file.

Upvotes: 0

varsha desai
varsha desai

Reputation: 21

Your second option should work. clean you cache and refresh the page again, also check if you are adding external css. its path is right or not.

Upvotes: 0

Ali Adravi
Ali Adravi

Reputation: 22833

Why you are using two classes, col-xs-6 and col-lg-4?

Only second will be applied, use

<div class="col-lg-4 display_text">
    @Model.AccountNumber
</div>

Upvotes: 0

braren
braren

Reputation: 163

You should try css tag

font-weight: bold;

<style>
.display_text{
    font-weight: bold;
}
</style>

<span class="display_text">@Model.AccountNumber</span>

Upvotes: 0

beautifulcoder
beautifulcoder

Reputation: 11340

You can add the class directly on the div:

<div class="col-xs-6 col-lg-4 display_text">
    @Model.AccountNumber
</div>

If that's not working, make sure the property is not getting overridden by bootstrap. Your CSS strategy should have your custom CSS on top of bootstrap's.

Upvotes: 1

Sean
Sean

Reputation: 2729

font-size: 200%; changes the size of the font, it doesn't bold it.

Try instead

font-weight: bold;

Upvotes: 1

Related Questions