CODEWITHSUNDEEP
csstwitter-bootstrap-3
JAF
JAF

Reputation: 350

Can't change font family in boostrap "well" component

I have a well boostrap component containing some text

 <div class="well well-sm" id="well_job">

                            <p>
                               <h5><%= "#{job.job_description}" %></h5>
                            </p>
                            <p>
                              <h6><%= "#{job.from_date} -" %></h6><h6><%= "#{job.to_date}" %></h6>
                            </p>
                    </div>

when I try to select it by one of its classes to change the font family it doesn't change(I tried to select it by .well-sm but nothing changes as well):

    .well{
      font-family: 'Rock Salt', cursive;
}

How can I select the well and change the font-size to its inside text?

Upvotes: 2

Views: 382

Answers (2)

KrisD
KrisD

Reputation: 483

First of all, your syntax is incorrect as you cannot place a header tag inside a paragraph tag. The following syntax 

<p>
  <h1>Some Header</h1>
</p>

will be interpreted by the browsers as

<p></p>
   <h1>Some Header</h1>
</p>

and you will end up having an unexpected </p> end tag. Validating your html will lead to this error:

No p element in scope but a p end tag seen.

Back to your question, in case of using header tags you also need to specify a style targeting that specific header tag.

.well {
  font-size: 14px;
}
.well h5 {
  font-size: 24px;
}

Upvotes: 2

pedrodj46
pedrodj46

Reputation: 161

Have you import the font into the tag <head>?

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>

Then for change the font size:

.well{
    font-family: 'Rock Salt', cursive;
}
.well p h5{
    font-size:30px;
}
.well p h6{
    font-size:20px;
}

Upvotes: 0

Related Questions