Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap 4 Basics (Retired) Building Forms with Bootstrap Custom CSS

Posted by John Shields
John Shields
7,477 Points

Why is nothing happening when I use custom css with bootstrap?

I'm on Bootstrap 4 Basics and trying to use custom css and nothing is happening. I have tried linking my css file several different ways and it's not changing anything. This is my link code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
  </head>

This is the element I'm trying to change:

<nav class="navbar navbar-dark bg-primary navbar-fixed-top">
      <div class="container">
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#speakers">Speakers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#schedule">Schedule</a>
      </li>
      <a class="navbar-brand pull-sm-right m-r-0 hidden-xs-down" href="http://www.teamtreehouse.com">Presented by Treehouse</a>
    </ul>

And this is my css

.navbar .navbar-brand {
  color: rgba(255, 255, 255, .85);
  font-size: 1rem;
  padding-top: .45rem;
}

Any help is appreciated. Seems like no matter what I do, nothing changes.

3 Answers

Rich Donnellan
MOD
Rich Donnellan
Treehouse Moderator 27,696 Points
Rich Donnellan
Rich Donnellan
Treehouse Moderator 27,696 Points

I suspect your relative path isn't correct, or your file isn't where you say it is. Hard to tell for sure without knowing your file structure. Try something like this (assuming your folder is nested):

<link rel="stylesheet" href="../css/custom.css">

The ../ goes back one folder to the root, then makes its way to css/, followed by the actual file.

Joel Bardsley
Joel Bardsley
31,248 Points
Joel Bardsley
Joel Bardsley
31,248 Points

It could be a specificity issue - bootstrap's default styles for .navbar-brand might be using a more specific selector which is taking precedence.

A quick look through the .css on the cdn bootstrap link shows that it uses the following selector:

.navbar-dark .navbar-brand {

}

So try changing your selector to match the above and see if that makes a difference.

Stephen Jones
Stephen Jones
6,148 Points
Stephen Jones
Stephen Jones
6,148 Points

I've personal just solved a similar issue as my file path was incorrect

I had:

<link rel="stylesheet" href="css/custom.css">

which is how it's done in the video but my css folder was capitalized so the path should be too:

<link rel="stylesheet" href="CSS/custom.css">