Scribd
Upload
4 views

Bootstrap (1)

Bootstrap is a widely-used front-end framework that facilitates the development of responsive, mobile-first websites through pre-designed components and a responsive grid system. It includes features like utility classes, customizable components, and JavaScript plugins, allowing for a flexible design process. Additionally, integrating tools like Balsamiq for wireframing can enhance the design workflow by visualizing Bootstrap components effectively.

Uploaded by

soniyagupta1154
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

Bootstrap (1)

Bootstrap is a widely-used front-end framework that facilitates the development of responsive, mobile-first websites through pre-designed components and a responsive grid system. It includes features like utility classes, customizable components, and JavaScript plugins, allowing for a flexible design process. Additionally, integrating tools like Balsamiq for wireframing can enhance the design workflow by visualizing Bootstrap components effectively.

Uploaded by

soniyagupta1154
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Bootstrap is a popular front-end framework for developing responsive and mobile-first websites.

It
provides a set of pre-designed components and a responsive grid system to help you create flexible and
adaptive web designs.

Here are the fundamentals of implementing responsive web design with Bootstrap:

1. Getting Started with Bootstrap

To start using Bootstrap, you can either download the framework or link to a Content Delivery Network
(CDN)

Here's an example of linking to the Bootstrap CDN in your HTML file:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"


content="width=device-width, initial-scale=1.0"> <title>Bootstrap Example</title> <link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body>
<!-- Your content goes here --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body> </html>

2. Responsive Grid System

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. It's
built with flexbox and is fully responsive2. Here's an example:

<div class="container"> <div class="row"> <div class="col-sm">Column 1</div> <div class="col-


sm">Column 2</div> <div class="col-sm">Column 3</div> </div> </div>

3. Responsive Utility Classes

Bootstrap provides utility classes to help you manage visibility, spacing, and alignment of elements based
on screen size. For example:

<div class="d-none d-md-block">This text is hidden on small screens but visible on medium and larger
screens.

4. Responsive Components

Bootstrap includes a variety of responsive components such as navigation bars, modals, carousels, and
more. Here's an example of a responsive navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand"


href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"
id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link"
href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-
link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li>
</ul> </div> </nav>
5. Customizing Bootstrap

You can customize Bootstrap by overriding its default styles using custom CSS or by using Sass variables.
This allows you to tailor the framework to match your design requirements.

6. JavaScript Plugins

Bootstrap includes JavaScript plugins for interactive components like modals, tooltips, and carousels.
Make sure to include the necessary JavaScript files to enable these features:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script


src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> <script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Balsamiq mockup:

Using Balsamiq to mockup and wireframe websites is a great way to visualize your design ideas quickly
and efficiently. Here's how you can integrate Balsamiq with Bootstrap to create wireframes for your
responsive web design:

1. Set Up Your Project

First, create a new project in Balsamiq Mockups. You can start with a blank canvas or use one of
Balsamiq's templates2.

2. Design Your Wireframes

Use Balsamiq's drag-and-drop interface to design your wireframes. You can add UI elements like buttons,
text fields, and images to represent the different components of your website3. Focus on the layout and
functionality rather than the visual design.

3. Incorporate Bootstrap Components

While designing your wireframes, think about how you will implement Bootstrap components in your
final design. For example, you can use placeholders for Bootstrap's grid system, navigation bars, modals,
and other responsive elements.

4. Use Bootstrap Grid System

In your wireframes, you can represent the Bootstrap grid system using placeholders. For example, you
can use rectangles to represent columns and rows2. This will help you visualize how your content will be
laid out on different screen sizes.

5. Add Annotations
Balsamiq allows you to add notes and annotations to your wireframes. Use this feature to explain how
certain elements will be implemented using Bootstrap. For example, you can add a note next to a
placeholder column indicating that it will be a Bootstrap col-md-4 column.

6. Collaborate with Your Team

Balsamiq offers collaboration features like comments and shared projects. Use these features to get
feedback from your team and ensure everyone is on the same page regarding the implementation of
Bootstrap components.

7. Export and Share

Once your wireframes are complete, you can export them as images or PDFs to share with your team.
This will help everyone understand the design and how it will be implemented using Bootstrap.

By following these steps, you can effectively use Balsamiq to mockup and wireframe your responsive
web design projects, ensuring a smooth transition from wireframes to the final implementation with
Bootstrap.

The fundamentals of UI design for websites:

UI design:

1. It's more about the "look." It's the visual design.

2. UI design is part of the user experience.

3. Focus on branding and graphic development.

4. Defines visual design documentation: Layout and responsiveness.

5. Design specs: Icon and illustration set.

