Scribd
Upload
6 views

Unit 1 HTML CSS

Html and css unit 1

Uploaded by

2001rajbhushanavatar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Unit 1 HTML CSS

Html and css unit 1

Uploaded by

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

UNIT I:

HTML AND CSS


Bootstrap containers:
• play a crucial role in web layout design by providing a consistent and responsive structure for
organizing content on a webpage. They help control the width of the content and maintain a
balanced and visually pleasing layout, regardless of the screen size or device being used.

Role of Bootstrap Containers:


• Content Structuring: Bootstrap containers are used to wrap and contain the main content of a
webpage. They establish a logical boundary for your content, ensuring it doesn't span the entire
width of the screen, which can lead to readability issues on larger screens.

• Responsive Design: Containers are designed to be responsive. They automatically adjust their
width based on the device's screen size, making your content look good on both desktop and
mobile devices.

• Consistency: Bootstrap containers provide a consistent and standardized starting point for
layout design. This helps maintain a uniform look and feel across different sections of your
website.
<!DOCTYPE html> <div class="row">
<html lang="en"> <div class="col-md-6">
<head> <h2>About Us</h2>
<meta charset="UTF-8"> <p>WRITE THE PARAGRAPH</p>
<meta name="viewport" content="width=device- </div>
width, initial-scale=1.0">
<div class="col-md-6">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstra <h2>Contact Us</h2>
p/4.5.2/css/bootstrap.min.css"> <p>Email: [email protected]</p>
<title>Bootstrap Container Example</title> <p>Phone: 9876555890</p>
</head> </div>
<body> </div>
<div class="container"> </div>
<h1>Welcome to Our Website</h1> </body>
<p>This is a simple example of a Bootstrap </html>
container with filled content.</p>
Bootstrap grid system :
• The Bootstrap grid system enables the creation of responsive layouts. It's based on a 12-
column grid, which allows web developers to divide a webpage's content into rows and
columns, making it easy to create layouts that adapt to different screen sizes and devices.
• Steps for creating a responsive two-column layout using Bootstrap's grid system:

1: Include Bootstrap CSS


Include the Bootstrap CSS in the <head> section of your HTML document. You can do this by
adding the following line within the <head> tags:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
Bootstrap grid system :
2: Create a Container
Wrap your content in a Bootstrap container. The container helps center and control the width of your content:
<div class="container">
<!-- Your content will go here -->
</div>

3: Create Rows
Inside the container, create a row to hold your columns. Rows are used to group and align columns
horizontally:
<div class="container">
<div class="row">
<!-- Your columns will go here -->
</div> </div>
Bootstrap grid system :
4: Create Columns
Now, within the row, create the two columns for two-column layout. We can specify the column size for each screen size (e.g.,
small, medium, large) using classes like col-sm-6 (which means each column takes up 6 out of 12 columns on small screens) and
col-md-6 (which means each column takes up 6 out of 12 columns on medium and larger screens).

<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<!-- Content for the first column -->
</div>
<div class="col-sm-6 col-md-6">
<!-- Content for the second column -->
</div>
</div>
</div>
Bootstrap grid system :
5: Add Content
• Place your content inside each column. You can add text, images, or any other HTML
elements as needed for your layout. Customize the content according to your design
requirements.

6: Test Responsiveness
• Bootstrap's grid system will automatically adjust the column layout based on the screen size.
Test your layout on different devices or by resizing your browser window to see how it adapts
to various screen sizes.
Compare Bootstrap container-fluid class and container class in web
design

Container class:
• Fixed-Width Container: The container class creates a fixed-width container with a maximum
width based on the screen size. It is centered on the page.
• The container class is suitable for websites that require a fixed-width layout, ensuring that
content doesn't extend too wide on larger screens.
• It's commonly used for content-driven websites such as blogs, news sites, or documentation
where maintaining a consistent line length for readability is important.

<div class="container">
<!-- Content goes here -->
</div>
Compare Bootstrap container-fluid class and container class in web
design

