Angular Project: Remove unused components in Bootstrap

Feature Image: How I Customized Bootstrap in Angular Project
Read progress

Lockdown is for Our Safety
  • Stay at home 🏡
  • Wash your hands frequently 🧼
  • Maintain social distancing 🤝❌
  • Avoid touching eyes, nose and mouth ☹
More Info

  • Home
  • Blog
  • How I Customized Bootstrap in Angular Project

How I Customized Bootstrap in Angular Project

Easy navigation to:

I have been using bootstrap since I started UI development. It has almost all the required classes as well as components to start a project from scratch.

In this post, I will explain how to add bootstrap to our angular project and add only the components required.


  1. You must have an existing angular project with SCSS. Want to create new? Try ng new my-first-project and follow straight forward instructions.
  2. This is posted keeping Bootstrap v4.3.1 in mind.

1. Install Bootstrap

Run below command. This will install the latest bootstrap version.

npm i -S bootstrap

2. Include Bootstrap

Create a file with name _bootstrap-needed.scss under /src/ and copy-paste the below code into the same file.

 * Bootstrap v4.3.1 (
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (

 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
 @import "~bootstrap/scss/type";
//  @import "~bootstrap/scss/images";
//  @import "~bootstrap/scss/code";
 @import "~bootstrap/scss/grid";
//  @import "~bootstrap/scss/tables";
 @import "~bootstrap/scss/forms";
 @import "~bootstrap/scss/buttons";
//  @import "~bootstrap/scss/transitions";
//  @import "~bootstrap/scss/dropdown";
//  @import "~bootstrap/scss/button-group";
//  @import "~bootstrap/scss/input-group";
//  @import "~bootstrap/scss/custom-forms";
 @import "~bootstrap/scss/nav";
 @import "~bootstrap/scss/navbar";
//  @import "~bootstrap/scss/card";
//  @import "~bootstrap/scss/breadcrumb";
//  @import "~bootstrap/scss/pagination";
//  @import "~bootstrap/scss/badge";
//  @import "~bootstrap/scss/jumbotron";
//  @import "~bootstrap/scss/alert";
//  @import "~bootstrap/scss/progress";
//  @import "~bootstrap/scss/media";
//  @import "~bootstrap/scss/list-group";
//  @import "~bootstrap/scss/close";
//  @import "~bootstrap/scss/toasts";
//  @import "~bootstrap/scss/modal";
//  @import "~bootstrap/scss/tooltip";
//  @import "~bootstrap/scss/popover";
//  @import "~bootstrap/scss/carousel";
//  @import "~bootstrap/scss/spinners";
 @import "~bootstrap/scss/utilities";
//  @import "~bootstrap/scss/print";

Keep the required components uncommented and the rest commented. In my case, I will be needed Navigation, Forms & Grids. So, I have only kept them uncommented. In your case, figure out!

Once our customized bootstrap file is ready. Let go to the final step.

3. Import customized bootstrap file in you base SCSS file (styles.scss)

Usually, styles.scss will be the default file comes along with the project unless you rename it.

@import "bootstrap-needed";

Use above code, to import the customized SCSS file & that’s it! You are ready to use now!

I hope you like this post. Here is the demo repository for your reference.

Please share & subscribe for more post like this.

Masoom Ul Haq S logo
About author
Masoom Ul Haq S

Masoom is a Front-end Developer, a UX Engineer and Freelancer based in Bangalore, India. Like to develop differential and effective User Experiences for digital products using an amalgamation of latest technology and best practises.

More on "Angular"

Be the first to know about my upcoming writings.

By using our site, you acknowledge that you have read and understand our Privacy Policy.