Basic UI Elements
Buttons Preview link
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>Tag & pills Preview link
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning text-dark">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>Progressbar Preview link
<div class="progress mb-2">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>Alert Preview link
<div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
<div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
<div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
<div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
<div class="alert alert-light font-dark" role="alert">This is a dark alert—check it out!</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>Popover Preview link
<button class="btn btn-primary example-popover mb-0 me-0" type="button" data-bs-toggle="popover" data-bs-placement="left" title="" data-bs-content="If the package restore doesn't help, you can look at the Output window in the Visual Studio." data-bs-original-title="Basic Popover">Hurry Up! </button>
<button class="example-popover btn btn-success mb-0 me-0" type="button" data-bs-trigger="hover" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="" data-offset="-20px -20px" data-bs-content=" Several utility instruction sets have been featured in the Bootstrap 4 to promote very easy learning for beginners in the business of web building." data-bs-original-title="Hover Popover">Hover tooltip</button>
<a class="btn btn-secondary" tabindex="0" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="" data-bs-title="Dismissible popover" data-bs-content="You are able to even develop and suggest improvements to the Bootstrap 4 before its final version is delivered." data-bs-original-title="Dismissible popover">Dismissible popover</a>To use java script you have to add the following script tag
<!--popover js-->
<script src="../assets/js/popover-custom.js"></script>Tooltip Preview link
<button type="button" class="example-popover btn btn-primary" data-bs-container="body" data-bs-toggle="tooltip" data-bs-placement="top" title="Popover title" >Hover Me</button>To use java script you have to add the following script tag
<!--tooltip js-->
<script src="../assets/js/tooltip-custom.js"></script>Dropdown Preview link
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Dashboard</button>
<ul class="dropdown-menu dropdown-block">
<li><a class="dropdown-item" href="#">Project</a></li>
<li><a class="dropdown-item" href="#">Ecommerce</a></li>
<li><a class="dropdown-item" href="#">Crypto</a></li>
</ul>
</div>Tab Preview link
Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
Tabs have long been used to show alternative views of the same group of information tabs in software. Known as “module tabs”, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
<ul class="simple-wrapper nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link text-primary" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
<li class="nav-item"><a class="nav-link active text-primary" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
<li class="nav-item"><a class="nav-link text-primary" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<p class="pt-3">Tabs have long been used to show alternative views of the same group of information tabs in software. Known as<em class="text-danger"> “module tabs”</em>, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.</p>
</div>
<div class="tab-pane fade active show" id="profile" role="tabpanel" aria-labelledby="profile-tabs">
<p class="pt-3">Tabs have long been used to show alternative views of the same group of information tabs in software. Known as<em class="text-danger"> “module tabs”</em>, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p class="pt-3">Tabs have long been used to show alternative views of the same group of information tabs in software. Known as<em class="text-danger"> “module tabs”</em>, these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.</p>
</div>
</div>Accordion Preview link
Web design identifies the goals of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.
Search engine optimization: Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.
Mobile responsiveness: Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.
Improved sales:Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.
The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:
- 1. Layout
- 2. Images
- 3. Visual hierarchy
- 4. Color scheme
- 5. Typography
- 6. Navigation
- 7. Readability
- 8. Content
<div id="simpleaccordion" class="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button accordion-light-primary active collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">What do web designers do ?</button>
</h2>
<div class="accordion-collapse collapse" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#simpleaccordion" style="">
<div class="accordion-body">
<p class="mb-0">Web design<em class="font-danger"> identifies the goals </em> of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.</p>
</div>
</div>
</div>
<div class="accordion-item">
...
</div>
<div class="accordion-item">
...
</div>
</div>Modal Preview link
<button class="btn btn-secondary px-xl-2 px-xxl-3" type="button" data-bs-toggle="modal" data-original-title="test" data-bs-target="#exampleModal">Simple</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModal" style="display: none;" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="modal-toggle-wrapper">
<h4>Up to <strong class="font-danger">85% OFF</strong>, Hurry Up Online Shopping</h4>
<div class="modal-img"> <img src="../assets/images/gif/online-shopping.gif" alt="online-shopping"> </div>
<p class="text-sm-center">Our difficulty in finding regular clothes that was of great quality, comfortable, and didn't impact the environment given way to Creatures of Habit.</p>
<button class="btn bg-primary d-flex align-items-center gap-2 text-light ms-auto" type="button" data-bs-dismiss="modal">Explore More
<i class="fa-solid fa-arrow-right"></i>
</div>
</div>
</div>
</div>
</div>
</div>