Container-fluid class:

• Full-Width Container: The container-fluid class creates a full-width container that spans the
entire width of the viewport, making it ideal for responsive designs.
• The container-fluid class is well-suited for modern, responsive web designs where content
should expand to fill the available space on screens of all sizes.
• It's commonly used for landing pages, marketing websites, and applications that need a
flexible and responsive layout.

<div class="container-fluid">
<!-- Content goes here -->
</div>
Compare Bootstrap container-fluid class and container class in web
design

Comparison:
Width: The primary difference is in their width. container has a fixed width, while container-
fluid spans the full width of the viewport.

Scalability: container-fluid is more scalable and adapts better to various screen sizes, making
it ideal for responsive design.

Centering: Both classes center content horizontally, providing a clean and balanced
appearance.
d-* Classes (Display Utilities)
• Bootstrap's d-* classes, also known as Display Utilities, are a set of CSS classes that control
the visibility and display behavior of HTML elements on different screen sizes or
breakpoints.
• These classes are useful for creating responsive web designs by showing or hiding elements
based on the available screen.

Commonly used d-* classes:


d-none: This class tells the browser to hide (not display) the element it's applied to.
d-md-none: This class tells the browser to hide (not display) the element on medium-sized
screens and larger.
d-lg-none: This class tells the browser to hide (not display) the element on large sized screens.
d-xl-none: This class tells the browser to hide (not display) the element on extra large sized
screens.
d-* Classes (Display Utilities)
d-block: Makes the element a block-level element, displaying it normally.
d-md-block: This class tells the browser to display the element as a block (a distinct, separate
element) on medium-sized screens and larger.
d-lg-block: Displays the element as a block on large and larger screens.
d-xl-block: Displays the element as a block on extra-large screens.
d-inline: Makes the element an inline-level element, displaying it inline with text.
d-inline-block: Makes the element an inline-block level element, displaying it inline but with
block-level properties.
d-* Classes (Display Utilities)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Utility Classes Example</title>
<!-- Include Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
d-* Classes (Display Utilities)
<h1 class="d-none d-md-block">This heading is hidden on small screens.</h1>
<p class="d-md-none">This paragraph is hidden on medium and larger screens.</p>
<button class="btn btn-primary d-lg-none">Click me on small and medium
screens</button>
<button class="btn btn-danger d-lg-block">Click me on large and larger
screens</button>
</div>
</body>
</html>
d-* Classes (Display Utilities)
<h1 class="d-none d-md-block">This heading is hidden on small screens.</h1>
<h1> is an HTML tag that represents a top-level heading on a webpage, typically used for
important titles.
Class is an HTML attribute used to apply one or more CSS classes to an element.

"d-none d-md-block" are CSS classes applied to this heading.


d-none: This class tells the browser to hide (not display) the element it's applied to. In this
case, it's making the heading invisible.
d-md-block: This class tells the browser to display the element as a block (a distinct, separate
element) on medium-sized screens and larger.
d-* Classes (Display Utilities)
btn-primary Class: It's used to define a specific style for the button. In this case, btn-primary
gives the button a blue color, indicating that it's the primary or most important action on the
page.
Bootstrap classes for styling lists and customizing list icons:
list-group: This class creates a list with a border and rounded corners, often used for
navigation or displaying a collection of items.

<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
Bootstrap classes for styling lists and customizing list icons:
Customizing List Icons:
Bootstrap allows you to customize list item icons (bullets for unordered lists and numbers for
ordered lists) by applying specific classes:

list-group-item-action: Use this class to make list items look like clickable elements.
<ul class="list-group">
<li class="list-group-item list-group-item-action">Clickable Item 1</li>
<li class="list-group-item list-group-item-action">Clickable Item 2</li>
</ul>
Bootstrap classes for styling lists and customizing list icons:
Creating Horizontal Lists:
You can create horizontal lists by using the list-inline class. This is useful for displaying inline
lists such as navigation menus.

