Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards

Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards

Angular Bootstrap Styling

In this tutorial, we'll learn how to integrate and use bootstrap 4 with Angular 10.

We'll see how to initialize an Angular 10 project and integrate it with Bootstrap 4. Next, we'll use the various Bootstrap 4 CSS utilities to create a responsive layout with navbars, tables, forms, buttons, cards and jumbotrons.

Bootstrap is a free and open-source CSS framework for creating responsive layouts, it's mobile-first and contains ready CSS utilities for typography, forms, buttons, and navigation, etc.

This tutorial works with all recent versions of Angular i.e v7/v8 and v9.

Angular 10 and Bootstrap 4 by Example

There are various ways of integrating Bootstrap 4 with your Angular 9 application. Let's see a possible solution by example.

  • Step 1 -- Installing Angular CLI 10
  • Step 2 -- Initializing your Angular 10 Project
  • Step 3 -- Installing Bootstrap 4
  • Step 4 -- Creating Angular Components and Setting up Routing
  • Step 5 -- Adding a Bootstrap 4 Jumbotron
  • Step 6 -- Creating an Angular Bootstrap 4 Table
  • Step 7 -- Adding a Bootstrap 4 Form Component

Step 1 -- Installing Angular CLI 10

Let’s start by installing the latest version of Angular CLI. In your terminal, run the following command:

$ npm install -g @angular/cli@next

At the time of writing this tutorial, Angular 10 is in beta version so you need to add the next tag to install it via npm. After it's released you don't need to use the next tag.

Step 2 -- Initializing your Angular 10 Project

After installing Angular CLI, let’s initialize an Angular 10 project by running the following command:

$ ng new angular10bootstrapexample

The CLI will then ask you:

Would you like to add Angular routing?

Press Y.

Next, it will ask you:

Which stylesheet format would you like to use?

Choose “CSS”.

Next, we need to set up Angular 10 forms.

Go to the src/app/app.module.ts file, import FormsModule from @angular/forms, and include it in the imports array as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule } from '@angular/forms';

/* ... */

@NgModule({
  declarations: [
  /* ... */
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3 -- Installing Bootstrap 4

After initializing your Angular 10 project, let's proceed to install Bootstrap 4 and integrate it with Angular.

Go to your project’s folder:

$ cd angular10bootstrapexample

Next, install Bootstrap 4 and jQuery from npm using the following command:

$ npm install --save bootstrap jquery

Next, go the angular.json file and add the paths of Bootstrap CSS and JS files as well as jQuery to the styles and scripts arrays under the build target as follows:

"architect": {
  "build": {
    [...], 
    "styles": [
      "src/styles.css", 
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]
    },

Step 4 -- Creating Angular 10 Components and Setting up Routing

After installing and integrating Bootstrap 4 with your Angular 10 project, let's create some components to test various Bootstrap styles.

Go to your command-line interface and run the following commands:

$ ng generate component jumbotron
$ ng generate component bootstrap-form
$ ng generate component bootstrap-table

Next, we need to include these components in the routing module to enable multiple views.

Go to the src/app/app-routing.module.ts file and update it as follows:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BootstrapTableComponent } from './bootstrap-table/bootstrap-table.component';
import { BootstrapFormComponent } from './bootstrap-form/bootstrap-form.component';
import { JumbotronComponent } from './jumbotron/jumbotron.component';

const routes: Routes = [
  {path:  "", pathMatch:  "full",redirectTo:  "home"},
  {path: "jumbotron", component: JumbotronComponent},
  {path: "bootstrap-form", component: BootstrapFormComponent},
  {path: "bootstrap-table", component: BootstrapTableComponent}  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Step 5 -- Adding A Bootstrap 4 Jumbotron

A Bootstrap Jumbotron is a lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site

Let’s add a Bootstrap Jumbotron component to our jumbotron page.

Head to the src/app/jumbotron/jumbotron.component.html file and add the following HTML markup:

<div class="jumbotron" style="height: calc(95vh);">
  <h1>Angular 10 Bootstrap 4 Demo</h1>
  <p class="lead">
    This tutorial teaches you how to integrate Bootstrap 4 with Angular 10  
  </p>
</div>

Wu use the built-in .jumbotron class to create a Bootstrap Jumbotron.

Step 6 -- Creating an Angular 10 and Bootstrap 4 Table

Let’s now see how to use a Bootstrap 4 table to display tabular data.

Go the src/app/bootstrap-table/bootstrap-table.component.ts file and add some data that we can display:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-bootstrap-table',
  templateUrl: './bootstrap-table.component.html',
  styleUrls: ['./bootstrap-table.component.css']
})
export class BootstrapTableComponent implements OnInit {

  employees = [
    {id: 1, name: "E 001", description: "E 001 des", email: "[email protected]"},
    {id: 2, name: "E 002", description: "E 002 des", email: "[email protected]"},
    {id: 3, name: "E 003", description: "E 003 des", email: "[email protected]"},
    {id: 4, name: "E 004", description: "E 004 des", email: "[email protected]"}
  ];
  selectedEmployee;

  constructor() { }

  ngOnInit() {    
  }

  public createEmployee(e: {id, name, description, email}){
    this.employees.push(e);
  }

  public selectEmployee(e){
    this.selectedEmployee = e;
  }
}

We simply defined two variables employees and selectedEmployee for holding the set of employees and the selected employee. And a selectEmployee() method which assigns the selected employee to the selectedEmployee variable.

Next, go the src/app/bootstrap-table/bootstrap-table.component.html file and update it as follows:

<div class="container" style="margin-top: 70px;">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let employee of employees">

        <td></td>
        <td> </td>
        <td> </td>
        <td>
          <button class="btn btn-primary" (click)="selectEmployee(employee)"> Select</button>
        </td>
      </tr>
    </tbody>
  </table>
  <div class="card text-center" *ngIf="selectedEmployee">
      <div class="card-header">
        # 
      </div>
      <div class="card-block">
        <h4 class="card-title"></h4>
        <p class="card-text">

        </p>    
      </div>

    </div>
</div>

A Bootstrap 4 Card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

We use the built-in .table and .table-hover classes to create Bootstrap tables, the .card, .card-block, .card-title and .card-text classes to create cards.

Step 7 -- Adding A Bootstrap 4 Form Component to your Angular 10 App

Let’s proceed by adding a Bootstrap-styled form to the bootstrap-form component.

Next, go to the src/app/bootstrap-form/bootstrap-form.component.ts file and update it as follows:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'bootstrap-form/-create',
  templateUrl: './bootstrap-form/.component.html',
  styleUrls: ['./bootstrap-form/.component.css']
})
export class BootstrapForm/Component implements OnInit {

