Can't edit bootstrap rules. Please Help!

#1

I’m customizing a bootstrap template. I want to change the text-decoration to normal case instead of uppercase that comes with template by default.

Here is the html element with its container:

 <header class="masthead bg-primary text-white text-center">
    <div class="container d-flex align-items-center flex-column">

      <!-- Masthead Avatar Image -->
      <img class="masthead-avatar mb-5" src="img/avataaars.svg" alt="">

      <!-- Masthead Heading -->
      <h1 class="masthead-heading text-uppercase mb-0">Hi. I'm Anas Ansari</h1>

      <!-- Icon Divider -->
      <div class="divider-custom divider-light">
        <div class="divider-custom-line"></div>
        <div class="divider-custom-icon">
          <i class="fas fa-star"></i>
        </div>
        <div class="divider-custom-line"></div>
      </div>

      <!-- Masthead Subheading -->
      <p class="masthead-subheading font-weight-light mb-0">Graphic Artist - Web Designer - Illustrator</p>

    </div>
  </header>

Here is the css code related all the classes in the header element:

.masthead {
  padding-top: calc(6rem + 74px);
  padding-bottom: 6rem;
}

.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
}

.masthead .masthead-subheading {
  font-size: 1.25rem;
}

.masthead .masthead-avatar {
  width: 15rem;
}

@media (min-width: 992px) {
  .masthead {
    padding-top: calc(6rem + 104px);
    padding-bottom: 6rem;
  }
  .masthead .masthead-heading {
    font-size: 4rem;
    line-height: 3.5rem;
  }
  .masthead .masthead-subheading {
    font-size: 1.5rem;
  }
}

I tried everything to override the default rules but nothing works. I tried giving !important I tried giving id. I tried increasing specificity. But nothing can change this goddamn to work. I have wasted 2 sleepless nights over this. Can you please help me?

#2

Delete text-uppercase in <h1 class="masthead-heading text-uppercase mb-0">Hi. I'm Anas Ansari</h1>.

Then it should look like this, which I think is what you’re looking for?

#3

Thanks @katieyang, it worked. Can you please tell me how to change it by selecting tags in seperate custom css file ?

#4

In CSS:

.masthead .masthead-heading {
  font-size: 2.75rem;
  line-height: 2.75rem;
  text-transform: none !important;
}

Result

#5

I tried the same but it is still not working. Why its working on your example while not on mine ? @katieyang

#6

Are you working in CodePen or a file? Whatever you’re working with, can you upload/provide the link? It’s hard to debug something I can’t work with.

1 Like
#7

I am providing you the website template link from where I downloaded it. Here:

https://blackrockdigital.github.io/startbootstrap-freelancer/

#8

Not sure if this is the issue, but are you modifying freelancer.min.css or something else? Are any other CSS changes in the document you’re editing showing?

#9

I overriding it by creating my own custom.css. No none.

#10

Are you linking to your custom.css in the HTML like so <link rel="stylesheet" type="text/css" href="custom.css"> at the top? (Also make sure it’s in the same folder as the HTML.) That might be the issue.

#11

I found the issue, @katieyang. I was linking the css file path wrong. It is working perfectly now. Thanks @katieyang. You saved me from sleepless nights.

#12

Yay, happy it was resolved :slight_smile: You’re very welcome.

1 Like
#13