Select Page

How to Build Your First Website with Bootstrap

The docs are super complicated for a complete newbie. But the actual implementation details to get you up and running in 5 minutes are super simple. 

We’ve already done a guide on How to Build Your First Website with HTML, CSS and JavaScript so we’re not going to repeat ourselves here. If you haven’t read that and/or don’t know this already, then go and take 15 minutes to read that guide. 

 

What is Bootstrap? 

Basically Bootstrap is just a bunch of handy tooling to make your life easier. It’s the equivalent if you have the problem you are trying to solve being hanging a picture on the wall in your house. You could use a shoe to hammer the nail into the wall, but you probably shouldn’t. You should probably get your toolbox out to find the right tool for the job. 

Bootstrap is a toolbox of handy stuff to make things look nice with ease, and make things interactive with ease. It’s nothing more than that. 

 

Working Example of Website Built Using Bootstrap

 

 

 

<html>
	<head>
		<title>HelloWorld</title>
		<!-- Bootstrap CSS Libaries -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
		<!-- Bootstrap JavaScript Libraries -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
		<!-- Bootstrap Bundle -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
	</head>
	<body>
		<h1>HelloWorld!</h1>
		<br>
		<button class="btn btn-success">My Button</button>
	</body>
</html>

 

Next Steps to Use Bootstrap to It’s Full Potential

And there you go, it’s as simple as that!

Now you just need to get into the docs for Bootstrap and start having a play around with the different things you can do. 

Have a play and see what you can do!