  employee : {id, name, description, email} = {id: null, name: "", description: "", email: ""};

  constructor() { }

  ngOnInit() {
  }

  createEmployee(){
    console.log("Employee created: ", this.employee);
    this.employee = {id: null, name: "", description: "", email: ""};

  }
}

Next, go to the src/app/bootstrap-form/bootstrap-form.component.html file and update it as follows:

<div class="container" style="margin-top: 70px;">

  <div class="row">

    <div class="col-sm-8 offset-sm-2">

      <div>
        <form>
          <div class="form-group">
            <label for="id">ID</label>
            <input [(ngModel)]="employee.id" type="text" name="id" class="form-control" id="id" aria-describedby="idHelp" placeholder="Employee ID">
            <small id="idHelp" class="form-text text-muted">Enter your employee’s ID</small>

            <label for="name">Employee Name</label>
            <input [(ngModel)]="employee.name" type="text" name="name" class="form-control" id="name" aria-describedby="nameHelp" placeholder="Enter your employee name">
            <small id="nameHelp" class="form-text text-muted">Enter your employee’s name</small>

            <label for="email">Employee Email</label>
            <input [(ngModel)]="contact.email" type="text" name="email" class="form-control" id="email" aria-describedby="emailHelp"
              placeholder="Enter your employee email">
            <small id="nameHelp" class="form-text text-muted">Enter your employee’s email</small>

            <label for="description">Employee Description</label>
            <textarea [(ngModel)]="employee.description" name="description" class="form-control" id="description" aria-describedby="descHelp">
                      </textarea>
            <small id="descHelp" class="form-text text-muted">Enter your employee’s description</small>

          </div>
        </form>
        <button class="btn btn-primary" (click)="createEmployee()">Create employee</button>
      </div>
    </div>
  </div>
</div>

We make use of the .form-group and .form-control classes to create a Bootstrap form.

Step 8 -- Serving your Angular 10 Application

Head over to your command-line interface, and run the following command from the folder of your project:

$ ng serve

A development server will be started at the http://localhost:4200 address.

Conclusion

As a recap, we have seen how to initialize an Angular 10 project and integrate it with Bootstrap 4. Next, we used various Bootstrap CSS utilities to create a responsive layout with tables, forms, buttons, cards and jumbotrons.



