When developing web applications with Angular, embedding Bootstrap can greatly enhance the visual appeal and responsiveness of user interfaces. Bootstrap is a widely-used front-end framework that offers pre-built components, styles, and utilities.
Before proceeding, ensure that you have the following prerequisites installed:
Npm or yarn
Angular
You can install Angular CLI using the following command:
npm install -g @angular/cli //using npm//ORyarn add @angular/cli //using yarn
Let's start by creating a new Angular project. Open your terminal or command prompt and type the following command:
ng new bootstrap-app
This will create a new Angular project named bootstrap-app in the current directory.
In the same terminal or command prompt, navigate to the project folder by running:
cd bootstrap-app
Install Bootstrap using npm or yarn with the following command:
npm install bootstrap //using npm//oryarn add bootstrap //using yarn
This will download and install Bootstrap in your project, making it available for use.
Now that Bootstrap is installed, we need to import its styles into our Angular application. Open the src/styles.css file in your project and add the following line at the top:
@import '~bootstrap/dist/css/bootstrap.min.css';
This line tells Angular to include Bootstrap CSS in the application, and now we can use Bootstrap’s styling throughout our project.
Bootstrap offers a wide range of components, such as buttons, forms, navigation bars, modals, and more. To use these components in Angular templates, we need to include the appropriate Bootstrap HTML classes.
For example, if we want to create a button, we can use the following code in the component’s template file (e.g., src/app/app.component.html):
<button class="btn btn-primary">Click me!</button>
This will render a blue button with rounded corners and other Bootstrap styles applied to it.
One of the key features of Bootstrap is its responsiveness. By default, Bootstrap components adapt to different screen sizes, making them look great on both desktops and mobile devices.
To make Angular application responsive, we can use Bootstrap’s responsive grid system. We can create responsive layouts by dividing the page into rows and columns. For example:
<div class="container"><div class="row"><div class="col-md-6 text-white">Content for the left half of the page</div><div class="col-md-6 text-white">Content for the right half of the page</div></div></div>
This code will create a two-column layout on medium-sized screens and above, automatically adjusting to a single column on smaller screens.
Now you can run your application by running the following command in the terminal:
ng serve
Following is an example application using Bootstrap in angular:
Since this output screen is small, it automatically adjusts the screen in one column.
Free Resources