5 UI design principles to remember


1.Visibility

The key elements need to be visible.

2.Consistency

Whether it's the color, typography, buttons, or locations, keep it the same.

3. Feedback

Giving the users feedback is vital to help them go in the right direction and keep using your product.

4. Predictability

Predictability means designing the interface so that the user knows the forecast of the following action.
5. Learnability

you can create an interface that allows the users to move around and get to their desired actions
without needing assistance in any way.

BootStrap 5 Layout Grid System


BootStrap5 Layout Grid system is responsive. It comes with a flexbox and allows up to 12 columns
across the page. You can also group the columns together. The grid system is a powerful mobile-first
responsive flexbox grid.

How it works: Here’s how the grid system comes together:

 Its grid supports six responsive breakpoints. You can control container, column sizing and
behavior by each breakpoint.

 Containers center and horizontally pad your content. Use container class for responsive width
and container-fluid class for 100% width across all viewports and devices. Use container-
md class for both fluid and pixel width.

 Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for
controlling the space between them.

 Columns are incredibly flexible. There are 12 template columns available per row, allowing you
to create different combinations of elements that span any number of columns.

 Gutters are also responsive with customizable available across all breakpoints. We can change
horizontal gutters with .gx-* and vertical gutters with .gy-*

BootStrap5 Layout Grid System:

Grid options: Bootstrap’s grid system works for all six breakpoints i.e xs, sm, md, lg, xl, xxl.

Auto-layout columns: This provides the creation of easy column sizes without an explicit numbered class.

Responsive classes: They provide predefined classes for building complex responsive, dynamic, and
flexible layouts.

Nesting: We need to add a new row and set of columns for nesting which includes a set of columns that
add up to 12 or fewer.

Sass: This system also provides Sass variables and mixins to create custom and responsive page layouts.

Customizing the grid: This is used to customize your grid as you want by using built-in grid Sass variables
and map.

Example 1: Let’s see an example of auto-layout columns.


<!DOCTYPE html>

<html>

<head>

<!--Bootstrap CDN -->

<link rel="stylesheet"

href=

"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"

crossorigin="anonymous">

</head>

<body class="m-2">

<h1 class="text-success"> GeeksforGeeks </h1>

<h3>BootStrap5 Layout Grid system</h3>

<section class="container">

<section class="row">

<section class="col border bg-success">

GFG Column 1

</section>

<section class="col border bg-secondary">

GFG Column 2

</section>

<section class="col border bg-danger">

GFG Column 3

</section>

</section>

<br>

<section class="row">
<section class="col border bg-warning">

GFG Column 1

</section>

<section class="col-6 border bg-light">

GFG Column 2

</section>

<section class="col border bg-info">

GFG Column 3

</section>

</section>

</section>

</body>

</html>

Bootstrap 5 Layout Containers


Bootstrap5 Layout Containers are considered the most basic layout that can be used and they can be
used to contain other layouts. Containers are basically used to add pad the contents inside or center the
items inside the container. In this article, we’ll see Bootstrap 5 Layout Containers.
Layout Containers: There are three types of containers available in Bootstrap i.e., Default container, Fluid
container, and responsive container.

 Default Container: This is the most simple one with all the basic necessities. The default
Container is a responsive container and has a fixed width for every breakpoint or screen size
like small, medium, large, and so on.

 Fluid containers: This is used to utilize the whole space that is provided to the container. The
Fluid Container is a container that occupies all the space available from one end to the other end
for every breakpoint or screen size like small, medium, large, and so on.

 Responsive Container: This is used to set a custom responsive container. The Responsive
Container is the one that becomes a container after specifying the specific breakpoint or screen
size like sm, md, lg, xl and xxl. Before hitting that breakpoint size which is specified it acts as
a Fluid container.

 Sass: It has a set of predefined container classes which makes building layouts easier. We can
customize it by changing the Sass map.

 Syntax:
 <div class="Container-class">
// Content
</div>
<!doctype html>

<html lang="en">

<head>

<link href=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"

rel="stylesheet">

<script src=

"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">

</script>

</head>

<body>

<h1 class="mt-3 text-success">

Nitra
</h1>

<h4>Bootstrap 5 Layout Containers</h4>

<div class="container bg-secondary p-4 mt-3">

<nav class="navbar navbar-expand-lg

navbar-light bg-light">

<a class="navbar-brand"

href="#">

This is a navbar inside a Div

which is a default Container.

</a>

</nav>

</div>

<div class="container-fluid bg-secondary p-4 mt-3">

<nav class="navbar navbar-expand-lg

navbar-light bg-light">

<a class="navbar-brand"

href="#">

This is a navbar inside a Div

