Bootstrap and it’s feature
In this blog I am going discuss use of Bootstrap and its latest features. Web development means create a web site for internet (World Wide Web). Web development involves work for client and server side. In web development client is web browser and server is any web server where web application is deploy.
Front end of web application is develop by using front side technologies .To create front part of web application web developer use HTML, HTML-5, CSS, CSS3, JQuery and Bootstrap .Server side web application is created by using server side technology like Java (servlet,Jsp ) or framework like Spring and Hibernate . Dot net technologies like ASP.net etc.
Creating a web page by using HTML, CSS and run it on Desktop is fine. But same web page is run on different devices like tablets, Laptops and mobiles we can use Bootrap as it has mobile first approach to ensure proper rendering, zooming etc.
Bootstrap provide inbuilt classes and files to make more fun in designing and give new look more a design .We using bootstrap to convert our html page design into RWD (Responsive Web Design).
Now a days Millions of website designers and developers from all over the world use the Bootstrap framework to easily create good looking and highly functional websites with ease.
The Bootstrap framework that was released in the year 2011 has become immensely popular among website designers and developers in a short span of time. In fact, millions of developers from all over the world are incorporating the use of this excellent framework to build flawless and highly functional websites. The number of websites that uses the Bootstrap framework is estimated to be over millions.
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
Why to use Bootstrap framework?
1) Easy to get started
Every font end developer should know CSS Pre-processing .Still everyone is not use it. Some of the frontend designer create and manage CSS files in old way only.In Bootstrap CSS pre-processing is possible by using LESS files as well as it will support old CSS file.
2) Great grid system
A grid is a structure of series of intersecting lines .These are used to structure content. Grid system is very effective for rapid page design using HTML and CSS.
3) Base styling for most HTML elements
Website is consist of HTML elements which includes heading, list,button,list,form,menus, dropdowns etc.For these HTML elements Bootstrap provides a enhances and extensible classes.
Following HTML elements on which we can apply style.
- Typography
- Code
- Tables
- Forms
- Buttons
- Images
- Icons
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
4) Extensive list of component
Bootstrap provides us all the control for website development such as drop down menus, pagination, caret, breadcrumbs. It will allow to customize it by modifying LESS.
Some of the components pre-styled are:
- Drop-downs
- Button Groups
- Navigation Bar
- Breadcrumbs
- Labels & Badges
- Alerts
- Progress Bar
- And many others.
5) Bundled JavaScript plugins
Bootstrap provides JavaScript plugin packages which contains numerous JavaScript plugin for Bootstrap components.
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
6) Good documentation
Bootstrap comes with various packages containing ready-made components and CSS classes. To use these packages it provides us very good documentation with a lots of examples which really helps the website or web designer to use and understand new features.
Bootstrap 4 is finalized after beta version is on August 19 2015 which include few significant changes lets us discuss the same in this blog.
1) Reboot
In Bootstrap 3 Normalized.css is used to make a consistent look and feel (appearance) of web pages on all the browsers. In Bootstrap 4 the new version of Normalized.css is used called it as reboot which provides opinionated styles to an html elements using element selectors. To apply style on Html elements is by using Class only E.g. to apply style on <table> then .table class is use later on we can use table-hover, table-bordered.
2) SASS instead of LESS
SASS (Systematically awesome style sheet) and LESS (Leaner Stylesheet) are both are the pre-processor of CSS.While designing the HTML page and applying the CSS is repetitive task and hence it is time consuming. That is why pre-processors are come in pictures. Pre-processors is basically uses scripting language that extends CSS and then compiles into CSS.
Now a days SASS is most used CSS Pre-processor for front end technologies. .large community is using SASS and it is well documented.
Hence in bootstrap 4 for customization is done using SASS
3) New Grid system for smaller screens
The core fundamentals concept of bootstrap is Grid system. The Grid system allows you to create a layout using rows and columns .Grid system is having 12 column for different viewport size.
In Bootstrap 4 introduces mobile first Flexbox grid system, Sass variables and mixings, and dozens of predefined classes.
Before we start discussion on flex box grid system lets first understand what flex layout is?
Basically Flex-box module is W3C CSS-3 features which enables us efficient ways to layout, align and distribute space in a container .The main advantage if of flex layout is it allows to change width and height to fill available space. Flex container expand and shrinks the items to fill in available space.
- Bootstrap grid system has main three classes – .container, .row and .col. The container class gives a fixed width and container-fluid is full width layout.
- The .row class is used to divide the complete row width in 12 equal width columns.
- Further to add the actual content placed inside the column using .col or .col-* class.
e.g. Row can divide in three columns by adding class .col-4+.col-4+.col-4
Note: The column must be immediate child of row. - In Bootstrap 4 the column uses flexbox using .col class. This class divide a row into equal width column e.g. when we apply .col on 4 columns with in row then it will divide four columns in 25% area each automatically.
- If we explicitly define column width .col-sm-6 then it will take 50% of row width.
- Bootstrap 4 there is a default margin and padding is available for columns for better visibility. We can apply the class .noglutter in .row to remove additional margin and padding.
- Bootstrap 4 gives 5 breakpoints such as xs (extra small), sm (small), md (medium), lg (large) and xl (extra large)
Note: The default class .col is applied for all breakpoints. All other classes will be applied to all higher devices. e.g. .col-sm-4 will be applied to small, medium, large and extra devices.
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
Demo for Simple Grid
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Bootstrap4 Grid Example</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script>
</head>
<body>
<div class=”container”>
<br>
<div class=”row”>
<div class=”col” style=”background-color:cyan”>
.col
</div>
<div class=”col” style=”background-color:gainsboro”>
.col
</div>
<div class=”col” style=”background-color:cyan”>
.col
</div>
</div>
<br>
<!– One Column Width and Resize Other Columns–>
<div class=”row”>
<div class=”col” style=”background-color:cyan”>
.col
</div>
<div class=”col-6″ style=”background-color:gainsboro”>
.col-6
</div>
<div class=”col” style=”background-color:cyan”>
.col
</div>
</div>
<br>
<div class=”row”>
<div class=”col” style=”background-color:cyan; “>
.col
</div>
<div class=”col-5″ style=”background-color:gainsboro”>
.col-5
</div>
<div class=”col” style=”background-color:cyan”>
.col
</div>
</div>
</div>
</body>
</html>
4) Introduces Relative CSS Units (Rem)
In web development Typography is use to represent your work. To display the content on web page the various font style, size, color is use. Typography on web is use the unit such as rem, em and px.
Bootstrap 3 framework use pixel but Bootstrap 4 now updated typography with rem/em. Let’s understand what is rem? so rem is basically “Root em” . It is translated by browser in to px. If we use rem on font-size in root element and it is initial values.
font-size: 16 px on <html>then font-size of paragraph will be 1 rem.
When rem is used on the font-size in the root element, it represents its initial value. If we set the font-size: 16px of the root <html> element, then font-size of paragraph will be 1rem.
1rem=16px
Font-size of root element is change 20 px from 16 px. Then 1rem =20 px
html{
font-size:16px ; /* it means 16px is equal to 1rem */
}
In the below code paragraph font-size is 1rem, if we change font-size: 18px for paragraph then we need to calculate.
html{
font -size:16px
}
p{
font-size:1rem;
}
Similarly, we can also calculate the pixels from rem.
html{
font -size:16px
}
p{
font-size:1rem;
}
To set font-size:22px in rem of an element, we can calculate font-size
22px/16px = 1.375rem /* i.e. equal to 22px.*/
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
5) Bootstrap Cards
Bootstrap4 a new component is introduced called as a cards. In Bootstrap3 for cards component such as panels, thumbnails and well class is used but in new version we can use Single component called it as cards. Google Materials Design card is use as it is mobile friendly element.
Let’s us understand what is card? Basically cards consist of fluid container, footer and content. In content we can add image, description, title buttons and other components.
Demo for basic card with image, title and description
<!– Basic Card with Image, Title and Description –>
<div class=”row”>
<div class=”card” style=”width:20rem;”>
<img class=”card-img-top img-fluid” src=”https://img.webnots.com/2017/04/Bootstrap-Card-Image.png” alt=”card image”>
<div class=”card-body”>
<h4 class=”card-title”>Card Title</h4>
<p class=”card-text”>This is basic card with image on top, title, description and button.</p>
<a href=”#” class=”btn btn-primary”>Button</a>
</div>
</div>
Bootstrap classes used in above code :card, card-img-top, card-body,card-title
Demo for card with Subtitle
<div class=”card” style=”width:20rem;”>
<div class=”card-body”>
<h4 class=”card-title”>Card Title</h4>
<h6 class=”card-subtitle mb-2 text-muted”>Card Subtitle</h6>
<p class=”card-text”>This card has no image but has subtitle and two links instead of button.</p>
<a href=”#” class=”card-link”>Link 1</a>
<a href=”#” class=”card-link”>Link 2</a>
</div>
</div>
Bootstrap Classes used in above code : card, card-body and card-link
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
Demo for Card with Navigation
<div class=”card text-center”>
<div class=”card-header”>
<ul class=”nav nav-tabs card-header-tabs”>
<li class=”nav-item” style=”list-style-type: none;”>
<a class=”nav-link active” href=”#”>Tab1</a>
</li>
<li class=”nav-item” style=”list-style-type: none;”>
<a class=”nav-link” href=”#”>Tab2</a>
</li>
<li class=”nav-item” style=”list-style-type: none;”>
<a class=”nav-link disabled” href=”#”>Tab3</a>
</li>
</ul>
</div>
<div class=”card-body”>
<h4 class=”card-title”>This is a title for tab 1</h4>
<p class=”card-text”>This card uses navigation with default navigation components.</p>
<a href=”#” class=”btn btn-primary”>Button</a>
</div>
</div>
Bootstrap classes used in above code: card-header, card-header-tabs, card-body, card-title, card-text
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
Demo card with overlay
<div class=”card bg-dark text-white” style=”width:20rem;”>
<img class=”card-img” src=”https://img.webnots.com/2017/04/Bootstrap-Card-Image.png” alt=”Card image”>
<div class=”card-img-overlay”>
<h4 class=”card-title”>Card Title</h4>
<p class=”card-text”>Here is a short description to explain what this card is about.</p>
<p class=”card-text”><small class=”text-muted”>Enter some text here…</small></p>
</div>
</div>
Bootstrap classes used in above code : card-img-overlay
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
6) Typographic units of measurement
Typographic units of measurements are used to define the size of a page’s font and elements. BootStrap4 introduce a new measurement to the earlier versions. It use pixels(px) to root em(rem).
7) Style and appearance
Bootstrap4 apart from font-size change overall look and feel has completely change .There are some minor changes around the size of elements, padding and margins, as well as the primary context colour. Bootstrap 4 also no longer ships with Glyphicons, making the framework more lightweight but also requiring you to either manually integrate them, or choosing an alternative.
8) Improved form controls
Possibly one of the most exciting new features that ship with Bootstrap 4 are its improved form control styles. The current Alpha release comes with validation styles that finally render the many third-party Bootstrap validation plugins obsolete (see figure 1), and as such greatly improve the “out of the box” experience. And on top of this, Bootstrap tackles the problem of inconsistent form input control appearance across different browsers, by offering custom check boxes and radio inputs.
Thanks for reading this block. In this blog I discussed why Bootstrap and new feature of Bootstrap4, Demo for Basic Grid system and Card demos. Next blog I will be taking more examples of Bootstrap4 feature.
For Free Demo classes Call: 8237077325
Registration Link: Click Here!
Call the Trainer and Book your free demo Class for now!!!
