How to Change Bootstrap Default Colour Theme: Without writing Code.
Tags: bootstrap, howto, mobile, opensource
Published: 2018-05-23 14:47:02

---
title: How to Change Bootstrap Default Colour Theme: Without writing Code.
published: true
tags: Bootstrap, HowTo, Mobile,open source
canonical_url: https://fossnaija.com/how-to-change-bootstrap-default-colour-theme-without-writing-code/
---

[![bootstrap banner](https://i1.wp.com/fossnaija.com/wp-content/uploads/2018/05/bootstrap-banner.png?resize=665%2C311&ssl=1)](https://i1.wp.com/fossnaija.com/wp-content/uploads/2018/05/bootstrap-banner.png?ssl=1)

IMAGE: Bootsrap Banner/FossNaija

For those of y’all that don’t know what [bootstrap](https://getbootstrap.com/) is, bootstrap is one of the most amazing development that have come into front-end web development. It’s a responsive framework that helps to reduce development time by providing ready-to-use UI/UX components that can be easily imported into any website/application UI/UX design, while focusing more on content.

 

One thing to note about using bootstrap; is that websites/applications using the framework look somewhat similar (at least when using the default colour configurations and settings). It would take some style overriding (writing a lot of CSS) to actually create a truly customize version of the interface.

 

[![default_bootstrap_colour_scheme](https://i0.wp.com/fossnaija.com/wp-content/uploads/2018/05/deafault_bootstrap_site.png?resize=665%2C334&ssl=1)](https://i0.wp.com/fossnaija.com/wp-content/uploads/2018/05/deafault_bootstrap_site.png?ssl=1)

IMAGE: Default Bootstrap Colour Scheme/FossNaija

 

When you see the default colour scheme of the above site, no doubt it can easily be guessed that the site was designed using the bootstrap framework.

 

To save you the sweat of writing too much !important CSS code, in this post I’d show how you can download and use different bootstrap colour themes/templates to achieve that.

 

Let’s go…

 

In this post I’m assuming you have already set up a website using bootstrap that you want to change the theme.

 

I’ve set up one basic website for the purpose of this tutorial and it looks like this.

 

[![default_bootstrap_colour_scheme](https://i0.wp.com/fossnaija.com/wp-content/uploads/2018/05/deafault_bootstrap_site.png?resize=665%2C334&ssl=1)](https://i0.wp.com/fossnaija.com/wp-content/uploads/2018/05/deafault_bootstrap_site.png?ssl=1)

IMAGE: Default Bootstrap Colour Scheme/FossNaija

 

If you are familiar with bootstrap you’d notice the different default colours available: like blue buttons, alerts, navbar, jumbotron, backgrounds, etc.

 

Now let get another colour scheme.

 

Head to [Bootswatch.com](https://bootswatch.com/) and select the colour scheme of your choice.

 

[![bootswatch colour themes](https://i1.wp.com/fossnaija.com/wp-content/uploads/2018/05/bs-theme-5.png?resize=665%2C251&ssl=1)](https://i1.wp.com/fossnaija.com/wp-content/uploads/2018/05/bs-theme-5.png?ssl=1)

IMAGE: Some Bootswatch Colour Themes / FossNaija

 

I would be using the **Cyborg** theme for this post. After selecting the colour scheme you want, then you can download the CSS (bootrstrap.min.css) file to your computer.

 

[![bootswatch cyborg theme](https://i2.wp.com/fossnaija.com/wp-content/uploads/2018/05/bs-cyborg-theme.png?resize=466%2C508&ssl=1)](https://i2.wp.com/fossnaija.com/wp-content/uploads/2018/05/bs-cyborg-theme.png?ssl=1)

IMAGE: Bootswatch Cyborg theme/FossNaija

 

Then move it to your project default bootstrap file location and replace the **bootstrap.min.css** file (i.e. you can delete the bootstrap original file).

 

**NB:** Ensure that it is the file name pointed to by the link reference in your project HTML files .

 

[![bootstrap css link code](https://i1.wp.com/fossnaija.com/wp-content/uploads/2018/05/bootstrap-css-link-code.png?resize=665%2C46&ssl=1)](https://i1.wp.com/fossnaija.com/wp-content/uploads/2018/05/bootstrap-css-link-code.png?ssl=1)

IMAGE: Bootstrap css link code/FossNaija

 

 

 

Then reload the page. The new colour scheme should be loaded now.

 

[![bootstrap new colour theme](https://i2.wp.com/fossnaija.com/wp-content/uploads/2018/05/new-theme.png?resize=665%2C310&ssl=1)](https://i2.wp.com/fossnaija.com/wp-content/uploads/2018/05/new-theme.png?ssl=1)

IMAGE: Bootstrap new colour theme /FossNaija.

 

Happy CODING!!!

 

Download the Basic website code [HERE](https://www.dropbox.com/s/sw27ej591kjn5t1/bootstrap_colour_scheme.zip?dl=0).

The post [How to Change Bootstrap Default Colour Theme: Without writing Code.](https://fossnaija.com/how-to-change-bootstrap-default-colour-theme-without-writing-code/) appeared first on [Foss Naija](https://fossnaija.com).