Category Archives: Uncategorized

Media

Category : Uncategorized

The Sahara School and College, Swat

Class 6th:

CLASS 4TH:


How to Integrate Bootstrap with Angular 4

Category : Uncategorized

Integrate Bootstrap with Angular 4

Every successful website has a beautiful website design behind their success. Although, there is a lot of techniques to design a beautiful website. One of them is Bootstrap. Bootstrap is a designing, front-end, mobile first, and responsive framework, to design a beautiful website. It is a combination of HTML5, CSS3 and JavaScript. The official website of Bootstrap is: getbootstrap.com
The bootstrap framework can be used with the JavaScript framework like Angular. In this lesson, I am going to talk about how to use Bootstrap framework with Angular 4. Using Bootstrap with Angular 4 is very easy. All you need to have is a basic understanding of Angular 4 and Bootstrap.

In this lesson, I am going to talk about how to Integrate bootstrap with Angular 4. Furthermore, we will take a look, How to install bootstrap for your Angular project.

Bootstrap with Angular 4

Bootstrap with Angular 4

Install Bootstrap

There are different ways to add Bootstrap to Angular project. Here we will look to install Bootstrap to Angular project through NPM. Let’s take a look, how to install Bootstrap via NPM.

Adding Bootstrap through NPM

With this method you can easily install Bootstrap to Angular project. First of all open your terminal and type the following command.

 npm install –save bootstrap

This command will install Bootstrap into the node_modules folder within the directory where your project is located. After Bootstrap package has been installed successfully to your project, the bootstrap files can be found at:

node_modules/bootstrap/dist/css/bootstrap.css
node_modules/bootstrap/dist/js/bootstrap.js

To add Bootstrap file in Angular project, you just need to go to .angular-cli.json file and add the following line against the styles and scripts like:

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
  ],
  "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],

That’s all, Now you need to call the booststrap class in your angular project. I am going to call it in header.component.html file like:

<h2> Header </h2>
<p>
Header works!
</p>

<hr />
<h3 class=”jumbotron”> Nested content </h3>

Advantages of Installing Bootstrap

Bootstrap is one of the modern designing framework, which can be used for responsive, and mobile first application. On the other hand, Angular is also for single page reactive applications. The combination of this two framework will ultimately produce a high quality and beautiful website applications, which will, in turn, become a success factor for a website.
Another advantage of Bootstrap is, that a developer will no need of designing a CSS file for a new Angular project. Just install Bootstrap, and then drag the classes of Bootstrap. It will ultimately enhance the productivity and will save most of the time. The project will be delivered on time and will consume less budget.

Conclusion

In this lesson, we learn how to integrate and install bootstrap for the Angular project. Bootstrap is a designing framework, designed for responsive, and mobile first application. However, you can also use it with an Angular project. To learn more about Bootstrap, we have a course on it for beginner. You can join it absolutely free.

Bootstrap 4 Course for Beginner

Suggested book

Learning Bootstrap 4 – Second Edition

In this gentle and comprehensive book, we’ll teach you everything that you need to know to start building websites with Bootstrap 4 in a practical way. You’ll learn about build tools such as Node, Grunt, and many others.