Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Installing Bootstrap

To install Bootstrap, run the following command in your terminal:

ng add @ng-bootstrap/ng-bootstrap

Bootstrap grid system

Bootstrap uses a 12-column grid system. The grid system is responsive, meaning that it will automatically adjust to the screen size of the device.

Containers

Allows for centering content on the page. There are two types of containers: .container and .container-fluid. The .container class provides a responsive fixed width container, while the .container-fluid class provides a full width container, spanning the entire width of the viewport.

<!-- Using .container to create a responsive fixed-width container -->
<div class="container">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>

<!-- Using .container-fluid for a full width container, spanning entire width of the viewport -->
<div class="container-fluid">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
</div>

Rows

Rows are used to create horizontal groups of columns. Rows must be placed within a .container or .container-fluid class.

<!-- Using .container with .row and .col classes to structure your content -->
<div class="container">
  <div class="row">
    <div class="col">
      <h1>Column 1</h1>
      <p>This is some content for the first column. The row and column classes allow you to structure and align your Bootstrap layout.</p>
    </div>
    <div class="col">
      <h1>Column 2</h1>
      <p>This is some content for the second column. The content will be aligned next to the first column as long as the viewport is large enough.</p>
    </div>
  </div>
</div>

Columns

Columns are used to create the horizontal groups of elements. Columns must be placed within a .row class. Columns are defined by using the .col class. The number of columns is defined by the number after the .col class. For example, .col-4 will create a column that is 4 columns wide. The number of columns must add up to 12 or less. If the number of columns is more than 12, the columns will wrap to the next line.

<!-- Using .container, .row, and .col to structure your content -->
<div class="container">
  <div class="row">
    <div class="col-4">
      <h1>Title</h1>
      <p>This is some content for a column. This column is 4 out of 12 columns wide on all viewport sizes.</p>
    </div>
    <div class="col-8">
      <h1>Title</h1>
      <p>This is some content for a column. This column is 8 out of 12 columns wide on all viewport sizes.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <h1>Title</h1>
      <p>This is some content for a column. This column is 6 out of 12 columns wide on all viewport sizes.</p>
    </div>
    <div class="col-6">
      <h1>Title</h1>
      <p>This is some content for a column. This column is 6 out of 12 columns wide on all viewport sizes.</p>
    </div>
  </div>
</div>

Navbar

The navbar is a horizontal navigation bar that is used to display links to different pages of a website. The navbar is defined by using the .navbar class. The navbar can be fixed to the top or bottom of the page by using the .fixed-top or .fixed-bottom classes. The navbar can also be sticky by using the .sticky-top class. It comes pre-equipped with a .navbar-brand class that is used to display the name of the website. .navbar-nav provides support for navigation, and .navbar-toggler provides support for toggling the navbar.

For example, the following code creates a navbar with a brand and a link to the home page, in Angular:

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" routerLink="/home">
        <img class="navbar-brand-image ms-1" src="/assets/logo_top.png" alt="Website logo"/>
    </a>
    <button class="navbar-toggler hidden-sm-up me-1" type="button" (click)="isNavbarCollapsed = !isNavbarCollapsed" data-target="#navbarsDefault" aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div [ngbCollapse]="isNavbarCollapsed" class="collapse navbar-collapse ms-2" id="navbarsDefault">
        <ul class="navbar-nav ms-auto">
            <li class="nav-item">
                <a class="nav-link" routerLink="/home" routerLinkActive="activeLink" [routerLinkActiveOptions]="{exact: true}">HOME</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/economy" routerLinkActive="activeLink">ECONOMIE</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="/justice" routerLinkActive="activeLink">JUSTIȚIE</a>
            </li>
        </ul>
    </div>
</nav>

Buttons

Bootstrap has a lot of pre-built button styles. The button styles are defined by using the .btn class. The button styles are defined by using the .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, .btn-link classes. The button styles can be combined by using the .btn-group class. The button styles can also be combined with the .btn-block class to create a block-level button.

<!-- Primary Button -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Secondary Button -->
<button type="button" class="btn btn-secondary">Secondary</button>

<!-- Success Button -->
<button type="button" class="btn btn-success">Success</button>

<!-- Danger Button -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Warning Button -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Info Button -->
<button type="button" class="btn btn-info">Info</button>

<!-- Light Button -->
<button type="button" class="btn btn-light">Light</button>

<!-- Dark Button -->
<button type="button" class="btn btn-dark">Dark</button>

<!-- Link styled as Button -->
<button type="button" class="btn btn-link">Link</button>

Buttons groups:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Block-level buttons:

<button type="button" class="btn btn-primary btn-block">Block level button</button>

Margin and Padding

In Bootstrap 5, margin and padding are handled by the spacing utilities which use a set of shorthand classes. These classes use the format {property}{sides}-{size} for {property} being 'm' for margins and 'p' for padding. {sides} can be:

• t: for classes that set margin-top or padding-top
• b: for classes that set margin-bottom or padding-bottom
• l: for classes that set margin-left or padding-left
• r: for classes that set margin-right or padding-right
• x: for classes that set both *-left and *-right
• y: for classes that set both *-top and *-bottom
• blank: for classes that set a margin or padding on all 4 sides of the element.
• auto: for classes that set the margin property to auto.

{size} value is from 0 to 5 and it determines the size of the margin or padding. For instance, -0 removes the margin or padding by setting it to 0 while -5 sets margin or padding to 3rem.

Here are few examples to showcase this in a better way.

• Setting padding on all 4 sides of the element to 3rem:

<div class="p-5">...</div>

• Setting padding on top and bottom of the element to 3rem:

<div class="py-5">...</div>

• Setting margin on the top of the element to 1rem:

<div class="mt-4">
    This div has a margin-top of 1rem.
</div>

• Removing padding on the left of the element:

<div class="pl-0">
  This div has no padding on the left.
</div>

Flex

Flex classes in Bootstrap 5 start with a .d- prefix which applies the display property. You can then append flex or inline-flex to apply the required property.

.d-flex
.d-inline-flex

Directional classes

Bootstrap 5 Flex includes classes to control the flex-direction property as well.

Justify Content

There are classes available to control the justify-content property which aligns the flex items along the horizontal line.

• .justify-content-start: items are packed toward the start line.
• .justify-content-end: items are packed toward the end line.
• .justify-content-center: items are centered along the line.
• .justify-content-between: items are evenly distributed in the line.
• .justify-content-around: items are evenly distributed in the line with equal space around them.

Align Items

The align-items property aligns flex items along the vertical line. Bootstrap 5 provides classes for this. .align-items-start: items are placed at the start of the container. .align-items-end: items are placed at the end of the container. .align-items-center: items are centered in the container. .align-items-baseline: items are aligned such as their baselines align. .align-items-stretch: stretch to fill the container.

<div class="d-flex align-items-center">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Align Self

The align-self property aligns a flex item along the cross-axis.

• .align-self-start: The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
• .align-self-end: The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
• .align-self-center: The flex item's margin box is centered within the line on the cross-axis.
• .align-self-baseline: The flex item's margin box is aligned with the baseline of the box. If the item's inline axis is the same as the line's cross-axis, it's equivalent to start.
• .align-self-stretch: The flex item will stretch to fill the line.

tip

The align-self property overrides the container's align-items property for that one item.

<div class="d-flex align-items-center">
  <div class="p-2 align-self-end">Home</div>
  <div class="p-2">About</div>
  <div class="p-2">Contact</div>
</div>