CSS and Bootstrap

Difference Between CSS and Bootstrap
 Difficulty Level : Medium

 Last Updated : 14 Feb, 2022
Cascading Style Sheet(CSS): CSS is developed by Hakon Wium, Bert Bos, World
Wide Web 17 December 1996. It is a language used to describes how HTML elements
are to be displayed on a web page or layout of HTML documents like fonts, color,
margin, padding, Height, Width, Background images, etc. CSS stands for Cascading
Style Sheet, here Cascading refers to Section in which we apply Style procedure, and
Style refers to color, Margin, font for table paragraphs, and Heading, etc. Sheet refers
to how web pages look. In CSS we can change the look and layout of webpages by
editing a single CSS file.
There are three types of CSS.
1. Inline CSS
2. Internal CSS
3. External CSS
Example: This example describes the use of simple CSS properties.
<!DOCTYPE html>
<html>

<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>

<body>
<p>Geeksforgeeks</p>
<p>
A Computer Science
portal for Geeks
</p>
</body>

</html>
Output:
Bootstrap: Bootstrap is the most popular open-source front-end framework. It is

developed by Mark Otto, Jacob Thornton 19 August 2011. Bootstrap is a collection of
CSS classes and JavaScript function and it is used for responsive design and building
responsive, mobile-first site and application. It generally works on a grid system for
creating page layout with the help of rows and columns and it supports all browsers
for creating responsive websites.
Example:
<!DOCTYPE html>
<html lang="en">

<head>
<title>Bootstrap Color 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.3.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">
<h2>Bootstrap Colors List</h2>
<ul>
<li class="text-muted">GeeksforGeeks</li>
<li class="text-primary">GeeksforGeeks</li>
<li class="text-success">GeeksforGeeks</li>
<li class="text-info">GeeksforGeeks</li>
<li class="text-warning">GeeksforGeeks class</li>
<li class="text-danger">GeeksforGeeks</li>
<li class="text-secondary">GeeksforGeeks</li>
<li class="text-white">GeeksforGeeks</li>
<li class="text-dark">GeeksforGeeks</li>

</ul>
</div>
</body>

</html>
Output:
Difference between CSS and Bootstrap:

Cascading Style Sheet(CSS) Bootstrap
CSS is developed by Hakon Wium Lie,
Bert Bos, World Wide Web 17 Bootstrap is developed by Mark Otto,
December 1996. Jacob Thornton 19 August 2011.
CSS represent the style and the Bootstrap is a free and open-source CSS
appearance of content like font, color, Framework that is used for developing
margin, padding, etc. responsive website.
CSS does not have a grid system. Bootstrap is based on-grid system.
It currently working on CSS3 which is Bootstrap currently working on Bootstrap 5

the latest version of CSS. which is the latest version of Bootstrap.
CSS does not provide responsive pages In Bootstrap we can design a responsive
or website. website or webpages.
CSS is more complex than Bootstrap

because there is no pre-defined class Bootstrap is easy to understand and it has
and design. much pre-design class.
In CSS, we have to write code from In Bootstrap, we can add pre-defined class
scratch. into the code without writing code.
Difference between CSS and

JavaScript
 Last Updated : 24 Dec, 2021
CSS and JavaScript both are used on Web pages with HTML but for different roles.
CSS is used to design the webpage for better layouts for the user, that the user can feel
comfortable with the Web page. JavaScript is used to create interaction between
webpages and the user.
CSS: CSS stands for Cascading Style Sheet, it is a style sheet language used to shape
the HTML elements that will be displayed in the browsers as a web-page. Without
using CSS, the website which has been created by using HTML will look dull.
Basically CSS gives the outer cover on any HTML elements. If you consider HTML
as a skeleton of the web-page then the CSS will be the skin of the skeleton. The
Internet media type (MIME type) of CSS is text/CSS.
CSS Features:
 CSS is compatible with all the devices.
 With the help of CSS, website maintenance is easy and faster.
 CSS support consistent and spontaneous changes.
 CSS makes the website faster and enhances search engine capabilities to crawl the
web pages.
 It holds a special feature that is the ability to re-position.
JavaScript: It is a lightweight, cross-platform, and interpreted scripting language. It is
well-known for the development of web pages, many non-browser environments also
use it. JavaScript can be used for Client-side developments as well as Server-side
developments. JavaScript contains a standard library of objects, like Array, Date, and
Math, and a core set of language elements like operators, control structures, and
statements. JavaScript can be used as Client-Side as well as Server-Side.
JavaScript Features:
 JavaScript was created in the first place for DOM manipulation. Earlier websites
were mostly static after JavaScript it was created dynamic Web sites.
 Functions in JS are objects. They may have properties and methods just like
another object. They can be passed as arguments in other functions.
 It can handle date and time.
 Performs Form Validation although the forms are created using HTML.
 No compiler needed.
