Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

Python

Unit-2 focuses on designing websites using Bootstrap 4, a free front-end framework that simplifies web development with responsive design capabilities. It covers key features such as the mobile-first approach, grid structure, and various components including tables, alerts, forms, and buttons. The document provides examples and guidelines for implementing these features in web pages.

Uploaded by

ishanpatel445
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Python

Unit-2 focuses on designing websites using Bootstrap 4, a free front-end framework that simplifies web development with responsive design capabilities. It covers key features such as the mobile-first approach, grid structure, and various components including tables, alerts, forms, and buttons. The document provides examples and guidelines for implementing these features in web pages.

Uploaded by

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

Unit-2 Design Web Sites Using Bootstrap4

2.1 Bootstrap Introduction


What is Bootstrap?
 Bootstrap is a free front-end framework for faster and easier web development
 Bootstrap includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many other, as well as optional
JavaScript plugins.
 Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?
Responsive web design is about creating web sites which automatically adjust themselves to look
good on all devices, from small phones to large desktops.

Advantages of Bootstrap:
 Easy to use: Anybody with just basic knowledge of HTML and CSS can start using
Bootstrap
 Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and
desktops
 Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework
 Browser compatibility: Bootstrap 4 is compatible with all modern browsers (Chrome,
Firefox, Internet Explorer 10+, Edge, Safari, and Opera)
Create First Web Page with Bootstrap 4

1. Add the HTML5 doctype


Bootstrap 4 uses HTML elements and CSS properties that require the HTML5 doctype.
Always include the HTML5 doctype at the beginning of the page, along with the lang attribute
and the correct character set:
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>

2. Bootstrap 4 is mobile-first
Bootstrap 4 is designed to be responsive to mobile devices. Mobile-first styles are part of the
core framework.
To ensure proper rendering and touch zooming, add the following <meta> tag inside
the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part sets the width of the page to follow the screen-width of the device
(which will vary depending on the device).
The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.
3. Containers
Bootstrap 4 also requires a containing element to wrap site contents.
There are two container classes to choose from:
1. The .container class provides a responsive fixed width container

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

2. The .container-fluid class provides a full width container, spanning the entire width of
the viewport
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="D:\WEB-1\Practical\bootstrap-4.0.0-dist\css\bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
2.2 Grid Structure

Bootstrap's grid system is built with flexbox (easily format HTML) and allows up to 12 columns
across the page.
If you do not want to use all 12 columns individually, you can group the columns together to
create wider columns:
span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 1

span 4 span 4 span 4

span 4 span 8

span 6 span 6

span 12
Grid Classes
The Bootstrap 4 grid system has five classes:
 .col- (extra small devices - screen width less than 576px)
 .col-sm- (small devices - screen width equal to or greater than 576px)
 .col-md- (medium devices - screen width equal to or greater than 768px)
 .col-lg- (large devices - screen width equal to or greater than 992px)
 .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

The classes above can be combined to create more dynamic and flexible layouts.
Note: Each class scales up, so if you wish to set the same widths for sm and md, you only need
to specify sm.
Basic Structure of a Bootstrap 4 Grid
The following is a basic structure of a Bootstrap 4 grid:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="D:\WEB-1\Practical\bootstrap-4.0.0-dist\css\bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>Responsive Columns</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than
576px wide.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
</div>
</div>
</body>
</html>
2.3 Table, Colours, Alerts, Form Controls
Table

A basic Bootstrap 4 table has a light padding and horizontal dividers.


The .table class adds basic styling to a table:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="D:\WEB-1\Practical\bootstrap-4.0.0-dist\css\bootstrap.min.css">
</head>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Shalini</td>
<td>Mali</td>
<td>sm@example.com</td>
</tr>
<tr>
<td>Hiral</td>
<td>Patel</td>
<td>hp@example.com</td>
</tr>
<tr>
<td>Swaara</td>
<td>Desai</td>
<td>sd@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
 Classes use in table
table-striped, .table-bordered, .table-hover, .table-dark, .table-hover, .table-borderless, .table-
primary, .table-success, .table-danger, .table-info, .table-warning, .table-active, .table-
secondary, .table-light, .table-dark, .thead-dark, .thead-light, table-sm, .table-responsive,
.table-responsive-sm, .table-responsive-md, .table-responsive-lg, .table-responsive-xl,
<table class="table">
</table>
Colours

Bootstrap 4 has some contextual classes that can be used to provide "meaning through colors".

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-
warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body
color/often black) , .text-light, text-black-50, text-white-50 bg-dark
Ex: <p class="text-muted"> This text is muted. </p>

Contextual text classes can also be used on links, which will add a darker hover color:
Ex: <a href="#" class="text-muted">Muted link.</a>
Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-
danger, .bg-secondary, .bg-dark and .bg-light.
Ex: <p class="bg-primary text-white">This text is important.</p>
Bootstrap 4 Alerts
Bootstrap 4 provides an easy way to create predefined alert messages:
Alerts are created with the .alert class, followed by one of the contextual classes .alert-
success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-
light or .alert-dark:
Ex:
<body>
<div class="container">
<h2>Alerts</h2>
<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
<div class="alert alert-success">
<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
<div class="alert alert-info">
<strong>Info!</strong> This alert box could indicate a neutral informative change or action.
</div>
<div class="alert alert-warning">
<strong>Warning!</strong> This alert box could indicate a warning that might need attention.
</div>
<div class="alert alert-danger">
<strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative
action.
</div>
<div class="alert alert-primary">
<strong>Primary!</strong> Indicates an important action.
</div>
<div class="alert alert-secondary">
<strong>Secondary!</strong> Indicates a slightly less important action.
</div>
<div class="alert alert-dark">

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

<strong>Dark!</strong> Dark grey alert.