which is a Fluid Container

</a>

</nav>

</div>

</body>

</html>

Bootstrap Buttons
To achieve the button styles above, Bootstrap has the following classes:

 .btn

 .btn-default

 .btn-primary

 .btn-success

 .btn-info

 .btn-warning

 .btn-danger

 .btn-link

The following example shows the code for the different button styles:

Example

<button type="button" class="btn">Basic</button>


<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

The button classes can be used on an <a>, <button>, or <input> element:

Example

<a href="#" class="btn btn-info" role="button">Link Button</a>


<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
The classes that define the different sizes are:

 .btn-lg

 .btn-sm

 .btn-xs

The following example shows the code for different button sizes:

Example

<button type="button" class="btn btn-primary btn-lg">Large</button>


<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>

Add class .btn-block to create a block level button:

Example

<button type="button" class="btn btn-primary btn-block">Button 1</button>

The class .active makes a button appear pressed, and the class .disabled makes a button unclickable:

Example
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

How to Use Font Awesome Icons In HTML?

Icons play an important role in our modern applications. If we use good icons in our website then it can
attract the user's attention and also help the user to identify which purpose it is used for.

Prerequisites

HTML

CSS

Font Awesome icons

Approach To Use Font Awesome Icons

First, you need to add the Font Awesome stylesheet to your HTML file. This can be done by including the
following CDN link in the <head> section of your HTML document.

Next, create a container in your HTML where you will display the icons. You can use a <div> or any other
appropriate HTML element.

To make your icons visually appealing, you can apply some CSS styles. Below is an example of how to
style the icons and their container.

Once you’ve set up the HTML and CSS, open your HTML file in a web browser to see the icons displayed.
Ensure that the icons are visible, properly aligned, and styled according to your preferences.

Example: The example code below shows how to use font awesome icons in HTML.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content=

"width=device-width, initial-scale=1.0">

<title>How to Use Font Awesome Icons</title>

<link rel="stylesheet" href="style.css">

<!-- Font Awesome CDN -->


<link rel="stylesheet" href=

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

</head>

<body>

<div class="container">

<header>

<h1>Learn How to Use Font Awesome Icons</h1>

</header>

<section class="icon-demo">

<div class="icon-row">

<div class="icon-card">

<i class="fas fa-home"></i>

<p>Home</p>

</div>

<div class="icon-card">

<i class="fas fa-user"></i>

<p>User</p>

</div>

<div class="icon-card">

<i class="fas fa-envelope"></i>

<p>Email</p>

</div>

<div class="icon-card">

<i class="fas fa-cog"></i>

<p>Settings</p>

</div>

<div class="icon-card">

<i class="fab fa-twitter"></i>

<p>Twitter</p>
</div>

</div>

</section>

<footer>

<p>&copy; 2024 Font Awesome Tutorial | Created by Your Name</p>

</footer>

</div>

</body>

</html>

CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
background-color: #f5f7fa;
color: #333;
padding: 40px;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

header {
margin-bottom: 40px;
}

header h1 {
font-size: 2.8rem;
color: #2be459;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
margin-bottom: 10px;
}

.icon-demo {
background-color: #ffffff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
margin: 0 auto;
text-align: center;
}

.icon-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 25px;
justify-items: center;
margin-top: 30px;
}

.icon-card {
background-color: #f0f2f5;
padding: 30px;
border-radius: 10px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 150px;
}

.icon-card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.icon-card i {
font-size: 3.5rem;
transition: color 0.3s ease;
}

.icon-card i.fa-home {
color: #ff6347;
}

.icon-card i.fa-user {
color: #4caf50;
}

.icon-card i.fa-envelope {
color: #007bff;
}

.icon-card i.fa-cog {
color: #ff9800;
}

.icon-card i.fa-twitter {
color: #1da1f2;
}

.icon-card p {
margin-top: 15px;
font-size: 1.1rem;
color: #333;
font-weight: 500;
}

footer {
background-color: #2c3e50;
color: #ffffff;
padding: 20px;
margin-top: 50px;
text-align: center;
border-radius: 10px;
}

footer p {
font-size: 1rem;
margin: 0;
}

.icon-card:hover {
cursor: pointer;
}

@media (max-width: 768px) {


.icon-demo {
padding: 30px;
}

header h1 {
font-size: 2.2rem;
}
}

Bootstrap Carousel Plugin


The Carousel Plugin
The Carousel plugin is a component for cycling through elements, like a
carousel (slideshow).

How To Create a Carousel


The following example shows how to create a basic carousel:
Example
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->


<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles">
</div>

<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>

<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>

<!-- Left and right controls -->


<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

You might also like