E2EHIRING Logo
Jobs
Jobs
courses
Courses
mentorship
Mentorship
more
Moredropdown
E2EHIRING Logo
more
Jobs
Jobs
courses
Courses
mentorship
Mentorship
HomeSepratorIconBlogsSepratorIconStyling WebPages with Bootstrap by chaithanyaSepratorIcon

Styling WebPages with Bootstrap by chaithanya

Han SoloChaithanya G S
calendar13 May 2022
poster

What is Bootstrap?

  • Bootstrap is a front-end frame work for easier web development.
  • Bootstrap consist of HTML and CSS based design for forms, tables, button, navigation, image carousels and many other to be continued.
  • Bootstrap is used to create responsive designs.
  • Responsive Web designs creates web styles that automatically get adjusted on all devices, from small screen device to large screen desktop.

Example for Bootstrap

<div class="container-fluid pt-5 bg-dark text-white border">
<p>Bootstrap Page</p>
</div>
<div class="container pt-5">
<div class="row">
<div class="col">
<h6>column1</h6>
<p>Here we are going to learn about Bootstrap Styling for web pages</p>
</div>
<div class="col">
<h6>column2</h6>
<p>we will learn how to make web pages responsive</p>
</div>
</div>
</div>

How to use Bootstrap?

  • Download Bootstrap from getbootstrap.com.
  • We can include Bootstrap from Content delivery network(CDN).
//Latest complied and minified css
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

//Latest complied Javascript
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">/script>


Containers

  • .container class with fixed width container
  • .container-fluid class with full width container
//Example for container class
<div class="container pt-5 border>
<p>welcome to Bootstrap</p>
</div>

//Example for container-fluid class
<div class="container-fluid pt-5 border>
<p>welcome to Bootstrap</p>
</div>

 

Container padding

Container padding has default left, right padding but it doesn't have have top and bottom padding, hence we make use of spacing utilities for example top padding which can be provided as pt-5.

Container Border and color- Adds color and border 

<div class="container pt-5 bg-primary text-white border">
<p>welcome to Bootstrap</p>
</div>

Responsive containers

  • .container-sm
  • .container-md
  • .container-lg
  • .container-xl

Bootstrap5 Grid

Bootstrap5 grid is built with flexbox, Bootstrap5 grid is responsive and the columns will get re-arranged automatically according to screen size

Equal Columns

//Example that creates equal column
<div class="container pt-5">
<div class="row">
<div class="col">column1</div>
<div class="col">column2</div>
</div>
</div>

Responsive Columns

//Example that creates responsive columns
<div class="container pt-5">
<div class="row">
<div class="col-sm-3">column1</div>
<div class="col-sm-3">column2</div>
</div>
</div>

Unequal Columns

//Example that creates various width column
<div class="container pt-5">
<div class="row">
<div class="col-sm-4">column1</div>
<div class="col-sm-8">column2</div>
</div>
</div>

Bootstrap5 Cards

Card is a bordered box which consist of Header, Content, Footer

<div class="card">
<div class="card-header">Consist of header part</div>
<div class="card-body bg-primary">consist body part of the card</div>
<div class="card-footer">consist footer part of the card</div>
</div>





Recent Posts

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

How to publish your Android app on Google Play Store

How to publish your Android app on Google Play Store

Creating Dynamic User Interfaces with Android Motion Layout

Creating Dynamic User Interfaces with Android Motion Layout

Bean Life Cycle

Bean Life Cycle

Pom.XML

Pom.XML

copycopycopycopy

Han Solo

Recent Posts

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

Rapid Changes in the Coding World: Need for High Skilled Programmers e2eHiring Bridges this Gap with the Mentorship Program April 2023

How to publish your Android app on Google Play Store

How to publish your Android app on Google Play Store

Creating Dynamic User Interfaces with Android Motion Layout

Creating Dynamic User Interfaces with Android Motion Layout

Bean Life Cycle

Bean Life Cycle

Pom.XML

Pom.XML