How to make text label regular font (not bold) in Bootstrap?

I'm building a form using Bootstrap. Some of the fields are read only so the value is displayed a text (not an input field).

I want the label on the left to be bold and the value on the right to be regular (not bold).

Here's the code and a screenshot ... what is the correct way to have the value on the right display as regular font (not bold)?

screenshot of web page

 <form> <div> <div> <label for="inputAppID">App Name</label> <div> <label>Stephen's Library</label> </div> </div> <div> <label for="inputTableName">DB Connection</label> <div> <label>Stephen's Library DB Connection</label> </div> </div> <div> <label for="inputTableName">DB Table Name</label> <div> <label><%=entityDefDTO.getTableName()%></label> </div> </div> <div> <label for="inputEntityName">Entity Name</label> <div> <input type="text" placeholder="ex. Book"> </div> </div> <div> <label for="inputEntityName">Entity Name Plural</label> <div> <input type="text" placeholder="ex. Books"> </div> </div>
</div>
4

4 Answers

use:

font-weight-bold

like:

App Name Stephen's Library

 <div> <label for="inputTableName">DB Connection</label> <div> <label>Stephen's Library DB Connection</label> </div> </div> <div> <label for="inputTableName">DB Table Name</label> <div> <label><%=entityDefDTO.getTableName()%></label> </div> </div> <div> <label for="inputEntityName">Entity Name</label> <div> <input type="text" placeholder="ex. Book"> </div> </div> <div> <label for="inputEntityName">Entity Name Plural</label> <div> <input type="text" placeholder="ex. Books"> </div> </div>
</div>

You may put the class "font-weight-bold" for label on the left to be bold and the "font-weight-normal" for the value on the right to be regular (not bold).

<p>Bold text.</p>
<p>Bolder weight text (relative to the parent element).</p>
<p>Normal weight text.</p>
<p>Light weight text.</p>
<p>Lighter weight text (relative to the parent element).</p>
<p>Italic text.</p>
1

After learning more, I see that the only CSS that is used by the project is this ...

For my problem text, the label tag has font-weight: 700; ... so it turns out the font displayed is not actually "bold" but has a high font weight.

I was able to get the desired effect by adding style = "font-weight:300" to the desired label.

use this

<label for="Gender">Gender :</label>

worked for me

0

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

You Might Also Like