What is Bootstrap ? Why use Bootstrap?, Container class and Tables

Bootstrap is an open-source front-end framework that simplifies web development by providing a collection of pre-designed, responsive components and CSS classes.
It helps you create visually appealing and mobile-friendly web applications with ease.

Why Use Bootstrap?

Responsive Design: Bootstrap ensures your website looks great on various devices and screen sizes, from desktops to mobile phones.
Consistency: It provides a consistent design language and user experience across your site.
Faster Development: Bootstrap's ready-made components save development time.
Customizability: You can customize Bootstrap to match your project's unique needs.

Getting Started with Bootstrap

To start using Bootstrap, follow these steps:

Linking with Bootstrap

Include the following code in the <head> section of your HTML file to link your project with Bootstrap's CSS and JavaScript:

1<!-- Add the Bootstrap CSS stylesheet -->
2<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
3
4<!-- Add the Bootstrap JavaScript library (jQuery and Popper.js are required) -->
5<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
6<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
7<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
8

This code links to the Bootstrap files hosted on a content delivery network (CDN), making them easily accessible.
Now you can start using Bootstrap classes in your HTML.

Bootstrap's Core Concepts

Container Class

The .container class is a fundamental Bootstrap component that wraps the content of your page.
It ensures that the content is centered and provides padding to improve readability.

1<div class="container">
2  <!-- Your content goes here -->
3</div>
4

Grid System

Bootstrap's grid system allows you to create responsive layouts by dividing your page into rows and columns.
Columns are defined using classes like .col-sm-4 (for small screens) or .col-lg-6 (for large screens). Example:ove readability.

Here's how to use it:

1<div class="container">
2  <div class="row">
3    <div class="col-sm-6">
4      <!-- Content for the first column -->
5    </div>
6    <div class="col-sm-6">
7      <!-- Content for the second column -->
8    </div>
9  </div>
10</div>
11

Tables

You can easily style tables using Bootstrap. Apply the .table class to a <table> element and use other classes like .table-striped or .table-bordered for additional styles:

1table class="table table-striped table-bordered">
2  <!-- Table content goes here -->
3</table>

Images

To make images responsive, add the .img-fluid class:

1<img src="your-image.jpg" class="img-fluid" alt="Responsive Image">

Buttons

Bootstrap provides predefined button styles. Use classes like .btn, .btn-primary, or .btn-danger:

1<button class="btn btn-primary">Primary Button</button>
2<button class="btn btn-danger">Danger Button</button>

Typography Classes

Bootstrap offers various typography classes to style text. For example, .h1 to .h6 for headings, .lead for larger text, and .text-muted for muted text:

1<h1 class="h1">Heading 1</h1>
2<p class="lead">This is a lead paragraph.</p>
3<p class="text-muted">This text is muted.</p>

Jumbotron

A jumbotron is a large callout for showcasing content. Use the .jumbotron class:

1<div class="jumbotron">
2  <h1 class="display-4">Hello, Bootstrap!</h1>
3  <p class="lead">This is a simple jumbotron example.</p>
4</div>

Glyphicons (Icons)

Bootstrap used to provide Glyphicons, but they are no longer included in newer versions. Consider using other icon libraries like Font Awesome for icons in your project.

These Bootstrap basics should give you a solid foundation for creating responsive and visually appealing web applications. Experiment with these components to build your web pages quickly and effectively.

Table of contents