Scribd
Upload
513 views

Bootstrap

Bootstrap is a popular front-end framework that provides pre-designed templates and tools to help developers create responsive and mobile-first websites quickly. It is based on HTML, CSS, and JavaScript and can be used by including its CSS and JavaScript files in a project. Bootstrap features a powerful grid system based on rows and columns that uses Flexbox for responsive layouts across different screen sizes. It also offers customization options through Sass variables and the ability to override default styles.

Uploaded by

alaa abu madi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
513 views

Bootstrap

Bootstrap is a popular front-end framework that provides pre-designed templates and tools to help developers create responsive and mobile-first websites quickly. It is based on HTML, CSS, and JavaScript and can be used by including its CSS and JavaScript files in a project. Bootstrap features a powerful grid system based on rows and columns that uses Flexbox for responsive layouts across different screen sizes. It also offers customization options through Sass variables and the ability to override default styles.

Uploaded by

alaa abu madi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Bootstrap

What is Bootstrap?
• Bootstrap is a popular front-end framework that provides pre-designed
templates and tools to help developers create responsive and mobile-
first websites quickly and easily.
• Bootstrap is based on HTML, CSS, and JavaScript and is open-source,
meaning that it's free to use and customize.
• Current Bootstrap version is v5.3
• Official Website: https://getbootstrap.com/
How to use Bootstrap?
Option 1
1.Download Bootstrap: You can download the Bootstrap CSS and
JavaScript files from the official website.
2.Include Bootstrap files: After downloading Bootstrap, you need to
include the CSS and JavaScript files in your project. You can do this
by adding the following code to your HTML file:
How to use Bootstrap?
Option 2
• You can also use the Bootstrap CDN (Content Delivery Network) to
include the files. This can be useful for faster loading times and better
performance. Why?
Start using Bootstrap
• Once you have included the Bootstrap files in your project, you can
start using the pre-designed templates and tools that Bootstrap
provides.
• You can use Bootstrap classes in your HTML elements to style them.
For example, to create a button, you can use the following code:
Customize Bootstrap
• Bootstrap provides a lot of customization options that you can use to
make your website look unique.
• You can customize the color scheme, fonts, and other elements of
Bootstrap by using the Sass files that come with Bootstrap.
• You can also override Bootstrap's default styles by creating your own
CSS file and including it after the Bootstrap CSS file.
What is Sass?
• Sass (short for "Syntactically Awesome Style Sheets") is a
preprocessor scripting language that extends the capabilities of CSS.
• It allows you to use variables, functions, and other programming
concepts in your stylesheet, making it easier and more efficient to
write and maintain CSS code.
• Sass files are files that contain Sass code, which is then compiled into
regular CSS code that can be used in your web pages. Sass files have
the file extension ".scss" (for the newer "Sassy CSS" syntax) or ".sass"
(for the older, more concise syntax).
Bootstrap Grid System
• The Bootstrap grid system is a powerful, responsive layout system that
allows you to create flexible and dynamic layouts for your web pages.
• The grid system is based on a 12-column layout, which you can
customize and use to create layouts for different screen sizes and
devices.
Bootstrap Grid System
• The Bootstrap grid system is based on the use of rows and columns.

• In this example, the row class creates a new row, and the col-md-6
class is applied to each column to specify that it should take up 6 of
the 12 available columns on screens that are medium-sized (or larger).
• The -md- part of the class name is a breakpoint, which indicates that
the column should apply to screens with a width of at least 768 pixels.
Bootstrap Grid break-points
• Bootstrap provides several breakpoint classes that allow you to create
responsive designs that adapt to different screen sizes. These classes
are used to specify different column widths for different screen sizes
Bootstrap Grid break-points
• To use these classes, you would typically combine them with the col
class to specify the width of a column.
• For example, if you want a column to take up 6 out of 12 columns on
small screens and 4 out of 12 columns on medium-sized screens, you
could use the following markup:
Bootstrap Grid break-points
• If you use the col class without any breakpoint, the column will take
up the full width of the row on all screen sizes.
• This is equivalent to using the col-12 class, which specifies that the
column should take up 12 out of the 12 available columns. For
example:
Bootstrap Grid break-points – equal-width
columns
• If you want to create a layout with multiple equal-width columns, you
can still use the col class,
• For example, if you want to create a layout with three equal-width
columns, you can use the following markup:
Bootstrap Container class
• It's typically used as a parent element for other Bootstrap components, such as the grid
system.
• There are two variations of the container class in Bootstrap:

1.‘container’: This class creates a container with a fixed width based on the screen size.
The width of the container changes at each breakpoint, so that the content remains
centered and readable on different devices.
2.‘container-fluid’: This class creates a full-width container that spans the entire width of
the viewport. It doesn't have any fixed width, and adjusts to the size of the screen,
regardless of the device or viewport width.
Bootstrap Container class
• Example
Bootstrap Container class
Bootstrap and Flexbox
• Bootstrap 4 and later versions use the Flexbox layout model for its grid
system.
• Flexbox is a powerful layout model that allows you to create flexible and
responsive layouts, and it is supported by most modern browsers.
• The Bootstrap grid system is based on a set of classes that allow you to create
rows and columns, and to specify the width and alignment of each column.
• By default, the columns are set to display: flex, which allows them to expand
and shrink to fill the available space.

You might also like