<ul class="list-inline">
<li class="list-inline-item">Item 1</li>
<li class="list-inline-item">Item 2</li>
<li class="list-inline-item">Item 3</li>
</ul>
Bootstrap classes for styling lists and customizing list icons:
Adding Badges to List Items:
You can add badges to list items using the badge class. This is helpful for indicating counts or
statuses next to list items.
<ul>
<li>Item 1 <span class="badge">5</span></li>
<li>Item 2 <span class="badge">3</span></li>
<li>Item 3 <span class="badge">8</span></li>
</ul>
In the code above, we've added a <span> element with the "badge" class immediately after
each list item. Inside the <span>, we've placed numbers (5, 3, 8) to represent counts or
statuses related to each list item.
Bootstrap classes for styling lists and customizing list icons:
Custom Styling for List Items:
You can also apply custom CSS classes to list items alongside Bootstrap classes for more specific styling:

<ul class="list-group">
<li class="list-group-item custom-list-item">Custom Item 1</li>
<li class="list-group-item custom-list-item">Custom Item 2</li>
</ul>
<style>
.custom-list-item {
background-color: #f0f0f0;
color: #333;
font-weight: bold;
}
</style>
Tables with Bootstrap styles and features :

1: Creating a table

To start, you can create a basic HTML table structure. Bootstrap doesn't require any
special markup for the table itself.
<table class="table">
<thead>
<tr> <th scope="col">ID</th>
<th scope="col">Name</th>
</tr> </thead>
<tbody>
<tr> <th scope="row">1</th> <td> Anvitha </td> </tr>
<tr> <th scope="row">2</th> <td>Josna</td> </tr>
</tbody>
</table>
Tables with Bootstrap styles and features :

2: Applying Bootstrap Classes

.table: Add this class to the <table> element to apply Bootstrap's table styles.

.thead-dark: You can use this class to make the table header background dark,
improving readability.

.table-striped: This class alternates row colors to improve table readability.


Odd rows have one background color, and even rows have another.

.table-bordered: Add this class to display borders around table cells for better
separation.
Tables with Bootstrap styles and features :
<table class="table table-striped table- <td>John Doe</td>
bordered">
<td>30</td>
<thead class="thead-dark">
</tr>
<tr>
<tr>
<th scope="col">ID</th>
<th scope="row">2</th>
<th scope="col">Name</th>
<td>Jane Smith</td>
<th scope="col">Age</th>
<td>25</td>
</tr>
</tr>
</thead>
</tbody>
<tbody>
</table>
<tr>
<th scope="row">1</th>
Tables with Bootstrap styles and features :

3: Improving Responsiveness
Bootstrap provides classes to make tables responsive on smaller screens.
By adding the .table-responsive class, the table will be horizontally
scrollable on small screens, preventing it from overflowing the container.
Wrap the table in a <div> with the .table-responsive class to enable
horizontal scrolling on narrow screens:
<div class="table-responsive">
<table class="table table-striped table-bordered">
<!-- ... (table content) ... -->
</table>
</div>
Style and enhance HTML forms :
1. Form Container:
You can start by wrapping your form elements in a <form> element with the .container class to control
the layout.
<form class="container">
<!-- Form elements go here -->
</form>

2. Form Layout with Grid System:


Bootstrap's grid system helps create responsive form layouts. Use rows (<div class="row">) and
columns (<div class="col">) to organize form elements into responsive grids.
Style and enhance HTML forms :

<form class="container">
<div class="row">
<div class="col-md-6">
<!-- Left-half form elements -->
</div>
<div class="col-md-6">
<!-- Right-half form elements -->
</div>
</div>
</form>
Style and enhance HTML forms :

Form Controls:
Bootstrap provides various form control styles and components such as text inputs, textareas,
checkboxes, radio buttons, and select dropdowns. Apply appropriate classes to these elements for styling.

<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
</div>
Style and enhance HTML forms :

Form Validation States:


Bootstrap offers styles for form validation states, including success, warning, and error.
Use the .is-valid and .is-invalid classes to indicate validation states.

