CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Wihan Uys
Wihan Uys

Reputation: 95

How to change font-weight in Jumbotron Bootstrap 3

How do I change the font weight of the .jumbotron and paragraphs in .jumbotron? I do not want my font-weight so big.

HTML:

<header>
    <div class="container-fluid landing-page">
        <div class="jumbotron vertical-center">
            <h1>Embroider<span class="eze">eze</span></h1>
            <p>Branding <span class="eze">&#9679;</span> Promotional Items <span class="eze">&#9679;</span> Reflective Tape <span class="eze">&#9679;</span> Gifts</p>
        </div>
    </div>
</header>

CSS:

.jumbotron {
    color: #dbdbdb;
    background-color: transparent;
    text-align: center;
    margin-top: 300px;
    font-weight: 200;
}

Also, font size changes do not work.

Upvotes: 3

Views: 5108

Answers (3)

MarcoZen
MarcoZen

Reputation: 1673

Update for adjusting font weight in a BootStrap 4 Jumbotron:

Similar syntax - say you create a class in your css file as below;

   .jumbotron_text { font-weight: 600; }

And apply it to the p tag inside your jumbotron div as below;

    <div class="jumbotron">
      <p class=jumbotron_text">Some text here </p>
    </div>

Notice I use 600 ( the range is 100,200, 300, 400, 500,600, 700, 800,900 ).

Most fonts map normal to 500 and bold to 700.

Other numbers are an approximation by the browser unless its available in the font specifically.

Upvotes: 1

Nikhil
Nikhil

Reputation: 3950

you can check this:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .jumbotron h1 {
      color: #dbdbdb;
      background-color: transparent;
      text-align: center;
      margin-top: 100px;
      font-weight: 200;
      font-size: 20px;

    }

    .jumbotron p {
      color: #dbdbdb;
      background-color: transparent;
      text-align: center;
      margin-top: 100px;
      font-weight: 200;
      font-size: 20px;

    }
  </style>
</head>

<body>
  <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
      <![endif]-->
  <header>
    <div class="container-fluid landing-page">
      <div class="jumbotron vertical-center">
        <h1>Embroider
          <span>eze</span>
        </h1>
        <p>Branding
          <span>&#9679;</span> Promotional Items
          <span>&#9679;</span> Reflective Tape
          <span>&#9679;</span> Gifts</p>
      </div>
    </div>
  </header>
</body>

</html>

Upvotes: 1

PDSSandeep
PDSSandeep

Reputation: 189

By Default, bootstrap has some styles for h1 and P. If you want to override try with this

.jumbotron h1{

font-weight: 800;

}

.jumbotron p{

font-weight: 800;

}

Upvotes: 1

Related Questions