Create Angular 17 Project
Building a Password Strength Meter in Angular 17
Angular 17 Password Show/Hide with Eye Icon
Angular 17 tutoriel
Angular Select Change Event
Angular iframe
Angular FormArray setValue() and patchValue()
Angular Find Substring in String
Send File to API in Angular 17
EventEmitter Parent to Child Communication
Create an Angular Material button with an icon and text
Input change event in Angular 17
Find an element by ID in Angular 17
Find an element by ID from another component in Angular 17
Find duplicate objects in an array in JavaScript and Angular
What is new with Angular 17
Style binding to text-decoration in Angular
Remove an item from an array in Angular
Remove a component in Angular
Delete a component in Angular
Use TypeScript enums in Angular templates
Set the value of an individual reactive form fields
Signal-based components in Angular 17
Angular libraries for Markdown: A comprehensive guide
Angular libraries for cookies: A comprehensive guide
Build an Angular 14 CRUD Example & Tutorial
Angular 9 Components: Input and Output
Angular 13 selectors
Picture-in-Picture with JavaScript and Angular 10
Jasmine Unit Testing for Angular 12
Angular 9 Tutorial By Example: REST CRUD APIs & HTTP GET Requests with HttpClient
Angular 10/9 Elements Tutorial by Example: Building Web Components
Angular 10/9 Router Tutorial: Learn Routing & Navigation by Example
Angular 10/9 Router CanActivate Guards and UrlTree Parsed Routes
Angular 10/9 JWT Authentication Tutorial with Example
Style Angular 10/9 Components with CSS and ngStyle/ngClass Directives
Upload Images In TypeScript/Node & Angular 9/Ionic 5: Working with Imports, Decorators, Async/Await and FormData
Angular 9/Ionic 5 Chat App: Unsubscribe from RxJS Subjects, OnDestroy/OnInit and ChangeDetectorRef
Adding UI Guards, Auto-Scrolling, Auth State, Typing Indicators and File Attachments with FileReader to your Angular 9/Ionic 5 Chat App
Private Chat Rooms in Angular 9/Ionic 5: Working with TypeScript Strings, Arrays, Promises, and RxJS Behavior/Replay Subjects
Building a Chat App with TypeScript/Node.js, Ionic 5/Angular 9 & PubNub/Chatkit
Chat Read Cursors with Angular 9/Ionic 5 Chat App: Working with TypeScript Variables/Methods & Textarea Keydown/Focusin Events
Add JWT REST API Authentication to Your Node.js/TypeScript Backend with TypeORM and SQLite3 Database
Building Chat App Frontend UI with JWT Auth Using Ionic 5/Angular 9
Install Angular 10 CLI with NPM and Create a New Example App with Routing
Styling An Angular 10 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards
Integrate Bootstrap 4/jQuery with Angular 10 and Styling the UI With Navbar and Table CSS Classes
Angular 10/9 Tutorial and Example: Build your First Angular App
Angular 9/8 ngIf Tutorial & Example
Angular 10 New Features
Create New Angular 9 Workspace and Application: Using Build and Serve
Angular 10 Release Date: Angular 10 Will Focus on Ivy Artifacts and Libraries Support
HTML5 Download Attribute with TypeScript and Angular 9
Angular 9.1+ Local Direction Query API: getLocaleDirection Example
Angular 9.1 displayBlock CLI Component Generator Option by Example
Angular 15 Basics Tutorial by Example
Angular 9/8 ngFor Directive: Render Arrays with ngFor by Example
Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8
Angular 9/8 DOM Queries: ViewChild and ViewChildren Example
The Angular 9/8 Router: Route Parameters with Snapshot and ParamMap by Example
Angular 9/8 Nested Routing and Child Routes by Example
Angular 9 Examples: 2 Ways To Display A Component (Selector & Router)
Angular 9/8 Tutorial: Http POST to Node/Express.js Example
Angular 9/8 Feature and Root Modules by Example
Angular 9/8 with PHP: Consuming a RESTful CRUD API with HttpClient and Forms
Angular 9/8 with PHP and MySQL Database: REST CRUD Example & Tutorial
Unit Testing Angular 9/8 Apps Tutorial with Jasmine & Karma by Example
Angular 9 Web Components: Custom Elements & Shadow DOM
Angular 9 Renderer2 with Directives Tutorial by Example
Build Progressive Web Apps (PWA) with Angular 9/8 Tutorial and Example
Angular 9 Internationalization/Localization with ngx-translate Tutorial and Example
Create Angular 9 Calendar with ngx-bootstrap datepicker Example and Tutorial
Multiple File Upload with Angular 9 FormData and PHP by Example
Angular 9/8 Reactive Forms with Validation Tutorial by Example
Angular 9/8 Template Forms Tutorial: Example Authentication Form (ngModel/ngForm/ngSubmit)
Angular 9/8 JAMStack By Example
Angular HttpClient v9/8 — Building a Service for Sending API Calls and Fetching Data
Styling An Angular 9/8/7 Example App with Bootstrap 4 Navbar, Jumbotron, Tables, Forms and Cards

✋If you have any questions about this article, ask them in our GitHub Discussions 👈 community. You can also Gitter

✋ Want to master Angular 14? Read our angular tutorial and join our #DailyAngularChallenge where we learn to build components, directives, services, pipes and complete web, mobile, and desktop applications with latest Angular version.

✋ Make sure to join our Angular 14 Dev Community 👈 to discuss anything related to Angular development.

❤️ Like our page and subscribe to our feed for updates!

Find a list of emojis to copy and paste