Tutorial How To Integrate Angular 4 + Bootstrap 3 For Beginners

Tutorial combines Angular 4 with bootstrap v.3.3.7. Bootstrap is an essential role in creating mobile applications. In addition to being easy to use, Bootstrap is also compatible with a variety of frameworks including the javascript framework. In Angular 4, how to integrate Bootstrap into the Angular project is slightly different. Follow the following tutorial.

Read another article: Simple Login Form Angular 4 Tutorial For Beginner

I am sure you have understood what is angular 4 and what is the bootstrap framework. Without further explanation, I will immediately create a simple project to combine the two frameworks.

How to integrate angular 4 project with Bootstrap framework

1. Create a new Angular project using angular-cli.

Angular-CLI is a generator for Angular 2 and 4 projects (and above). By using this Angular-CLI help, we no longer need to setup many basic needs such as folder composition, how to run, how to build and others

Make sure you have installed angular-cli (read: how to install angular-cli) and run the following code

ng new angularbootstrap

1	ng new angularbootstrap

2. Install Bootstrap v.3.3.7 and Jquery using npm

npm install bootstrap@3 jquery --save

1	npm install bootstrap@3 jquery --save

3. Integrate Bootstrap and Jquery into the Angular project.

Open the .angular-cli.json file and add the following code in the styles and scripts section

"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"

1 2	"../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css"

and add the following code in the scripts section

"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"

1 2	"../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js"

So it will look like the following picture

Up to this point, the Bootstrap and Jquery installations into the Angular 4 project have been completed. Here I will try to add a starter template to test whether the Bootstrap framework above has been running correctly.

Edit index.html in the src folder and add the following script above the element

<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </nav>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="#">Project name</a>

</div>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</div>

</div>

</nav>

Then change the html code in app.component.html and copy the following code

<div class="container">
    
          <div class="starter-template">
            <h1>Bootstrap starter template</h1>
            <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
          </div>
    
        </div><!-- /.container -->