customizing bootstrap
May 24 2019 01:54pm | | Share

Customizing Bootstrap Components in Angular Apps

By Iuri Strelet

Bringing Bootstrap UI into a project

There are multiple approaches on how to add Bootstrap stylesheets to Angular apps. In this article I will try to examine the most common approaches – I’ll be looking at advantages and disadvantages of each method.

 

Let’s generate a sample Angular app called ‘dune’ by using following command (the breakdown of each parameter is below):

 

ng n  dune -p dune --experimentalIvy=true --style=scss --routing=false  &&  cd dune && ng s - - aot

 

  1. Generate app dune
  2. Use prefix dune instead of default app prefix 
  3. Use Ivy renderer
  4. Use SCSS as preprocessor
  5. No routing
  6. Change directory
  7. Serve app with ahead-of-time compilation to make Ivy work

 

I’m using the new experimental Ivy rendering engine to get an early taste of what’s to come in Angular 8 as an opt-in preview in March/April 2019 and hopefully final version in Angular 9 in September/October 2019.

 

To help style our app we going to use the most popular UI framework, Bootstrap.

 

  1. We can link to Bootstrap’s CDN minimized stylesheet in the head of our index.html as per Bootstrap getting started guide.

 

<link rel="stylesheet"

href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"

crossorigin="anonymous">

 

PRO

  • speedy setup – ready to use in seconds
  • improvement in load time of the first page if cashed on user’s browser
  • if you use server side rendering of Angular app, styles would be included in server’s bundle

CON

  • need to be online for development
  • size overhead, if not using every component

 

  1. Another way of bringing Bootstrap styles would be by adding stylesheet to the configuration file called angular.json (instead of .angular-cli.json that's deprecated since Angular 6) like this:

 

"styles": [ node_modules/bootstrap/dist/css/bootstrap.min.css" ]

 

Of course we need to install it first using following command: npm i bootstrap in order to reference it in angular.json.

 

PRO

  • quick setup
  • don’t have to be online for development phase

CON

  • size overhead, if not using each and every UI component
  • difficult to customize (you would have to override default rules)

 

  1. Bring bootstrap file directly into app’s main stylesheet file, which commonly is style.scss

 

You have to copy the content of the node_modules/bootstrap/scss/bootstrap.scss file and then adjust the import paths to ../node_modules/bootstrap/scss. With that approach our application compiles the SCSS code directly from the bootstrap/scss folder.

 

PRO

  • We can easily overwrite the Bootstrap variables.
  • Choice of SCSS modules we will import, depending on what components our application uses
  • Reducing SCSS code that will not be used (just comment out unneeded elements)

 

CON

  • More time to setup

 

Customizing Bootstrap Look

 

Before starting customizing Bootstrap let’s organize our style files.

  1. Create styles folder to place our bootstrap imports and custom variables files.
  2. Copy contents of node_modules/bootstrap/scss/bootstrap.scss  file and place into _bootstrap-modules.scss (feel free to name it otherwise)

bootstrap

 

  1. Adjust paths to point to files located in node_modules folder

 

@import "~bootstrap/scss/functions";

@import "~bootstrap/scss/variables";

 

  1. Import the _bootstrap-modules.scss file in app’s main styles file – styles.scss. Now we have Bootstrap’s styles applied to our app globally. We have access to all UI components, such as card, button, etc. My personal approach would be to comment out most of the components to keep size to a minimum and use the basic settings by enabling only the following components: functions, variables, mixins, root, reboot, type, grid and utilities. As the application grows I would  start uncommenting newly added components such as forms, images, buttons or any other required by app.

 

  1. To customize Bootstrap and leave the original variables file intact, create _custom-bootstrap-variables.scss and import it in main style.scss making sure you place it before Bootstrap’s import _bootstrap-modules.scss. In that case your variables values are used by Bootstrap instead of its default values.

 

@import "./styles/_variables";

@import "./styles/_custom-bootstrap-variables";

@import "./styles/_bootstrap-modules";

@import "./styles/_bootstrap-class-override";

 

  1. To check that our setup is functional let’s change the default font to free Google Font from the sans-serif family: Raleway.

 

My personal preference is to bring Google Fonts into my projects with the help of JavaScript library The Web Font Loader which was co-developed by Google and Typekit. Web Font Loader allows you to load fonts in an asynchronous manner without blocking other resources.

 

</head>
<body>
  <dune-root>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js">
</script>
<script>
  WebFont.load({
    google: {
      families: ['Raleway', 'Comfortaa']
    }
  });
</script>

</html>

 

To finish changing default font we need to add the following line to _custom-bootstrap-variables.scss file we created before:

 

$font-family-sans-serif: Raleway;

 

You can further customize the default Bootstrap look by changing the color scheme; add the following code snippet to _custom-bootstrap-variables.scss:

 

$blue:    adjust-hue( desaturate(#007bff, 30%), 10% );
$indigo:  adjust-hue( desaturate(#6610f2, 30%), 10% );
$purple:  adjust-hue( desaturate(#6f42c1, 30%), 10% );
$pink:    adjust-hue( desaturate(#e83e8c, 30%), 10% );
$red:     adjust-hue( desaturate(#dc3545, 30%), 10% );
$orange:  adjust-hue( desaturate(#fd7e14, 30%), 10% );
$yellow:  adjust-hue( desaturate(#ffc107, 30%), 10% );
$green:   adjust-hue( desaturate(#28a745, 30%), 10% );
$teal:    adjust-hue( desaturate(#20c997, 30%), 10% );
$cyan:    adjust-hue( desaturate(#17a2b8, 30%), 10% );

 

I slightly rotated the color wheel and desaturated colors. New color values are used by Bootstrap to define state classes such as: primary, info, danger, warning etc.

 

colors

 

This is how what our app’s colors and font look like after adjustment. You can also change the default shape of buttons, badges and other elements, by globally adjusting its padding or border-radius…

 

Thank you for reading an introduction to Bootstrap UI Customization in Angular Apps!