Difference between CSS and JavaScript:
CSS Javascript
JavaScript is dependable for the

CSS stylizes components of the webpage. interactivity of the webpage.
CSS is much easier and more basic when

it comes to web page formatting and JavaScript is tougher compare to CSS in
designing. this scenario.
CSS directly defines in the <style> tag in The <script> tag should be used for
HTML. JavaScript code.
CSS can not approve shapes, can be JavaScript can approve shapes, can be
utilized to identify guest browsers, and utilized to identify guest browsers, and
can be utilized to recover and store data can be utilized to recover and store data
from visitors’ computers. from visitors’ computers.
Difference between Bootstrap 4 and

Bootstrap 5
 Difficulty Level : Easy
 Last Updated : 13 Dec, 2021
What is Bootstrap?
It is an open-source framework from late 2011 that is used for designing responsive
websites with a mobile-first approach faster and easier. Bootstrap is available for
HTML, CSS, and JS. According to server-side languages like PHP, Node, etc.
bootstrap helps to design the frontend. Bootstrap has made the work for developers
easier by making the templates ready which are basic part of every website. Thus
people tend to develop further and don’t waste time on basic templates with beautiful
designs along with responsiveness available.
Why Bootstrap?
 Faster and Easier
 Mobile First style
 It is free! Available on www.getbootstrap.com
 Browser support
 Responsive Design
Bootstrap 5 alpha launched in mid-June of 2020. As it is in the alpha-1 version, in the
future some more features can be added to bootstrap 5
In the alpha-1 version of bootstrap 5 some classes removed are:
 form – row
 form – inline
 list – inline
 card – deck

Some of the added classes:
 gx-* (classes control the horizontal/column gutter width)
 gy-* (classes control the vertical/row gutter width)
 g-* (classes control the horizontal & vertical gutter width)
 rows-cols-auto
Difference between Bootstrap 4 and Bootstrap 5
BASIS OF BOOTSTRAP 4 BOOTSTRAP 5
Grid It has 6 tier (xs, sm, md, lg, xl,

System It has 5 tier (xs, sm, md, lg, xl). xxl).
Extra colors added with the

looks, A card improved color
palette. there are various shades
Color It has limited colors. available to choose.
Jquery It has jquery and all related Jquery is removed and switched
plugins. to vanilla JS with some working
plugins
Internet Bootstrap 4 supports both IE 10 Bootstrap 5 doesn’t support IE

Explorer and 11. 10 and 11.
The look of form elements will

not change, on different OS or
Radio buttons, checkboxes have browser. The forms can be
different look in different OS and customized and form controls
Form browsers. The form uses whatever can be added, they would not
elements default browsers provide. depend on browser.
Bootstrap 5 gave freedom to

Utilities We cannot modify utilities in modify and also create our own
API bootstrap 4 utility
Gutter We use .glutter with fontsize in px We use .g* with fontsize in rem
Vertical Columns cannot be positioned

Classes Columns can be positioned relative relative
Bootstrap 4 doesn’t have its own

Bootstrap SVG icons, we have to use font- Bootstrap 5 have its own SVG
Icons awesome for icons. icons
Jumbotron It supports. It doesn’t support jumbotron.
The card deck is used to create an

isset of cards with equal width and Card deck class in removed in
Card deck height. bootstrap
We have inline-block property and Inline-block property is

we will get white dropdown as removed and we will get black
default for dropdown-menu-dark dropdown as default for
Navbar class. dropdown-menu-dark class.
Static Site Bootstrap 5 uses Hugo software

Generator Bootstrap 4 uses Jekyll software. as it is fast static site generator.
this makes easier to implement

vertical designs, and the columns
and rows can easily be
implemented. the classes justify-
center-content can directly be used advanced grid system is made
to align according to the available , also columns don’t
flexbox grid requirement. have relative positions.
CSS Syntax and Selectors

 Difficulty Level : Basic
 Last Updated : 11 Oct, 2021
A CSS Syntax rule consists of a selector, property, and its value. The
selector points to the HTML element where CSS style is to be applied. The
CSS property is separated by semicolons. It is a combination of selector
name followed by the property: value pair that is defined for the specific
selector.
Syntax:
selector { Property: value; }
For instance, we have declared a heading tag(h1) along with having
assigned some property: value pair that is used to style the heading tag.
Here, h1 is selector, { color: green; font-family: sans-serif; } is a declaration
block & it can contain one or more declarations separated by
semicolons, color: green; is a property: value pair that is applied to the HTML
element in order to style them.
h1 { color: green; font-family: sans-serif;}
Every declaration has a CSS property name and a value, separated by a
colon & is surrounded by curly braces. For declaring the multiple CSS
properties, it can be separated by the semicolon.
Example: This example illustrates the use of CSS Syntax for the styling of
HTML elements.
 HTML
