Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Add custom CSS and JS – Bootstrap

Summary

Note: The code samples below are for Bootstrap 4.3.1. Please check the Bootstrap documentation to get the latest version of Bootstrap.

If you want to add custom CSS to your project, you can add a link element linking to your CSS file after the link element for the Bootstrap CSS file, like this:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="main.css">

If you want to add custom JS to your project, you can add a script element linking to your JS file after the script elements for the Bootstrap JS files, like this:

<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="main.js"></script>

Details

Adding your files after the Bootstrap files helps ensures that your code will override Bootstrap’s code (if necessary).

Exercises

There are no exercises for this lesson.

References

Introduction | Bootstrap Documentation

Back to: Bootstrap Reference > Bootstrap Setup