Bootstrap is a front-end library.
Boostrap is very firmly on the front end, and it’s a bunch of code that was written very firmly to be
reusable, and this can be dropped on the site to make designing easier.
Bootstrap is now free and open source, but was written by twitter.
Responsive means that it should be mobile, whether viewing on desktop, mobile, or ipad.
CDN – Content Delivery network: Maybe the websites take much more time to travel through the
cables
This is where CDN comes into play.
So, instead of hosting the website in a single location, there can be made a whole bunch of access
points from where the website can be accessed. This can cut down the latency or how long the
website takes time to load up.
Working with Bootstrap is common, since the users will already have it installed.
Web Designing – Wireframing:
Wireframing is basically settling up for a design before it needs to be implemented.
It’s meant to be a low fidelity, and hence it should not take much time to produce.
Mock-up – a high fidelity representation.
In order for the bootstrap collapsible menu to work, some JS is needed.
Bootstrap grid system:
Bootstrap Containers:
<section id="features">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-circle-check fa-3x"></i>
<h3>Easy to use.</h3>
<p>So easy to use, even your dog could do it.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-bullseye fa-3x"></i>
<h3>Elite Clientele</h3>
<p>We have all the dogs, the greatest dogs.</p>
</div>
<div class="feature-box col-lg-4">
<i class="icon fa-solid fa-heart fa-3x"></i>
<h3>Guaranteed to work.</h3>
<p>Find the love of your dog's life or your money back.</p>
</div>
</div>
</section>
Bootstrap Carousal:
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2 class="testimonial-text">I no longer have to sniff other dogs
for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/[Link]" alt="dog-
profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with
TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/[Link]" alt="lady-
profile">
<em>Beverly, Illinois</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">Finally, I can be happy for my dog's
happy married life! We can go on a double date too.</h2>
<img class="testimonial-image" src="images/man_immg.jpg" alt="man-
profile">
<em>Jack, LA</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-
target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
Bootstrap Cards:
It provides something like a container. They have a header, a body, and also a footer.