There are too many Bootstrap Components to try and describe in detail here, but we're going to create a website "Front Page" for a fictional Moving Company called Move It. This will allow us to demonstrate the configuration and use of some of the more useful Bootstrap components. We will be discussing in detail the layout of the page here, and the end result can be found here.
Link Bootstrap Files
Remember that when we're using Bootstrap, we need to go to the download page to get the links for the bootstrap code. There is one link for the CSS, which goes inside the <head> section of our page. And then there is a JavaScript link, which goes at the very bottom of our page, right before our closing </body> tag.
This is the beauty of using Bootstrap. Once we include these links, we don't have to write ans CSS or JavaScript code to incorporate any of the Bootstrap functionality.
navbar
The first thing we want to do is to add our "navbar" which will be displayed across the top of the page. From the Bootstrap Docs, we'll find a basic navbar that will work for our page, and modify it for our application.
One thing of note on our navbar. We're going to use an icon next to our Logo and if you go to the bootstrap docs page and on the menu at the top of the page is a link that takes you to some free "Bootstrap Icons" that you can use. We'll find a nice one to use in our navbar.
The next section we're going to build is what is called the "Hero" section. What is that you ask? Well, a hero section in HTML is a full-screen section that typically includes a background image, video, illustrations, or animations with text. It is designed to capture visitors' attention and guide them further into the website. The hero section is often the first thing visitors see when they visit a website, and it plays a crucial role in making a strong first impression.
So this goes towards the top of the page and gives some information about what the company is and what they do. Once again we're going to go to the Bootstrap Examples and look for something close to what we want for our design. In our case we're going to use the "Centered screenshot" example. In order to get the code, we use the "Inspector" to copy the bootstrap code and paste it into our webpage, ready for modification. And after we've modified it for our purposes, it looks something like this:
Move With Joy
Welcome to our website, where we are on a mission to provide exceptional moving services to customers in the US. As a startup, we believe that moving doesn't have to be stressful or complicated, and we are passionate about making the process as seamless and enjoyable as possible.
and here is the code:
HTML
<div class="px-4 pt-5 text-center border-bottom">
<h1 class="display-4 fw-bold text-body-emphasis">Move With Joy</h1>
<div class="col-lg-6 mx-auto">
<p class="lead mb-4">Welcome to our website, where we are on a mission to provide exceptional moving services to customers in the US. As a startup, we believe that moving doesn't have to be stressful or complicated, and we are passionate about making the process as seamless and enjoyable as possible.</p>
Next we'll create a section displaying some of the important features of our brand. Go to the Bootstrap Examples and find something similar to what we want to display. We're going to use the "Columns with Icons" display because it's the closest to what we want for our page. So once again, use the "Inspector" to get our HTML Code, paste it into our project, and modify it for our use.
The final layout will look something like this:
Why Move With Us?
Professional
Our team of professional movers are trained to prioritize efficiency, organization, and attention to detail. We understand that your possessions are more than just objects - they are a reflection of your life, memories, and experiences. That's why we take extra care to ensure that everything is packed and transported with the utmost care and attention. Your memories are safe with us.
We offer a range of services to suit your individual needs, whether you're moving locally or across the country. Our team can handle everything from packing and loading to unloading and unpacking, so you can focus on settling into your new home. And with our transparent pricing and no hidden fees, you can trust that you're getting a fair and competitive rate for our services.
At our core, we believe that moving should be an exciting and positive experience, not a stressful one. By providing exceptional moving services in the US, we hope to revolutionize the way people think about moving and provide a better, more personalized experience for our customers. Contact us today to learn more about how we can help you with your next move.
<p>At our core, we believe that moving should be .... we can help you with your next move.</p>
<a href="#" class="icon-link">Get a quote
<img src="./assets/images/chevron-right.svg" alt="Chevron Right Icon">
</a>
</div>
</div>
</div>
Carousel Section
The next section we're going to add is called a "Carousel". This is an image display method that contains multiple images, and in our case, we're going to include some buttons to allow the user to change the image. Once again we'll got to the Bootstrap Docs to find an example that we can use for our site. In this instance we're going to use the carousel with "Indicators" which will give us our control buttons. Here's how it will look"
For the "footer" section we are going to, once again, go to the Bootstrap Docs to find something similar to what we want for our page. In this case, we are going to use the very bottom example and modify it for our page. We'll have to " inspect" the element to get our code, and once it's modified for our use, it will look like this:
In conclusion, we have learned that we can take "pre-built" Bootstrap Examples, and incorporate them into our design very quickly, to produce a professional and effective webpage. And of course if we were building a real, working website, we would make all of the links, and inputs work as designed.
Another important aspect of Bootstrap is spacing. Margins and Padding. Bootstrap has a particular way of expressing these and more information can be found here.
Another interesting aspect of Bootstrap now, is that it supports "color modes". What are color modes? Color modes allow you to quickly change the page theme from "Light" to "Dark" by adding [ data-bs-theme="dark" ] to the opening <html> element at the top of the page. More Information can be found here.
