introduction to CSS Framework(Bootstrap)

Introduction

There are different aspect of making using of framework in web development and more essentially in the area of a frontend Engineer, which entails the framework for CSS3 and JavaScript. for the CSS framework we have the framework which are Tailwind and Bootstrap while for JavaScript framework which is AngularJs and the javascript library are Reactjs, Vuejs.. but we are going to be discussing about Bootstrap.

Prerequisite

before you start making use of this front-end framework, there is need for you to understand the fundamentals which can also be referred to as prerequisite

And this understand can only be the way forward to making use of the Bootstrap framework as a frontend developer, this entails having understanding on how to use HTML5 And CSS3

But there must be willingness to learn and understand this to be able to use Bootstrap very well..

The goal of this article🎉

After reading this article to the end, every reader should be able to :

• Understand what Bootstrap is,

• What it include and the functions it can perform.

• The reason for making use of Bootstrap with Html and CSS.

What is Bootstrap

Bootstrap is a free front-end framework for faster and easier web development, it include HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins

There are different type of Bootstrap

• Bootstrap 3

• Bootstrap 4

• Bootstrap 5
  There was upgrade in the development of this framework(Bootstrap) and from 3 and now to 5 and it has been able to work in different way I mean better than those available before, so we are discussing Bootstrap 5 which i will advice you to go..
  Note:- The Bootstrap requires a containing element to wrap site contents.

Bootstrap Container
what is a container in Bootstrap?
Containers are used to pad the content inside of them, and there are two container classes available:

• The .container class provides a responsive fixed width container

• The .container-fluid class provides a full width container, spanning the entire width of the viewport

And there different container Sections:-

• Fixed Container A sample of how the fixed container is programed

`<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>`

• Fluid Container A sample of how the fixed container is programed

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

• Container Padding A sample of how the fixed container is programed

<div class="container pt-3"></div>

• Container Border and Color A sample of how the fixed container is programed

<div class="container p-3 my-3 border"></div>

<div class="container p-3 my-3 bg-dark text-white"></div>

<div class="container p-3 my-3 bg-primary text-white"></div>

• Responsive Containers A sample of how the fixed container is programed

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>

What it include and the functions it can perform.

Bootstrap it makes the website responsive and which makes automatically adjust themselves to look good on all devices, from small phones to large desktops.
it include a lot and functions that help you easily as a frontend engineer get your design done in less time than you think

Functions it can perform

i have discuss one of the functions the bootstrap can perform to make it more responsive which is the Container and others will be listed below, Follow and enjoy the ride😄 😁 😆

Bootstrap Card

A card in Bootstrap 4 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.

Basic Card
A basic card is created with the .card class, and content inside the card has a .card-body class:

<div class="card">
  <div class="card-body">Basic card</div>
</div>

And in a Card we have the Header, Content and the footer. a code that display how it is arranged on a card

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

And to add a background color, we are going to be making use of Contextual Cards

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

</body>
</html>

The code above give illustrations of the different color that is imbedded in Bootstrap that can be use, check and enjoy the moment😀😃😄😁😆😅😊😇🙂

The reason for making use of Bootstrap with Html and CSS.

The need for responsiveness in a Website or a Web page cannot be overemphasized and making a frontend engineer happy and making the work awesome

Note that you cannot make use of Bootstrap without making use of Html and CSS and if you are reading this article I will encouraged you to read my previous articles to have the basic knowledge needed before approaching the CSS Frameworks

Conclusion

Wow😍🥰 I Hope and believe you have gain one or two things from this article, In this fantastic series of Getting Started with Bootstrap. keep an eye out for more from my blog.

You can also read this Article to learn more about Html and CSS

You can reach out to me on Twitter to learn more about any subject, and I will respond. Thank you for taking the time to read this😘.

Enjoy🎉