Using a separate stylesheet with Bootstrap 4

Using a separate stylesheet with Bootstrap 4
0.0 0

#1

Hello,

I am very new to coding and was wondering if anyone could give me a quick explanation on using a CSS stylesheet in conjunction with Bootstrap 4. I was under the impression that I could link the separate stylesheet beneath the Bootstrap link within the head element, however, the CSS stylings no longer show up after adding the Bootstrap links.

Any advice would be greatly appreciated. Thanks!


#2

Can you provide a link to your code where you are trying this, so we can check how you are doing it?

If the code is small (less than 50 lines), then just post it here as a reply or edit your original post with the code.

To enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

Hi there, This is the snippit of code where I’ve been trying to use the stylesheet with Bootstrap 4. Thank you for taking a look at it.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width initial-scale=1">
  <title>Specialty Cocktails</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" type="text/css" href="css/css.css">
    
</head>
<body>

#4

Are you sure on your local machine that the css.css file is in a sub folder called css and that sub folder is located in the same directory of the file this html code belongs?

Are you seeing any warnings/errors in your browser’s console (Ctrl+Shft+J in Chrome) about the css.css reference?


#5

I did not have the css.css file in a sub-folder. Now that I do, it seems to have solved the problem. I can’t believe the solution was so simple! Thank you for taking the time to answer my question. (=


#6

You did not have to put it in a subfolder, but because you were referecning it like it was, you either needed to move it to that subfolder or change your overall reference to the following and have left the css.css file in the same folder as your html file.

<link rel=“stylesheet” type=“text/css” href=“css.css”>