Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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
Rich Donnellan
25,780 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,245 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

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">