</div>
<div class="alert alert-light">
<strong>Light!</strong> Light grey alert.
</div>
</div>
</body>
Form Controls

Form controls automatically receive some global styling with Bootstrap:


All textual <input>, <textarea>, and <select> elements with class .form-control have a width of
100%.

Bootstrap provides two types of form layouts:


 Stacked (full-width) form
 Inline form
Example
<div class="container">
<h2>Stacked form</h2>
<form action="home.html">
<div class="form-group">
Email: <input type="email" class="form-control" id="email" placeholder="Enter email"
name="email">
</div>
<div class="form-group">
Password:
<input type="password" class="form-control" id="pwd" placeholder="Enter password"
name="pswd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
Bootstrap Inline Form
In an inline form, all of the elements are inline and left-aligned.
Additional rule for an inline form:
 Add class .form-inline to the <form> element
Ex: <form class="form-inline" action="home.html">

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

<form action="home.html" class="needs-validation">


2.4 Buttons and ButtonGroups
Button Styles
Bootstrap 4 provides different styles of buttons:
Example:
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</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-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>

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


Example:
<div class="container">
<h2>Button Elements</h2>
<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">
</div>
Button Outline
Bootstrap 4 provides eight outline/bordered buttons:
Example:
<div class="container">
<h2>Button Outline</h2>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

</div>
Button Sizes
Use the .btn-lg class for large buttons or .btn-sm class for small buttons:
Example:
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>

Block Level Buttons


Add class .btn-block to create a block level button that spans the entire width of the parent
element.
Example : <button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
Active/Disabled Buttons
A button can be set to an active (appear pressed) or a disabled (unclickable) state:
The class .active makes a button appear pressed, and the disabled attribute makes a button
unclickable. Note that <a> elements do not support the disabled attribute and must therefore use
the .disabled class to make it visually appear disabled.
Example:
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
Spinner Buttons
You can also add "spinners" to a button
Example:
<div class="container">
<h2>Spinner Buttons</h2>
<p>Add spinners to buttons : </p>

<button class="btn btn-primary">


<span class="spinner-border spinner-border-sm"></span>
</button>

<button class="btn btn-primary">


<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

<button class="btn btn-primary" disabled>


<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>

<button class="btn btn-primary" disabled>


<span class="spinner-grow spinner-grow-sm"></span>
Loading..

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

</button>
</div>
Button Groups
Bootstrap 4 allows you to group a series of buttons together (on a single line) in a button group:
Example:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Vertical Button Groups
Bootstrap 4 also supports vertical button groups:
Example:
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
2.5 Images, Media Objects
To add images using bootstrap:
Example:
<div class="container">
<h2>Rounded Corners</h2>
<img src="i3.jpeg" class="rounded" alt="Nature Picture" width="300" height="200">
<img src="i4.jpeg" class="rounded-circle" alt="Nature Picture" width="300"
height="200">
<img src="i5.jpeg" class="img-thumbnail" alt="Nature Picture" width="300"
height="200">
</div>

<div class="container">
<h2>Aligning images</h2>
<img src="i6.jpeg" class="float-left" alt="Paris" width="304" height="236">
<img src="i7.jpeg" class="float-right" alt="Paris" width="304" height="236">
</div>

<div class="row container">


<h2>Centered Image</h2>
<p>Center an image by adding the utility classes .mx-auto (margin: auto) and .d-block (display:
block) to the image :</p>
<img src="i8.jpeg" class="mx-auto d-block" style="width: 40%; height: 300">

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

</div>
Media Objects
Bootstrap provides an easy way to align media objects (like images or videos) to the left or to the
right of some content. This can be used to display blog comments, tweets and so on…

Use a <div> element with the .media class to create a container for media objects.
Use the .media-left class to align the media object (image) to the left, or the .media-right class to
align it to the right.
Text that should appear next to the image, is placed inside a container with class="media-body".
Additionally, you can use .media-heading for headings.
2.6 Pagination
If you have a web site with lots of pages, you may wish to add some sort of pagination to each
page.
To create a basic pagination, add the .pagination class to an <ul> element. Then add the .page-
item to each <li> element and add the .page-link class to each link <a> inside <li>.
The .active class is used to "highlight" the current page:
The .disabled class is used for un-clickable links
Example:
<ul class="pagination">
<li class="page-item"><a class="page-link" href="home.html">Previous</a></li>
<li class="page-item"><a class="page-link" href="button.html">1</a></li>
<li class="page-item active"><a class="page-link" href="images_bs.html">2</a></li>
<li class="page-item"><a class="page-link" href="colors.html">3</a></li>
<li class="page-item"><a class="page-link" href="first_bootstrap.html">Next</a></li>
</ul>

2.7 Bootstrap Grids


We already cover this topic earlier.
2.8 Bootstrap Themes
We have created a responsive starter template with Bootstrap 4.
You are free to modify, save, share, and use it in your projects

Example:
<style>
.fakeimg {
height: 200px;
background: #aaa;
}
</style>
</head>
<body>

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

<div class="jumbotron text-center" style="margin-bottom:0">


<h1>My First Bootstrap 4 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">


<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>

<div class="container" style="margin-top:30px">


<div class="row">
<div class="col-sm-4">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg">Fake Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>Some Links</h3>
<p>Lorem ipsum dolor sit ame.</p>
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali


Unit-2 Design Web Sites Using Bootstrap4

<a class="nav-link" href="#">Link</a>


</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<hr class="d-sm-none">
</div>
<div class="col-sm-8">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg">Fake Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg">Fake Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco.</p>
</div>
</div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">


<p>Footer</p>
</div>

</body>
</html>

Web Designing-1(305) SYBCA Semester 3 Prepared By Dr. Shalini A. Mali

You might also like