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

Admin 1
Viewed 6801

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 id="saveEntityDefForm" class="form-horizontal">


    <div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="inputAppID">App Name</label>
            <div class="col-sm-10">
                <label class="control-label">Stephen's Library</label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inputTableName">DB Connection</label>
            <div class="col-sm-10">
                <label class="control-label">Stephen's Library DB Connection</label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inputTableName">DB Table Name</label>
            <div class="col-sm-10">
                <label class="control-label"><%=entityDefDTO.getTableName()%></label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inputEntityName">Entity Name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputEntityName" placeholder="ex. Book">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2" for="inputEntityName">Entity Name Plural</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputEntityName" placeholder="ex. Books">
            </div>
        </div>
</div>
bootstrap-4 twitter-bootstrap
3 Answers

use:

font-weight-bold

like:

App Name Stephen's Library 

    <div class="form-group">
        <label class="control-label col-sm-2 font-weight-bold" for="inputTableName">DB Connection</label>
        <div class="col-sm-10">
            <label class="control-label">Stephen's Library DB Connection</label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2  font-weight-bold" for="inputTableName">DB Table Name</label>
        <div class="col-sm-10">
            <label class="control-label"><%=entityDefDTO.getTableName()%></label>
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2  font-weight-bold" for="inputEntityName">Entity Name</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputEntityName" placeholder="ex. Book">
        </div>
    </div>

    <div class="form-group">
        <label class="control-label col-sm-2  font-weight-bold" for="inputEntityName">Entity Name Plural</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputEntityName" placeholder="ex. Books">
        </div>
    </div>
</div>
user_62856000

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 class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>

user_128926500

After learning more, I see that the only CSS that is used by the project is this http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ...

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.

Admin1
Related