Bootstrap in Angular application

-
Description : In this article we will learn how to install Bootstrap in Angular application Bootstrap is used to create responsive web applications.

Prerequisites
knowledge of HTML is required.
Basic knowledge of TypeScript
Node and NPM installed
Angular Cli


step1 Create new angular project using  command prompt
 ng new BootstrapDemo
step 2  Open Project  cd BootstrapDemo
 step 3 npm install bootstrap --save 
step 4 open Style.css
  
step 5  To add reference in styles.css file add this line,
 @import '~bootstrap/dist/css/bootstrap.min.css';



step 6 :  Let's create a form using Bootstrap  Add these lines in app.component.html of html and bootstrap to design form.

<router-outlet></router-outlet>
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<button type="button" class="btn btn-success">Submit</button>
</form>
</div>

step 7 : Run the project using ng serve commnad and check the result 


Summery :- In this Article we Learned How to Install Boostrap into Angular Application .

Comments

Post a Comment

Popular posts from this blog

-
Image
COOKIE IN ASP.NET CORE Below sample C# code demonstrated on how to create and set cookie in ASP.NET  Core A cookie is a client-side state management technique which use to store a small amount of data on client  browser There are 2 types of Cookies. Persistence :- Persistence Cookies are stored according to the time span mentioned by user Non-Persistence :- Non-Persistence Cookies get expires when you close your browser. We are going to see a short demo of how to create a cookie and read the view from the cookie in ASP.NET Core. I have added Home Controller with name and Create ActionMethod in it. In creating action method, we are going to create a cookie with name “ DemoCookie ” and we are going to set an expiration for a week and to add a cookie to the browser we are going to call  Response.Cookies.Append().  public IActionResult Create()         {             string key = "DemoCookie";         ...
Read more

How to Integrate SB Admin 2 Template in Asp.net Mvc Application

-
Image
Template URL    https://startbootstrap.com/themes/sb-admin-2/ Step1 : Download Template form above URL open template copy files /folder from  CSS , JS,Vendor Folder from template  Step 2 : Create Asp.net Mvc Application Open content Folder and paste above Item into folder   Step 3: Open Index.html from template and copy content from Index.html after that open Home controller and Index .cshtml file and paste code inside Index. cshtml replace reference of file as below screen (~/Content) that we have copied Inside content folder   Step 4 : Layout should be null for this Action Method   Step 5 : Run the Application ...
Read more

How to add a new SSH key to your GitHub account

-
Image
 there could be scenario when you change your username on github account and you are not able to clone any of your exiting repositiory into your local machine either you will face . Fatal: Could not read from remote repository Please make sure you have the correct access rights and the repository exists  or error could be differnt like  git@github.com : Permission denied (publickey). fatal: Could not read from remote repository. in that case you have to generate new SSH key on your local machine and need to add same key into your github account . prerequisite :-  Download Git Bash from the below link based on your operating system and install it on your local system.   https://git-scm.com/downloads step 1 open cmd / Git bash  step 2 use this command to generate SSH key on your local system  ssh-keygen -t rsa -b 4096 -C "youremail@gmail.com" When you're prompted to "Enter a file in which to save the key," press Enter. This accepts the default file locat...
Read more