<!DOCTYPE html>
<html>
<head>


<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:
A CSS Selectors are used to selecting HTML elements based on their

element name, id, attributes, etc. It can select one or more elements
simultaneously.
CSS Selector can be divided into 5 categories:
 Simple Selector: It is used to select the HTML elements based on their
element name, id, attributes, etc.
 Combinators Selector: It is used for explaining the relationship between
two selectors.’
 Pseudo-classes Selector : It is used to define the special state of an
element.
 Pseudo Elements Selector : It is a keyword added to a selector that lets
you style a specific part of the selected elements.
 Attribute Selector Selector: It is used to select an element with some
specific attribute or attribute value.
We will focus ourselves to the Simple Selector & also understand its
implementation through the examples.
The Simple Selector can be categorized in 3 ways:
CSS element selector : The element selector in CSS is used to select HTML
elements that are required to be styled. In a selector declaration, there is the
name of the HTML element, and the CSS properties which are to be applied
to that element are written inside the brackets {}.
Syntax:
element_name {
// CSS Property
}
Example: This example illustrates the use of the element selector for
selecting the HTML elements by their element name & style them.
 HTML
<!DOCTYPE html>
<html>
<head>


<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
Output:
CSS id selector : The #id selector is used to set the style of the given id. The
id attribute is the unique identifier in an HTML document. The id selector is
used with a # character.
Syntax:
#id_name {
// CSS Property
}
Example: This example illustrates the use of the id selector for selecting the
HTML elements by their id & style them.
 HTML
<!DOCTYPE html>
<html>
<head>


<style>
#heading {
color: green;
text-align: center;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="heading"> GeeksforGeeks </div>
</body>
</html>
Output:
CSS class selector: The .class selector is used to select all elements which
belong to a particular class attribute. To select the elements with a particular
class, use (.) character with specifying the class name. The class name is
mostly used to set the CSS property to the given class.
Syntax:
.class_name {
// CSS Property
}
Example: This example illustrates the use of the class selector for selecting
the HTML elements by their class & style them.
 HTML
<!DOCTYPE html>
<html>
<head>


<style>
.heading {
color: green;
text-align: center;
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="heading"> GeeksforGeeks </div>
</body>
</html>
Output:
For applying the common CSS style properties to all the HTML Elements
then we can use the universal selector which is denoted by a star(*)
symbol.
CSS * Selector : The * selector in CSS is used to select all the elements in
an HTML document. It also selects all elements which are inside under
another element. It is also called the universal selector.
Syntax:
* {
// CSS property
}
Example: This example illustrates the use of the universal selector for
selecting all the HTML elements that contain the common CSS properties &
styles them.
 HTML
<!DOCTYPE html>
<html>
<head>
<title>* Selector</title>


<style>
* {
color: green;
text-align: center;
}
</style>
</head>
<body>
<h2>*(Universal) Selector</h2>
<div>

<p>GFG</p>

<p>Geeks</p>
</div>

<p>It is a computer science portal for geeks.</p>

</body>
</html>
Output:
Supported Browser:
 Google Chrome 94.0
 Microsoft Edge 94.0
 IE 11.0
 Firefox 93.0
 Opera 80.0
 Safari 15.0

CSS and Bootstrap

Uploaded by

Copyright:

Available Formats

CSS and Bootstrap

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS and Bootstrap

Uploaded by

Copyright:

Available Formats

Difference Between CSS and Bootstrap

 Difficulty Level : Medium

A Computer Science

portal for Geeks

Bootstrap: Bootstrap is the most popular open-source front-end framework. It is

<title>Bootstrap Color Example</title>

<link rel="stylesheet" href=

<h2>Bootstrap Colors List</h2>

<li class="text-warning">GeeksforGeeks class</li>

Difference between CSS and Bootstrap:

It currently working on CSS3 which is Bootstrap currently working on Bootstrap 5

CSS is more complex than Bootstrap

Difference between CSS and

JavaScript is dependable for the

CSS is much easier and more basic when

Difference between Bootstrap 4 and

Grid It has 6 tier (xs, sm, md, lg, xl,

Extra colors added with the

Internet Bootstrap 4 supports both IE 10 Bootstrap 5 doesn’t support IE

The look of form elements will

Bootstrap 5 gave freedom to

Vertical Columns cannot be positioned

Bootstrap 4 doesn’t have its own

Jumbotron It supports. It doesn’t support jumbotron.

The card deck is used to create an

We have inline-block property and Inline-block property is

Static Site Bootstrap 5 uses Hugo software

this makes easier to implement

CSS Syntax and Selectors

A CSS Selectors are used to selecting HTML elements based on their

<div id="heading"> GeeksforGeeks </div>

<div class="heading"> GeeksforGeeks </div>

<p>It is a computer science portal for geeks.</p>

You might also like