Using Bootstrap In Angular Application

By

 

There is no doubt that using a design library making the web page design easier for most of the web developers especially those does not want to busy themselves with the style sheet codes and the alignment … etc.

One of the libraries that is very popular and easy to use is the bootstrap. Using bootstrap is very easy to use and implement as it has a ready-made CSS classes for almost every usage in the web page.

I this article we will go through a step-by-step tutorial on how to implement and use bootstrap library with Angular 2+. The time this article was written, the latest version of Angular was Angular 14.

In order to complete this tutorial you need to have the following installed.

1.      Nodejs

2.      TypeScript

3.      Angular CLI

And a running Angular Application.

In case you are not familiar with any of the previous three; please check this post. If not continue with the following

Step1: Install Bootstrap Package.

Just like the way we installed angular CLI we can install Bootstrap. Run the following command in a terminal window:

npm i boostrap

(npm) => stands for node package manager

(i) => stands for install (it is possible to write the complete word “install”).

(bootstrap) => the name of the package to be installed.

After the installation is done we now need to use the bootstrap library in our application to do that we need to do some easy operations:

1-     Open the angular.json file located in the root of the application folder (learnangularbootstrap) in our case. This is a JSON file. Locate the “styles” array and paste the following path in the array:

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

2-     Open the style.css file located in this path (/learnangularbootstrap/src). This is a CSS file. All the classes in this file are available across the application files. Add the following line to the file

@import "~bootstrap/dist/css/bootstrap.min.css";

               That is it, now we can use the library with all of its classes in the HTML files.

 

Step2: Using Bootstrap library in HTML Files.

Here I will make a small sample using some Bootstrap CSS classes. Let us take for example this sample HTML:

 

<div> <!-- Container -->

  <div>

    This is the header

  </div>

  <div>

    <div>

    <div>

      <input type="text" name="input1" value="" />

    </div>

    <div>

      <input type="text" name="input2" value="" />

    </div>

    <div>

      <input type="text" name="input3" value="" />

    </div>

  </div>

  </div>

</div>

 

When displayed in the web page it displays like this

Now, let us use the bootstrap classes to the DIVS and the input controls

<div class="card"> <!-- Conainer -->

  <div class="card-header">

    This is the header

  </div>

  <div class="card-body">

    <div class="form-group row col-md-12">

      <div class="col-md-4">

        <input class="form-control" type="text" name="input1" value="" />

      </div>

      <div class="col-md-4">

        <input class="form-control" type="text" name="input2" value="" />

      </div>

      <div class="col-md-4">

        <input class="form-control" type="text" name="input3" value="" />

      </div>

    </div>

  </div>

</div>

 

Now, it looks like this in the browser:

Cool, right!

 

 

 

Comments

Post a Comment

Popular posts from this blog

Adding Google Alerts to SharePoint

By
Image
Google gives its users a wide variety of utilities to use either for work or for entertainment or even business. One of these utilities is Google Alerts. This service allows the users to get an updated content from Google about a certain topic on the web. Google does the search and sends the result to the mail or to a feed. Having the feed option in Google Alerts gives the SharePoint developer to easily display the search result in a SharePoint page. Let us see how to do this. Please follow the following easy steps: -           Open an internet browser and navigate to http://alerts.google.com and login with your Google account. -           Now you can add a new alert on Google as the following image shows -           Here you should select [Feed] from in the [Deliver To] menu and click on [Create Alert]. -       ...
Read more

Online Payment explained

By
Nowadays many website owners add online payment functionality to their services for many reasons: Allow site visitors to pay for services. A faster way to receive payment by service providers. An easy way for the buyers to get what they need online. In this article I am not going to talk in the pros and cons of online payment, but I will try to transfer to you my knowledge about this technique as a web developer to others who would like to apply this service in their website. What do you need to know first? There are several things that you need to know before starting Payment Gateway: The payment gateway is the first thing that you should look for and decide what to use. The choice is up to you according to your needs and your business. PayPal is a famous payment gateway that has a variety of methods and techniques to follow. Alert Pay is another payment gateway that you can use. In some rare cases the services provided by such gateways are not e...
Read more