Is Angular4 preloaded with bootstrap library?

I started a new angular4 project and wrote the code in app.component.html

<div class="container">
  <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>    
</div>

However, it didn't work as expected.

I noticed that in the course, bootstrap was being loaded by bootstrap: [AppComponent] in app.module.ts. But when I tried to do the same, it did not work for me. Only after adding 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

to index.html, it finally worked. Why is that?

csstwitter-bootstrapangular

Answer №1

Don't mistake the framework name for the startup process. Angular's bootstrap simply sets the entry point.

It's important to note that Angular 4 doesn't natively support the Bootstrap UI framework. However, you can achieve basic static styling by importing the CSS files.

If you're looking to work with dynamic components, consider using ng-bootstrap or ng2-bootstrap.

Answer №2

When it comes to the bootstrap(angular property), [AppComponent] is defined as the initial component of the application. Once you run your application on the server, "AppComponent" will be called and displayed on the screen.

If you are referring to the bootstrap framework, you will need to install Bootstrap in your project using the following command:

npm install --save bootstrap

Please note: After running this command, ensure that the bootstrap .min file is added to your angular-cli.json file. If it is not added, you can add it manually:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Flex wrap is causing additional space within the layout

When using flex-wrap, if there are more textBoxes than the available width in the container, they shift to the next line. This is fine, but it leaves too much space between the button and the textBox. This spacing issue can make the layout look odd. I hav ...

htmlcss

What's the reason for the inability to resize fieldset using both?

Can someone explain why the resize control is not enabled on the fieldset element? The documentation mentions that resize does not work with: Inline elements Block elements that have overflow set to visible fieldset { resize: both; overflow: h ...

htmlcss

ng serve is consistently experiencing issues due to the absence of exported members

I am new to Angular and struggling with where and how to ask questions or effectively search for answers. Any guidance would be greatly appreciated. Currently, I am facing the following issue: After running npm install in my application, when I try to ru ...

angularnpm

Setting up Microsoft Clarity for your Angular app on localhost is a simple process

Currently, I am attempting to set up Microsoft Clarity on my Angular app to run on localhost. After creating a new project on the Microsoft Clarity portal and specifying the URL as localhost (I also tried using localhost:4200</code), I copied the scrip ...

angularms-clarity

Displaying ASP.Net Core Application on local IIS - Unable to locate content

I started a new project in Visual Studio Code by running the following command: dotnet new angular --use-local-db Afterwards, I upgraded Angular from version 8 to 10 and completed the project. To test it, I used dotnet watch run Everything was running ...

c#asp.netangulariisasp.net-core-3.1

Is there a way to initiate a jquery function upon loading the page, while ensuring its continued user interaction?

On my webpage, there is a JavaScript function using jQuery that I want to automatically start when the page loads. At the same time, I want to ensure that users can still interact with this function. This particular function involves selecting a link tha ...

javascriptjqueryhtmlcss

I am looking to initiate the animation by triggering the keyframe upon clicking a button

Is there a way to create an animation triggered by a button click instead of loading the page? Each table data cell has its own class with a unique keyframe defining the style changes over time. @-webkit-keyframes fadeIn { from { opacity:0; ...

javascripthtmlcss

What could be the reason behind ejs not allowing if else statements when the variable is undefined?

I am attempting to replicate a rather simple example from this question here <div <% if (page_name === 'overview') { %> class="menu__menu-overviewPage menu" <% } %> class="menu"> However, when I try it on a ...

javascriptcssnode.jsejs

Horizontal scroll through Bootstrap 4 navigation tabs

I'm currently using the newest Bootstrap 4 nav-tabs feature to create tabs and I'm aiming to keep all the tabs in a single horizontal line that can be scrolled. I've attempted to use various JavaScript plugins, but none of them seem to func ...

htmlcsstabsbootstrap-4

Struggling with a malfunctioning Bootstrap dropdown that refuses to drop down

I've been working on a VueJS single-page application, but I can't seem to get the dropdown feature to work. I've followed the instructions from the Bootstrap guide and tried everything they recommended, but it just won't cooperate. Can ...

jquerytwitter-bootstrapvue.jsdrop-down-menu

What is the best way to position an <a> tag in the top right corner of a card using Bootstrap?

I own a card that features an image in the background. <div class="col-12 col-sm-8 col-md-6 col-lg-4 mt-4"> <div class="card"> <img class="card-img" style=" filter: brightness(75%);" src=& ...

htmlcssbootstrap-4

Angular 2 Form Arrays

I need to create a new FormArray, but currently there is only one member in the array. When I try to create a new FormBuilder, it looks like this: public myAccountForm: FormGroup; ngOnInit() { this.myAccountForm = this._fb.group({ FullName: [ ...

angularangular-reactive-forms

React component with element style declared in module.css file and conditional state

I'm in the process of developing a mobile dropdown feature for a React web application. I am looking for guidance on the proper syntax to use when incorporating multiple classes into a React element. My goal is to apply styles from an imported module ...

cssreactjsclassnext.jsclassname

Craft a Unique Responsive Background Design

I'm eager to create a background like this, but I'm struggling to figure out the best approach. My attempt with transform: skewY(-6deg) ended up skewing my entire page instead of just the background. Could someone please assist me in finding th ...

htmlcssbackground

Transforming segments into divisions

I recently designed a website using sections instead of divs in order to achieve the desired alignment of the divs within the same container. However, I am facing difficulties and confusion in implementing this approach. Currently, my divs collapse on top ...

htmlcsssections

I am experiencing issues with md-no-focus-style not functioning correctly in my configuration

I have a button that triggers the opening of my navigation bar: https://i.sstatic.net/nMr0i.jpg When I click on it, a hitmarker appears: https://i.sstatic.net/OLQaE.jpg The issue is that even after clicking on a navigation item and transitioning to the ...

htmlcssangularjsangular-material

Navigating the complexities of defining conditions in routes within Angular/ionic applications may seem daunting,

Utilizing the ionic 5 framework for building an application, I am looking to implement a condition in the route to redirect users if they are already signed in. Within the app-routing.module.ts file: const routes: Routes = [ { path: '&apo ...

angularrouterionic5

Guide to setting the current slide in your ngx owl carousel using Angular

Looking for a solution to dynamically set an active slide based on index within a carousel. Attempted to apply the classes "active" and "center". The newsId variable in the example below is retrieved from another page and has been verified. <owl-carouse ...

angularowl-carousel

How can you achieve three layers of nested quotes in Dynamic HTML?

Working on an app that utilizes JQuery and JQTouch for iOS. The issue I'm facing involves dynamically generated HTML lists where the user clicks a row that needs to be highlighted. However, achieving this has proven tricky due to nesting 3 sets of quo ...

javascripthtmlcssonclickhtml-lists

Table pagination in Mat is experiencing overflow, and the button styles have also been customized for a unique look

I implemented a mat paginator feature, however, I am facing an issue where the alignment of items per page options is not correct. Below is the snippet from component.html file: <div class="table-responsive" *ngIf="resultssummaries"> &l ...

cssangularcss-selectorsangular-material