Scribd
Upload
14 views3 pages

Bootstrap Components

The document contains HTML code for a Bootstrap-based webpage featuring buttons and a product catalog. It includes various button styles, sizes, and groups, as well as cards displaying products like a washing machine and refrigerator with pricing and stock information. The page utilizes Bootstrap's CSS and JS for styling and functionality.

Uploaded by

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

Bootstrap Components

The document contains HTML code for a Bootstrap-based webpage featuring buttons and a product catalog. It includes various button styles, sizes, and groups, as well as cards displaying products like a washing machine and refrigerator with pricing and stock information. The page utilizes Bootstrap's CSS and JS for styling and functionality.

Uploaded by

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

bootstrap button

<!doctype html>
<html lang="en">

<head>

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">

</head>
<style>

</style>

<body class="container-fluid">
<h1 style="text-align: center; color: blue;"> Bootstrap Buttons</h1>
<h3> Generic button</h3>
<button class="btn-close"></button>
<button class=" btn btn-link"> sign-in</button>
<h3>Button Toolbar</h3>
<div class="btn-toolbar bg-danger justify-content-between">
<div class="btn-group">
<button class="btn btn-danger"> Home</button>
<button class="btn btn-danger"> About </button>
<button class="btn btn-danger"> Contact</button>
</div>
<div class="btn-group">
<button class="btn btn-danger">
<span class="bi bi-search"> search </span>
</button>

</div>
</div>
<h3>Button base</h3>
<button class=" btn"> Base button</button>
<h3> Button contexual/ bg color</h3>
<button class="btn btn-danger">insert </button>
<button class="btn btn-success">delete</button>
<button class="btn btn-secondary">upload</button>
<button class="btn btn-warning ">Reupload</button>
<button class="btn btn-primary">Redelete</button>
<h3>Button size</h3>
<button class=" btn btn-primary btn-lg">Large</button>
<button class="btn btn-danger ">normal</button>
<button class=" btn btn-success btn-sm">small</button>
<h3> outline button</h3>
<button class="btn btn-outline-danger">insert </button>
<button class="btn btn-outline-success">delete</button>
<button class="btn btn-outline-secondary">upload</button>
<h3>BUTTON Groups</h3>
<div class="btn-group">
<button class="btn btn-danger">insert </button>
<button class="btn btn-success">delete</button>
<button class="btn btn-secondary">upload</button>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>

</html>

BOOTSTRAP CARD
Bootsrap catalog

<!doctype html>
<html lang="en">

<head>
<link rel="stylesheet"
href="bootstrap/node_modules/bootstrap-icons/font/bootstrap-icons.css">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-
QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous">

</head>
<style>

</style>

<body class="container-fluid">
<h2> product Catalog</h2>
<div class="d-flex flex-wrap">
<div class="card p-2 m-2" style="width: 300px;">
<img class="card-img-top" src="./washing maxhine.jpg" height="200">
<div class="card-header">
<h3 class="card-title"> Washing Machine</h3>
<p class="card-subtitle" style="color: red;"> 50% oFF On washing
Machine</p>
</div>
<div class="card-body">
<dl>
<dt>Price</dt>
<dd>55000</dd>
<dt>Stock </dt>
<dd> Available</dd>
</dl>
<a class="card-link" href="./washing maxhine.jpg"> more</a>
</div>
<div class="card-footer">
<button class="btn btn-Primary w-100">
<span class="bi bi-cart4"> </span> Add to Cart
</button>
</div>
</div>
</div>
<h1> PRODUCT CATALAOG</h1>
<div class="card" m-2 p-2 style="width: 300px;">
<img class="card-img-top" src="./fridge.jpeg" height="250">
<div class="card-header">
<h2 class="card-title" style="text-align:
center;">Refrigerator</h2>
<p class="card-subtitle" style="text-align: center; color: red;">
35% off on Refrigerator</p>
</div>
<div class="card-body">
<dl>
<dt>Price</dt>
<dd>125000</dd>
<dt>Stock</dt>
<dd>Available</dd>
</dl>
<a class="card-link" href="./fridge.jpeg"> more</a>
</div>
<div class="card-footer">
<button class="btn btn-danger" style="width: 250px;">
<span class="bi bi-cart4">Add to cart </span>
</button>

</div>

</div>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-
YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
</body>

</html>

You might also like