1

I have the following code, where I am trying to create a sample Angular Application and bootstrap it. However, the styles are not getting loaded properly.

menubar.html:

<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="display: inline">
        <div><a href="https://www.in28minutes.com" class="navbar-brand">in28Minutes</a></div>
    <ul class="navbar-nav">
        <li><a href="/welcome/shubham" class="nav-link">Home</a></li>
        <li><a href="/todos" class="nav-link">Todos</a></li>
    </ul>
    <ul class="navbar-nav navbar-collapse justify-content-end">
        <li><a href="/login" class="nav-link">Login</a></li>
        <li><a href="/logout" class="nav-link">Logout</a></li>
    </ul>
    </nav>
</header>

styles.css:

/* You can add global styles to this file, and also import other style files */
@import url(https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css)

Here is how it renders: screenshot

Improve this question
3
  • Have you tried importing bootstrap CSS in index.html like <link rel="stylesheet" href="your_bootstrap_link"> ? Commented Aug 22, 2020 at 6:09
  • I have tried adding it to index.html also but the page renders the same. Commented Aug 22, 2020 at 6:17
  • Check your internet connectivity. And also create a sample HTML page and try importing that bootstrap CSS and see if the problem exists. Commented Aug 22, 2020 at 6:27

4 Answers 4

Reset to default
2

Your bootstrap has been loaded properly, as you can see in the screenshot that the font-family has changed to the bootstraps default font.

The mistake you might do is with HTML code and not with importing bootstrap.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you , i got the issue . It was related to style="display: inline" added to navbar class. Once i removed it , the styles started working as expected.
1

There are 3 ways to enable bootstrap to your angular project.

  1. Including the Bootstrap CSS file in the <head> section of the index.html file of your Angular project with a <link> ,

  2. Importing the Bootstrap CSS file in the global styles.css file of your Angular project with an @import keyword.

  3. Adding the Bootstrap CSS file in the styles array of the angular.json file of your project.

The 3rd one is the most recommended way like,

"styles": [
   "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
Improve this answer

1 Comment

take carefull with the order, it's better put the last your "scr/styles.scss" to allow you override styles of bootstrap
1

To use Bootstrap in an angular project, i recommend to import the css file in your angular.json like this

"styles": [
   "src/styles.scss",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

don't forget to install the npm module with "npm i bootstrap"

Improve this answer

1 Comment

@shubham don't forget to install the npm module first, "npm i bootstrap"
1

You can add bootstrap following this steps:

  1. First install bootstrap from npm : $ npm install bootstrap. Then add bootstrap file location into angular.json

     "styles": [
       "./node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

 "scripts": [
       "./node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

  2. Otherwise you can add cdn link of bootstrap in index.html

    <head>
<meta charset="utf-8">
<title>test</title>
<base href="/">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

</head>
<body>

<app-root></app-root>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.