This tutorial on Angular Bootstrap covers the following:
What is Bootstrap?
Let us understand the meaning of Bootstrap precisely. Bootstrap is a framework based on HTML, CSS, and JavaScript. It is used majorly for developing websites that are highly responsive and mobile-friendly. It is a front-end framework that enables a faster web development process. The design templates used by Bootstrap are all based on HTML and CSS. These templates are used for typography, image carousels, buttons, tables, navigation, modals, etc. Bootstrap also makes use of JavaScript plug-ins to create responsive designs.
Angular Bootstrap
Angular Bootstrap is a component that initiates or starts the Angular application. It basically controls the initialization process of the application. The function used to start the application is angular.bootstrap(). The syntax is given by:
angular.bootstrap(element, [modules], [config])
In the above syntax, the “element” denotes the DOM element. It can be a document, file, etc., basically something that forms the root of the Angular application.
Next is the “modules” that denote the array of modules, if any, to be loaded.
Lastly, “config” denotes the configuration options.
Angular Bootstrap takes the following steps to initiate the Angular application :
- Firstly, the loading of Index.html
- Next is the loading of Angular, third-party libraries, and applications
- Main.ts the application entry point
- Root module
- Root component
- Template
What is Bootstrap and How to Embed Bootstrap into Angular?
We have already discussed what Bootstrap is. Now, let us quickly dive into the process of embedding Bootstrap into Angular.
There are two ways in which you can embed Bootstrap into your application. The two ways are mentioned below:
- Embedding Angular Bootstrap via CDN
- Embedding Angular Bootstrap via NPM
We will discuss more about these two ways to embed Bootstrap later in this blog.
How to Create an Angular Bootstrap?
In this section of the Angular 6 tutorial, we will be creating an Angular application and integrating Bootstrap in it. When we are done with this, we will be able to give an input as a user into the application, and with a single click, the input will be displayed on the screen.
Watch this Full Stack Web Development Course video:
First, we will be following the same steps as we discussed while creating an Angular application. So, without further ado, let us start!
We will use the ng new command on our terminal to create a project. Here, we will use the same project that we created earlier as a demo in the installation part, so we don’t need to create the project again. We can directly start by just moving it to the project directory using the cd command as shown below:
cd intellipaat-demo
Next, we will use Bootstrap classes to include a form in our application. Before we do that, we need to install Bootstrap. We will use the following command to install Bootstrap:
npm i –s bootstrap
After installing Bootstrap, we will have all the necessary packages that come with its latest version in our project. We will see the output screen as shown in the following screenshot:
Now, we will do some HTML structuring to add a form to our application. Remember those five files residing in the app folder of our project that we discussed in the installation part? Yes, we will be using those files now.
Let’s start adding a form to our application. We will open the app.component.html file in any text editor and add the following lines of code:
<div class=”container”>
<form>
<div class=”form-group”>
<h1 class=”text-center text-primary”>Intellipaat Demo App</h1>
<div class=”input-group-prepend”>
<input type=”text” class=”form-control” placeholder=”Add Course” name=”Course”>
<button class=”input-group-text”>Add Course</button>
</div>
</div>
</form>
</div>
If we run the app after adding these lines, we will see that there is a form in our app aligned to the left side of the screen. That is because left is the default alignment setting.
Now, let’s see how we can change the properties of this form; for example, changing the alignment, providing margin, etc.
For that we will open the app.component.css file in our editor and add the following lines of code:
body{
padding: 0;
margin: 0;
}
form{
max-width: 25em;
margin: 1em auto;
}
Now if we run the application, we will see that the form we included in the application has been aligned to the center of the screen as shown in the following screenshot:
Next, let’s see how we can take an input from a user and store it, so we can use it later. To capture an input that the user enters, we will insert a variable as an attribute in the input element that we have inserted in the app.component.html file. We have to just change the code line of the input element as shown below:
<input type="text" #course class="form-control" placeholder="Course Name" name="course" ngModel>
What is happening here?
We use # followed by the name of the variable to create a variable as an attribute. In our case, the name of the variable is “course”.
Now that we have a variable, we need to get the value inserted by the user in that variable. For that, we have to include the following line of code right after creating a variable as an attribute in the app.component.html file.
{{course.value}}
Now, as soon as a user enters a value, it goes into our variable. However, it isn’t stored anywhere yet. To store the value, we will create an array and pass the value from the variable to that array.
Let’s start by creating an array. We will create an empty array in app.components.ts inside a class named AppArray. Use the following lines of code to create an empty array.
export class AppArry {
courseArray=[]
}
When the user enters an input in the form and clicks on the Add Course button, the value will be stored in the array. We have an array, but to store the values, we need to create a function in the same class in which we have created the empty array as shown below:
export class AppArry {
courseArray=[]
addCourse(value){
Now, we have an empty array ready, but our application still does not know when to use it, i.e., when to add the value of the variable in the array. Hence, we will add an on-click event on the button named “Add Course” in app.component.html as shown below:
<button class=”input-group-text”(click)=”addCourse(course.value)”>Add Course</button>
Note: We have to provide the name of the function that we just created in the previous step and pass the value in the variable to that function in order to store that value in the array. In our case, the name of the function is “addCourse()”.
Now, all we have to do is fetch the data from the array and display it in our application. To do that, we will include the following lines of code in the app.component.html file:
<div class=”data”>
<ul class=”list-instyled”>
<li *ngFor=”let course of courseArray”>{{course}}</li>
</ul>
</div>
After including the above code, the input value will be automatically fetched as soon as the button is clicked. See the following screenshot:
After clicking on the button, the input value will be listed on the application as shown in the following screenshot:
We can also add some styling in our application by including fonts and colors in the app.component.css file. Here, we have used free-to-use Google Fonts and material icons in our application.
By adding the following lines of code in the app.component.css file, we can change the font and the font color of the “Intellipaat Demo App” heading:
@import url(‘https://fonts.googleapis.com/css?family=Raleway’);
form{
max-width: 30em;
margin: 4em auto;
position: relative;
background: #f4f4f4;
padding: 2em 3em;
}
The following screenshot shows how the application looks after it includes the above code:
Kudos for making it this far!
Let’s now see how we can add an image to the application.
When we open our app.component.html file in the text editor, we will note that in the first block of code, the Angular logo has been added. The syntax here is simple. The width is declared and the path to the image is provided in the “src” part of the code. Here we can replace the logo with some other image.
All we need to do is place the image we want to use in the assets folder of our project. We can also use the URL of any image, but there is always a risk of online images getting removed. Our application will not be able to load the image from the specified URL if the image has been removed. That is why it’s recommended to add the image in the application in the asset folder, so it never gets lost or misplaced.
Once placing the image in the assets folder, we have to provide the path, starting from the assets folder only in the src as shown below:
<img width=”500″ alt=”Intellipaat Logo” src=”/assets/img/intellipaat.png”>
Yippee! Here is what the final application looks like:
That would be all for this tutorial; we hope that you found this tutorial helpful and learned something.
History of Bootstrap
The history of Bootstrap dates back to August 2011. It was developed by Mark Otto and Jacob Thornton during a project at Twitter. Bootstrap was released as an open-source product in August 2011 on GitHub. Almost three years later, Bootstrap was announced as the top GitHub project.
Why Use Bootstrap?
Now the question arises, why to use Bootstrap. The following reasons list why it is beneficial to use Bootstrap:
- The first reason definitely has to be the ease of using Bootstrap. Anyone who has a basic knowledge and understanding of HTML and CSS can use Bootstrap.
- Bootstrap is easily compatible with almost all browsers such as Chrome, Internet Explorer, Safari, Firefox etc.
- Bootstrap adopts a mobile-first approach, i.e., everything is stored in a library instead of separate files.
- Bootstrap’s design is very responsive as it easily adjusts to all devices, desktop, tablet, or mobile.
- Bootstrap is an open-source framework.
- The built-in components offered by Bootstrap make it a preferred choice. Not only this, these components can be customized, which is an added advantage
- Bootstrap offers web-based customization options, which is one of the most important features of the framework.
What is a Responsive Website?
For the above-mentioned reasons, the responsiveness of the Bootstrap framework was discussed at one point. Hence, a responsive website is one that can automatically adjust itself as per the requirements of all kinds of devices such as tablets, smartphones, desktops, etc. It is because of the responsiveness of the website that it looks different on a desktop as compared to on a smartphone.
What Does a Bootstrap Package Contain?
As already discussed above, Bootstrap is a framework based on HTML, CSS, and JavaScript, which is used in developing highly responsive and mobile-friendly websites.
A Bootstrap package consists of the following features:
- Scaffolding: This refers to the basic structure that is offered by Bootstrap. The structure we are talking about includes the grid system, link styles, and background.
- CSS: Bootstrap offers one of the most useful features for developing responsive websites wherein fundamental HTML elements are styled and enhanced with extensible classes and an advanced grid system.
- Components: Bootstrap consists of almost more than a dozen reusable components. These components are reusable and built to provide iconography, dropdowns, navigation, alerts, pop-overs, etc.
- JavaScript Plug-ins: Bootstrap contains more than a dozen customizable jQuery plug-ins.
- Customize: The customize feature lets us customize Bootstrap’s components, fewer variables, and jQuery to create our own personalized version.
What is Bootstrap 4?
Bootstrap 4 is the latest version of Bootstrap, having all the important and advanced features of the framework. It is also the most popular HTML, CSS, and JavaScript framework used to develop responsive and highly mobile websites.
What is Bootstrap 5?
Bootstrap 5 is the latest version of Bootstrap and was launched in mid of June in the year 2020 This version has new components and is much more responsive than the previous Bootstrap versions. All the latest and stable releases of web browsers, except Internet Explorer 11 and below are supported by Bootstrap 5.
Also new classes have been added to Bootstrap 5, some of which are:
- gx-* (This class controls the horizontal/column gutter width)
- gy-* (It has been added to effectively control the vertical/row gutter width)
- g-* (This class controls the horizontal & vertical gutter width)
- Rows-cols-auto
Some other updated functionalities of Bootstrap 5 include easy modification of API utilities, which was absent in Bootstrap 4 and other previous versions.
Embedding Bootstrap into Angular
Even though we have discussed embedding Bootstrap into Angular before in this blog, let us dig deeper into understanding how it is done.
Angular Bootstrap via CDN
We can load Angular Bootstrap via CDN by Bootstrap CDN, which is a public content delivery network. The CSS and JavaScript files need to be remotely loaded from the servers. To enable this, copy the CSS and JavaScript code, and paste them in the index.html file of the Angular application.
Consider the following image and the code below as a reference:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Democomponents</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<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">
</head>
<body>
<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>
<app-root></app-root>
</body>
</html>
Angular Bootstrap via NPM
NPM stands for the node package manager. This is another way of embedding Bootstrap in an Angular application. For this, install Bootstrap in the project using NPM.
The following are the two commands that can be given to install Bootstrap and jQuery libraries:
npm install bootstrap
npm install jquery
The files installed using the above commands will be loaded in the node_modules file.
node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js
Now, copy and paste the relative paths to the loaded files in the angular.json file in the build section.
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/democomponents",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/jquery/dist/jquery.min.js"
]
},
Conclusion
Angular has been dominating the world of open-source web application development platforms since it first came into the market. Considering all the amazing features and files and the high-level web development support that it provides, one can be easily mistaken into thinking that Angular must be hard to learn and use. Contrary to that, Angular is not that hard to learn and use. It makes working with applications fun and interesting. No wonder Angular has such a huge community and support.