title: How can I force text to "normal" (not bold) using css?
body: <p>I have a class that I'm using to make some text navy and large:</p>
  
  <pre><code>.sectiontext {
      color: navy !important;
      font-size: large;
  }
  </code></pre>
  
  <p>I apply it to elements like so:</p>
  
  <pre><code>&lt;label class="sectiontext"&gt;Select a Unit&lt;/label&gt;
  . . .
  &lt;h4 class="sectiontext"&gt;Specify Recipients&lt;/h4&gt;
  </code></pre>
  
  <p>The problem is that when I apply it to a label, it makes that text bold. I tried adding the following line to the sectiontext class:</p>
  
  <pre><code>font-weight: normal !important;
  </code></pre>
  
  <p>...but it makes no difference; I don't want to use "h4" instead of "label" for some bits of text because h4 always contains a "line break"; I wnat to be able to use this text style prior to a "select" element and several checkboxes, too, and thus not have the text "break"</p>
  
  <p>But even with the "!important" added to the sectiontext class, the text remains bold. For example, compare the "Select a Unit" and "Select Report[s]" labels here with the H4 "Specify Recipients" and "Generate and Email Report" text:</p>
  
  <p><a href="https://i.stack.imgur.com/rIFX8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rIFX8.png" alt="enter image description here"></a></p>
  
  <p>What can I do to have a label that is not bold?</p>
  
  <h2>UPDATE</h2>
  
  <p>The only custom CSS I have is:</p>
  
  <pre><code>body {
      padding-top: 50px;
      padding-bottom: 20px;
      background-color: lightyellow;
  }
  
  /* Set padding to keep content from hitting the edges */
  .body-content {
      padding-left: 15px;
      padding-right: 15px;
  }
  
  /* Override the default bootstrap behavior where horizontal description lists 
     will truncate terms that are too long to fit in the left column 
  */
  .dl-horizontal dt {
      white-space: normal;
  }
  
  /* Set width on the form input elements since they're 100% wide by default */
  input,
  select,
  textarea {
      max-width: 280px;
  }
  
  .containerforplatypus {
      border: 2px solid #ccc;
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin-bottom: 8px;
      padding: 6px;
  }
  
  .margin4horizontal {
      margin-left: 4px;
      margin-right: 4px;
  }
  
  .fancyorangetext {
      text-shadow: 0 0 6px orange !important;
      font-size: xx-large;
  }
  
  .leftmargin8 {
      margin-left: 8px !important;
  }
  
  .sectiontext {
      color: navy !important;
      font-size: large;
      font-weight: normal !important;
  }
  </code></pre>
  
  <p>...otherwise, it's just these bootstrap classes that are being used:</p>
  
  <pre><code>jumbotron
  row
  col-md-6
  col-md-12
  control-label
  form-control
  h3
  h4
  btn btn-primary
  btn btn-sm
  </code></pre>
  
  <p>The entire HTML for those two problematic labels (in context) is:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12" name="unitsCheckboxDiv"&gt;
          &lt;label class="sectiontext"&gt;Select a Unit&lt;/label&gt;
          &lt;select class="form-control, dropdown"&gt;
              @foreach (var field in units)
              {
                  &lt;option id="selItem_@(field.unit)" value="@field.unit"&gt;@field.unit&lt;/option&gt;
              }
          &lt;/select&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-12" name="unitsCheckboxDiv"&gt;
          &lt;div class="containerforplatypus"&gt;
              &lt;label class="sectiontext"&gt;Select Report[s]&lt;/label&gt;
              @foreach (var rpt in reports)
              {
                  &lt;input class="leftmargin8" id="ckbx_@(rpt.report)" type="checkbox" value="@rpt.report" /&gt;@rpt.report
              }
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>UPDATE 2</h2>
  
  <p>It works now, with no change; it first worked on trying fmz's suggestion, but then I tried my previous approach again, and it now works, and even without the "!important" marker:</p>
  
  <pre><code>.sectiontext {
      color: navy !important;
      font-size: large;
      /*font-weight: 400 !important; &lt;= works */
      /*font-weight: normal !important; &lt;= works now, as does the rule below */
      font-weight: normal;
  }
  </code></pre>