skip to Main Content

Based on the code below, how can I change the font size and format?

For the size I tried:

Approach 1 (didn’t work)

.text-large {
  font-size: 150%;
}

Approach 2 (didn’t work either)

html {
    font-size: 16px;
} 

Code:

a {
  color: white;
}

.footer-background {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #1c2a48;
}

.logo,
.nav {
  margin-bottom: 10px;
}

.nav-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav .external-link {
  padding: 2px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="footer-background container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">

        <li><a class="external-link" href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>

        <li><a class="external-link" href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a></li>

        <li><a class="external-link" href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>

        <li><a class="external-link" href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Use</a></li>

        <li><a class="external-link" href="https://www.b.org/Terms/Pages/Default.aspxx">Accessiblity Statement</a></li>

        <li><a class="external-link" href="https://lp.constantcontactpages.com/su/ErJFVZz/BrowardLife">Subscribe</a></li>

      </ul>
    </div>
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a class="external-link" href="https://b.granicus.com/ViewPublisher.php?view_id=15">Watch Meetings</a></li>
        <li><a class="external-link" href="https://www.b.org/Pages/Welcome.aspx">Copyrights 2022, Government</a></li>
      </ul>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
        <ul class="nav nav-pills">

        </ul>
      </div>
    </div>
  </div>

</div>

2

Answers


  1. I added these two classes to your css, and was able to change the font to Times New Roman, and increase the font-size. Add the class "test" to your li

    <!-- add to your css -->
    ul.nav-pills {
     font-family: "Times New Roman", Times, serif;} !important
    
    .test {
     font-size: 24px;}
    
    <!-- add class to yur li -->
    <li class="test"><a class="external-link" href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>
    

    https://jsfiddle.net/jasonbruce/xefkmg20/3/

    Login or Signup to reply.
  2. Bootstrap defaults to 16px = 1rem. Given that information I added your two container classes to the CSS and made everything 2rem with that specificity.

    .footer-background.container-fluid {
      font-size: 2rem;
    }
    
    a {
      color: white;
    }
    
    .footer-background {
      padding-top: 20px;
      padding-bottom: 20px;
      background-color: #1c2a48;
    }
    
    .logo,
    .nav {
      margin-bottom: 10px;
    }
    
    .nav-pills {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .nav .external-link {
      padding: 2px;
    }
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <div class="footer-background container-fluid">
      <div class="row">
        <div class="col-xs-6 col-sm-4 center-block">
          <ul class="nav nav-pills">
            <li><a class="external-link" href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>
            <li><a class="external-link" href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a></li>
            <li><a class="external-link" href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>
            <li><a class="external-link" href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Use</a></li>
            <li><a class="external-link" href="https://www.b.org/Terms/Pages/Default.aspxx">Accessiblity Statement</a></li>
            <li><a class="external-link" href="https://lp.constantcontactpages.com/su/ErJFVZz/BrowardLife">Subscribe</a></li>
          </ul>
        </div>
        <div class="col-xs-6 col-sm-4 center-block">
          <ul class="nav nav-pills">
            <li><a class="external-link" href="https://b.granicus.com/ViewPublisher.php?view_id=15">Watch Meetings</a></li>
            <li><a class="external-link" href="https://www.b.org/Pages/Welcome.aspx">Copyrights 2022, Government</a></li>
          </ul>
        </div>
        <div class="col-xs-12 col-sm-4">
          <div class="text-white" style="padding-top: 3rem; text-align: center;">
            <ul class="nav nav-pills">
            </ul>
          </div>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search