In this post we will see how to integrate the Bootstrap css and custom css class in our application.
for this functionality we have to do the following steps
Approach 1
Step 1: Go the node command terminal and run this command
npm install bootstrap@3 –save
Step 2: Once Bootstrap is installed, open .angular-cli.json file and specify the path to the Bootstrap stylesheet (bootstrap.min.css) in the styles property as shown below.
“styles”: [
“../node_modules/bootstrap/dist/css/bootstrap.min.css”,
“styles.css”
]
Approach 2:
Implementing CDN file path directly on index.html or importing the path in styles.css file like this
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MySample</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/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <app-root>Loading -----</app-root> <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
Chandradev's Blog 