bootstrap 4 in angular Wishusucess

Step by Step Guide for Adding Bootstrap in Angular Project:

Hi Everyone,

There is very simple steps only you need to follow,

There is two way you can include bootstrap 3 or bootstrap 4 in your angular project.

So here we will go through first way step-wise, following are steps mentioned below,

Step1 – > Directly include bootstrap link in you index.html.

for example,

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HamaraBharat</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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  
</head>
<body>
  <app-root></app-root>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>

And now you can see the effect of bootstrap properties in your project.

You just try below code to see whether now it’s working or not.

app.component.html

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Yeah, it’s working see the result below

Step2 -> Second process to include the bootstrap in your angular project that is install bootstrap in your project locally to use.

Either include file location of bootstrap in angular.json file like below,

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.slim.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Or you can directly include file location in style.css and main.js.

For Example,

style.css or style.scss

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

main.js

@import "../node_modules/bootstrap/dist/js/bootstrap.min.js";

Always remember the point if you are using jquery in angular project then include jquery file location before bootstrap js file location.

Step3 – > Try with the same html code we used in app.component.html to see the effect.

Step4 – > Now you need rebuild the angular project using below command

ng build

And run the ng server to see the output in browser.

That’s all, if you having any doubt then feel free to mention in comment box.

Thanks.

Recommended Post: Run Python Script in Java

bootstrap 4 in angular Tag

Bootstrap In Angular: How to Use In Project