Adding bootstrap to Angular

In todays article I am planning to show how to add the bootstrap CSS framework to Angular.

I am using the how to css example from w3schools as a starting point for my new web site.

https://www.w3schools.com/howto/howto_css_example_website.asp

To create the initial website I copy the HTML from the above example into the app.component.html file in my angular project.

Version 1 does not look that good because I have not at this stage applied any styles. To apply styles I go to the Bootstrap web site and follow instructions on the getting started page.

https://getbootstrap.com/docs/4.3/getting-started/introduction/

This is done by adding the CSS files and the Javascript files from the bootstrap web page into the index.html file in the Angular project.

<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">
<my-app>loading</my-app>
<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>

The web site now looks a lot better.

But there are still some problems with the layout and the web site does not render as per the example from w3schools. To make it render more like the example I am using the Boostrap grid layout system and adding container to the top level components, plus using col-3 for the side column and col-9 for the main section.

This is using the grid system from boostrap

https://getbootstrap.com/docs/4.3/layout/grid/

The site is looking more like the example from w3schools and the next step is to setup the header section and the menu section.

The header section is easy to style as I simply reuse the .header styles from the w3schools example and paste these styles in to the app.component.css file.

/* Header/logo Title */
.header {
  padding: 80px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

The original html already has the navbar class which is needed to generate a navigation bar in place.

<div class="navbar container">
  <a href="#" class="active">Home</a>
  <a href="#">Link</a>
  <a href="#">Link</a>
  <a href="#" class="right">Link</a>
</div>

There are some additional html tags that need to be added to be able to render a navigation menu similar to the example from w3schools.

The easiest way to do this is to copy the navigation structure from the Boostrap web site.

https://getbootstrap.com/docs/4.3/components/navbar/

<div class="navigation container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My Site</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" tabindex="-1" aria-disabled="true">Link</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

I also wrap the navbar in a div with classes of navigation and container. My website is now starting to look a lot more like the example.

I change the navbar to be bg-dark and then add in a background-color style for the navigation container that matches the navbar style.

  <nav class="navbar navbar-expand-lg navbar-light bg-dark">


/* Navigation */
.navigation, .navbar {
    background-color: rgb(52, 58, 64);
}

Finally I add in styles for the fakeimg and the footer as follows:

/* Fake image, just for this example */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}
Header, nav and main section
Footer section

This will create a starting point for developing websites using Angular and Boostrap. The code for this example can be found below:

https://github.com/muncey/angular-bootstrap-simple