Using Bootstrap with AngularJS for UI design

Bootstrap is a popular front-end framework for building responsive and visually appealing UI designs. When integrated with AngularJS, Bootstrap helps in creating mobile-friendly, structured layouts while AngularJS provides dynamic behavior.

1. Installing Bootstrap in an AngularJS Project

Using a CDN (Recommended)

Add the Bootstrap CSS and JS files in your HTML file before your AngularJS scripts:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">

<!-- Bootstrap JS and jQuery (Optional, required for some Bootstrap components) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

Note: jQuery should be loaded before bootstrap.min.js.

Using npm or Yarn

If using a module bundler:

npm install bootstrap --save

yarn add bootstrap

Then, import Bootstrap in your JavaScript file:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

2. Creating a Responsive Layout with Bootstrap in AngularJS

Bootstrap’s grid system can be used inside AngularJS templates to create a responsive design.

Example: Simple Bootstrap Layout

<div class="container" ng-app="myApp">
    <div class="row">
        <div class="col-md-6">
            <h2>Left Column</h2>
            <p>This is a Bootstrap-powered responsive layout.</p>
        </div>
        <div class="col-md-6">
            <h2>Right Column</h2>
            <p>Works seamlessly with AngularJS!</p>
        </div>
    </div>
</div>

Uses Bootstrap’s grid system (col-md-6) for responsiveness.
ng-app="myApp" ensures AngularJS is active.

3. Using Bootstrap Components in AngularJS

Example: Bootstrap Buttons

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success Button</button>

Example: Bootstrap Alerts (With AngularJS Dynamic Binding)

<div class="alert alert-info" ng-show="showAlert">
    This is an AngularJS-powered Bootstrap alert!
</div>

<button class="btn btn-warning" ng-click="showAlert = !showAlert">Toggle Alert</button>

ng-show="showAlert" dynamically toggles the alert.
ng-click changes the alert visibility on button click.

4. Using Bootstrap Forms in AngularJS

Bootstrap form components work well with AngularJS’s ng-model and validation.

Example: Bootstrap Form with AngularJS Validation

<div class="container">
    <form name="userForm">
        <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" id="username" class="form-control" ng-model="user.name" required>
            <small class="text-danger" ng-show="userForm.username.$dirty && userForm.username.$invalid">
                Username is required.
            </small>
        </div>

        <button class="btn btn-primary" ng-disabled="userForm.$invalid">Submit</button>
    </form>
</div>

form-control applies Bootstrap styling.
ng-model="user.name" binds the input to AngularJS scope.
ng-disabled="userForm.$invalid" disables the button if form is invalid.

5. Bootstrap Modals with AngularJS

Example: Showing a Modal in AngularJS

<!-- Button to open modal -->
<button class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Bootstrap Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">AngularJS Modal</h4>
            </div>
            <div class="modal-body">
                <p>Bootstrap modal inside AngularJS.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Uses Bootstrap’s modal component with data-toggle="modal".
The modal opens on button click and closes when clicking outside.

6. Using AngularJS with Bootstrap UI (ui-bootstrap)

For AngularJS-specific Bootstrap components, use UI Bootstrap, which replaces jQuery-based Bootstrap components with pure AngularJS directives.

Installing Angular UI Bootstrap

npm install angular-ui-bootstrap --save

Or include from CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.6/ui-bootstrap-tpls.min.js"></script>

Example: Using UI Bootstrap Modal

var app = angular.module('myApp', ['ui.bootstrap']);

app.controller('ModalCtrl', function($scope, $uibModal) {
    $scope.openModal = function() {
        $uibModal.open({
            template: '<div class="modal-header"><h3 class="modal-title">AngularJS UI Modal</h3></div>' +
                      '<div class="modal-body"><p>This modal uses UI Bootstrap.</p></div>' +
                      '<div class="modal-footer"><button class="btn btn-primary" ng-click="$close()">Close</button></div>'
        });
    };
});

HTML Usage

<div ng-controller="ModalCtrl">
    <button class="btn btn-warning" ng-click="openModal()">Open Modal</button>
</div>

uibModal.open() replaces the default Bootstrap modal with an AngularJS-friendly version.