Topics we'll cover
make a shopping site with HTML, CSS, and Bootstrap
how to make a shopping site? : Bootstrap has been the most liked site since it’s made. It helps every web developer to develop their sites faster and effectively. About every web developer uses bootstrap’s functionalities in their sites. Today we are going to make a shopping site using HTML, CSS, and bootstrap with their advanced features.
First Copy the CDNs of Bootstrap
At first go to any browser and type getbootstrap.com and from there click on the get started button and then scroll down and you will get below type of section where all cdn’s are listed. Copy the Css code and go to any IDE (Here I am using Visual studio Code) and paste it between the Head opening and closing tags.
After that Go to the website (getbootstrap.com) and copy the Js code and go back to your IDE and between body tags paste your code that you have copied before.
Now you are all set for using bootstrap.
Then we have to make a navigation bar
Now go again to your bootstrap website and you can see at the left bar there are many options scroll down and you will get the component opton, so click on the component section and after that you will see the expanded view, so scroll down again and find the navbar option and click on that.
Now scroll down the page and there you can see many types of navigation bars listed. Choose any one from them and copy that below code using the copy button and paste it just after the opening body tag. Now open the .html file using any browser by double clicking on it. You will see a navigation bar on the site you made.
Then we will make Display Items
To make display Items first make a folder named assets and there you have to paste 9 images of your own they will be named as image1.jpg, image2.jpg … image9.jpg and then type codes like below after the codes you’ve written before to make an outline of the containers and set images between them.
<div class="py-3 bg-bright">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="/assets/image1.jpg" class="rounded" style="height: 14rem;" alt="">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="/assets/image2.jpg" class="rounded" style="height: 14rem;" alt="">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="/assets/image3.jpg" class="rounded" style="height: 14rem;" alt="">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="/assets/image4.jpg" class="rounded" style="height: 14rem;" alt="">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="/assets/image5.jpg" class="rounded" style="height: 14rem;" alt="">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="/assets/image6.jpg" class="rounded" style="height: 14rem;" alt="">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="/assets/image7.jpg" class="rounded" style="height: 14rem;" alt="">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="/assets/image8.jpg" class="rounded" style="height: 14rem;" alt="">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<img src="/assets/image9.jpg" class="rounded" style="height: 14rem;" alt="">
<div class="card-body">
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-muted">9 mins</small>
</div>
</div>
</div>
</div>
Now your image containers are ready. Now you have to make the footer part in the footer part there will be your credits only so it is simple. You can only make a div and on that you can place a p tag to place your credits there. As like below.
<div class="footer">
<p>Technicalsayan.in All rights Reserved</p>
</div>
Now after this you have to write your own css and customize it as your own. So you can copy below css code to do that.
.footer{
margin-top: 20vh;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #181818d7;
color: white;
}
Now your main Parts are ready. After this, you can make other things depending upon your taste to make the site look more attractive and beautiful. After that I know you can make all those pages you want to display, depending on this post.
also checkout : Beautiful Website Making Tip #2
That’s all for this post. See you in another one, Thank you !
This text is invaluable. Where can I find out more?
more posts will be uploaded soon.
you can checkout this article for now
Wow, this artticle is nice, my sister is analyzing such things, so I am
going to inform her.
Thank you for supporting me.
Your mode of describbing all in this piece of writing is in fact pleasant, all bee capable of simply be aware oof it, Thanks a lot.
Way cool! Somee very valid points! I appreciate you penning this post and the rest of the website is also really good.
Very ood info. Lucky me I discovered your blog by accident.
I have book-marked itt for later!
It is not my first time to go to see this website, i am
visiting this weeb page dailky and take good information from here all the time.
I am pleased that I detected this web blog, just the right information that I
was searching for!
Hi there to every body, it’s my first go to see of
this webpage; this webpage contains amazing and really
excellent data in support of readers.
Wow, this article is nice, my sister is analyzing
such things, so I am going to inform her.
Hello! Do you use Twitter? I’d ljke to follow you if that
would be okay. I’m definitely enjoying your blog and look forward too new articles.
All social follow links are already given.