8. Bootstrap

Bootstrap in Web Programming

Introduction to Bootstrap

Bootstrap is a popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It's a toolkit with pre-made design templates, components, and functions to make coding websites easier and faster.

Key Points:

• Bootstrap enables the development of responsive websites without writing any CSS code.

• A downside of Bootstrap is that it can be heavy due to pre-existing components and styles, which might slow down a website.

Bootstrap Container

The container class in Bootstrap automatically makes the content responsive. It's a wrapper for the page content and it adjusts its width according to the screen size. There are two types of containers: .container and .container-fluid. The former provides a responsive fixed width container, while the latter provides a full width container, spanning the entire width of the viewport.

Example:

<div class="container">
  <!-- Any HTML content goes here -->
</div>

Bootstrap Grid System

Bootstrap's grid system allows for easy layout creation. It consists of row and column classes (col). By using these, you can divide the webpage into various sections.

Grid system creates a visual structure for designing layouts. It's based on a 12 column layout which can be combined in various ways to create different layouts.

Example:

<div class="row">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
  <div class="col">Column 3</div>
</div>

To create a gap between columns, you can use the m-1 class.

Example:

<div class="row">
  <div class="col m-1">Column 1</div>
  <div class="col m-1">Column 2</div>
  <div class="col m-1">Column 3</div>
</div>

Column Sizing

In Bootstrap, you can adjust the column size according to your needs using classes such as col-4, col-md-2, col-md-8, etc. These classes are responsive modifiers enabling different column sizes per row at different breakpoints.

Example:

<div class="row">
  <div class="col-4">Column 1</div>
  <div class="col-4">Column 2</div>
  <div class="col-4">Column 3</div>
</div>

And for different screen sizes:

<div class="row">
  <div class="col-md-2">Column 1</div>
  <div class="col-md-8">Column 2</div>
  <div class="col-md-2">Column 3</div>
</div>

In this example, when the viewport is at the md breakpoint (medium devices), the width of the first and third columns will be 2 units, and the second column will take up the remaining 8 units.

Reference

The content in this document is based on the original notes provided in Azerbaijani. For further details, you can refer to the original document using the following link:

Original Note - Azerbaijani Version