<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control is-invalid" id="username"
placeholder="Username is required">
<div class="invalid-feedback">Please provide a valid username.</div>
</div>
Bootstrap Cards for Organizing Content:

• Bootstrap cards are versatile and flexible components that allow you to organize and
present content in a structured and visually appealing manner on a web page.
• They are particularly useful for creating a grid-based layout, displaying information
cards, or structuring content in a dashboard-style interface.

Card Header (card-header):


The card header is the topmost part of the card.
Typically contains a title or heading for the card.
It can also include buttons, icons, or other elements to provide additional functionality
or context.
Bootstrap Cards for Organizing Content:
Card Footer (card-footer):
• The card footer is located at the bottom of the card.
• Often used for additional information, attribution, or actions related to the card's content.

Card Title (card-title):


• Represents the title or main heading of the card.
• Provides a clear and concise description of the card's content.

Card Body (card-body):


• The card body is where the main content of the card is placed.
• You can include text, images, lists, forms, or any other HTML content within the card body.
• It's the primary area for presenting information

Card Image (card-img-top):


• Used to display an image at the top of the card.
• Commonly used for showcasing a product image or a featured image related to the card's content.
Bootstrap Cards for Organizing Content:
<div class="container"> </div>
<div class="card"> <div class="card-footer">
<div class="card-header"> <small>Last updated: September
23</small>
Featured
</div>
</div>
</div>
<img src="image.jpg" class="card-img-top"
alt="Image Alt Text"> </div>
<div class="card-body"> </body>
<h5 class="card-title">Card Title</h5> </html>
<p class="card-text">This is a simple
card example demonstrating the usage of
Bootstrap card components.</p>
Pagination:

Pagination primary purpose is to divide large sets of content into smaller, manageable
portions or pages.
Example 1:
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
Example 2:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
</ul>
<ul class="pagination mt-3"> <li class="page-item">
<li class="page-item disabled"> <a class="page-link" href="#">Next</a>
<span class="page-link">Previous</span> </li>
</li> </ul>
<li class="page-item active"> </div>
<span class="page-link">1</span> </body>
</li> </html>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
Pagination:
<ul class="list-group">: This is an unordered list (ul) element with the class list-group, which is a Bootstrap
class that styles the list items as a group.
<li class="list-group-item">Item 1</li>: These are list item (li) elements within the list group. Each list item
contains text, such as "Item 1," "Item 2," and so on.

<ul class="pagination mt-3">: This is an unordered list (ul) element with the class pagination, which is a
Bootstrap class for styling pagination controls. The mt-3 class adds top margin spacing to create some
separation from the content above.

<li class="page-item disabled">: This is a list item (li) element with the class page-item and disabled,
indicating that it's a disabled pagination item. It contains a span element with the class page-link that
displays the text "Previous."

<li class="page-item active">: This is an active pagination item. It also contains a span element with the
class page-link, displaying the page number "1."

<li class="page-item">: These are regular pagination items. They contain a elements with the class page-
link and href="#". These links are currently set to "#" and need to be replaced with actual URLs for
navigating to different pages.
Pagination:

<li class="page-item">: These are regular pagination items.


They contain “a” elements with the class page-link and href="#". These links are currently
set to "#" and need to be replaced with actual URLs for navigating to different pages.
Breadcrumbs:

Bootstrap allows users to easily create static breadcrumbs layouts by adding the class
.breadcrumb to ordered or unordered lists, as demonstrated in the following example.
Breadcrumbs:
<!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]
alpha3/dist/js/bootstrap.bundle.min.js"></script>
<title>Bootstrap - Breadcrumb</title>
</head>
<body>
<div class="m-4">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
Breadcrumbs:
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"> <a href="#"> Home </a> </li>
<li class="breadcrumb-item active" aria-current="page"> Services </li>
</ol> </nav>

<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Services</a></li>
<li class="breadcrumb-item active" aria-current="page">Contact</li>
</ol>
</nav> </div> </body> </html>

You might also like