Scribd
Upload
8 views5 pages

WEEK 3 Asymptotic Notation-1

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views5 pages

WEEK 3 Asymptotic Notation-1

Uploaded by

mraffay886
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

1.

Introduction to Bootstrap
What is Bootstrap?

 A free, open-source CSS framework for building responsive and mobile-first


websites.
 Provides pre-designed templates, components, and utilities.

Why Use Bootstrap?

 Saves time with pre-built styles.


 Ensures responsiveness across devices.
 Easy to use and customize.

Key Features:

 Grid system for layout design.


 Pre-styled components like buttons, forms, and navbars.
 Utility classes for quick styling.

Setting Up Bootstrap

Step 1: Include Bootstrap in Your HTML File

1.CDN (Content Delivery Network)

Add the following link to your <head> section

<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.b
undle.min.js"></script>

2.Download Bootstrap (Optional)

Download from getbootstrap.com.

Link the CSS and JS files in your project.

Code Example: A Simple Bootstrap Webpage

<!DOCTYPE html>

<html lang="en">

<head>

<title>Simple Bootstrap Page</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body class="bg-light text-center py-5">

<div class="container">

<h1 class="text-primary">Hello, Bootstrap!</h1>


<p class="text-secondary">This is a simple webpage styled
with Bootstrap.</p>

<button class="btn btn-success">Click Me</button>

</div>

<!-- Bootstrap JS -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Explanation of Each Line:

<!DOCTYPE html>

<head>

Contains metadata about the webpage.

Ensures the webpage is responsive on all devices.

Bootstrap CSS Link:


<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet">

Links the Bootstrap CSS file from a CDN (Content Delivery Network)
to style the webpage.

Body Section

<body class="bg-light text-center py-5">

bg-light: Sets a light background color for the page.

text-center: Centers all the text.

py-5: Adds vertical padding to the page for spacing.

<div class="container">

container: Adds padding and centers the content on the page.

<h1 class="text-primary">Hello, Bootstrap!</h1>

h1: Displays a large heading.

text-primary: Makes the text blue (Bootstrap's primary color).

<p class="text-secondary">This is a simple webpage styled with


Bootstrap.</p>

p: Adds a paragraph.
text-secondary: Styles the text in a gray color.

<button class="btn btn-success">Click Me</button>

btn: Styles the button.

btn-success: Gives the button a green background (Bootstrap's


"success" color).

You might also like