Intro to bootstrap with basic layout example
This is a basic bootstrap tutorial for those who are new to web development or just starting to use bootstrap.
Bootstrap is the most popular HTML, CSS, and javascript framework for developing responsive, mobile first projects on the web.
The power of bootstrap lies in your understanding of the built in pre-defined classes. With the right classes being efficiently used, it will make your layout structuring easier and faster.
Visit bootstrap for a full study of this framework
Usage:
To be able to use bootstrap you have to download the framework which will contain, the bootstrap css, javascript and the needed fonts.
you can download it here
Once you have the bootstrap downloaded, it will be in zip format unzip the folder and add it to the root of your project folder then you can reference the bootstrap files in your folder for the bootstrap classes to take effect.
Your folder should now look like this:
And this is how the project structure will look once it is added to the project
Each of the bootsrap folders, css, fonts and js contains the files required for each bootstrap component to work if needed, for this project I only required the css and js functionalities that is why I didn’t reference the fonts.
You can now reference the bootstrap files required in your project header section.
Notice the red script included before adding the bootstrap JavaScript, this is included because bootstrap requires JavaScript to be initially loaded for it’s JavaScript functionalities to function properly
The built in classes covers functionalities and styling for rows, columns, forms,tables,buttons,icons, sliders, modals (a pop up view that shows on the screen in an action is performed on another item e.g. clicking on a div or button), And other features. Using html css and JavaScript so you can see how much you can achieve with bootstrap with less work.
for this tutorial, we will be working with a basic portfolio page as shown below.
The layout above was designed with bootstrap, as you can see each component is carefully arranged and if you place it on a mobile screen it will automatically rearrange the page to fit the screen size.
Let’s highlight each section as used with the bootstrap grid system, the grid system specifies that each row is made up of 12 columns.
With this in mind you can structure the web page in sets of rows and columns, you can also have rows inside columns.
The columns are usualy specified with respect to screen sizes such as lg(large), md(medium), sm(small) and xs(extra small)
You can check out the bootstrap grid system here
let’s break down the portfolio page above into rows and columns for a clearer understanding.
The above structure is only a basic layout structure but if you can understand this approach you will be able to approach more complicated and larger designs, all you need is being able to identify each component as on the actual design and assign their classes. This will make your work much faster.
Here is the html for the entire design using bootstrap, some of the inner classes which I couldn’t specify on the above figure due to the space are included here, like the projects description modals which are supposed to pop up on click of each project.
Code:
I have included the entire html for the above layout should in case you need to use it, you copy and paste then add additional features to your portfolio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300'
rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
(html comment removed: Brand and toggle get grouped for better mobile display )
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logo" href="#"><span id="obele">Your logo here</a>
</div>
(html comment removed: Collect the nav links, forms, and other content for toggling )
<nav class="collapse navbar-collapse" id="menuDiv">
<ul class="nav navbar-nav navbar-right menu">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>(html comment removed: /.navbar-collapse )
</div>(html comment removed: /.container-fluid )
</div>
<div class="container" id="mainContainer">
<div class="row">
<div class="col-md-6">
<img src="images/davechilling1.jpg" alt="dave"
style="width:100px;heigth:100px; border-radius:50%; margin-top:20px">
</div>
<div class="col-md-6 text-right text-uppercase">
<h1 class="title-super text-thin">Your Name</h1>
<h4>Your Title</h4>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr style="height:2px;border:none;background-color:#7C4C1C;">
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="images/developer.jpg" class="img-responsive"
style="width:100%">
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-muted">Featured Work</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-4 projectBox">
<img class="img-responsive" src="images/home.jpg"
alt="first project" data-toggle="modal" data-target="#firstProject">
<h3 class="text-uppercase">GALARY</h3>
<p><a href="#">First Project</a></p>
</div>
<div class="col-md-4 projectBox">
<img class="img-responsive" src="images/home.jpg"
alt="second project" data-toggle="modal" data-target="#secondProject">
<h3 class="text-uppercase">APP STORE</h3>
<p><a href="#">Second Project</a></p>
</div>
<div class="col-md-4 projectBox">
<img class="img-responsive" src="images/home.jpg"
alt="third project" data-toggle="modal" data-target="#thirdProject">
<h3 class="text-uppercase">THE MARINER</h3>
<p><a href="#">Third Project</a></p>
</div>
</div>
</div>
<div class="modal fade" id="firstProject" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">First Project</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="images/home.jpg" alt="first project" style="width:100%">
<p class="text-justify" style="color: #815623; font-family: 'Lato', sans-serif; font-weight:bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="secondProject" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Second Project</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="images/home.jpg" alt="first project" style="width:100%">
<p class="text-justify" style="color: #815623;font-weight:bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="thirdProject" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel"aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Third Project</h4>
</div>
<div class="modal-body">
<img class="img-responsive" src="images/home.jpg" alt="first project" style="width:100%">
<p class="text-justify" style="color: #815623; font-weight:bold">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Feel free to ask where you might not be clear enough and stay tuned for more tutorials from me.
I hope I have given you what you expected from this tutorial, if not feel free to make your suggestions and corrections.
Thank you for your time.
I am so happy that you are here, mrobele! I wish you a very joyful journey here in this very cool community with many nice people :) Enjoy the friendship!
By the way, there are several groups you as a newcomer can join. They will stay with you for your journey, helping and mentoring along the way.
@greetersguild invite link https://discord.gg/AkzNSKx
@newbieresteemday invite link https://discord.gg/2ZcAxsU
thanks
Greetings new members, happy to see you join Steemit, hopefully, you will give the best talent for the platform, if any questions about this platform, please click www.steemithelp.net. Kind regards.
thank you
Welcome to Steem, @mrobele!
I am a bot coded by the SteemPlus team to help you make the best of your experience on the Steem Blockchain!
SteemPlus is a Chrome, Opera and Firefox extension that adds tons of features on Steemit.
It helps you see the real value of your account, who mentionned you, the value of the votes received, a filtered and sorted feed and much more! All of this in a fast and secure way.
To see why 2535 Steemians use SteemPlus, install our extension, read the documentation or the latest release : SteemPlus 2.14 : Follower / Witness voter indicator.
Thank you very much for the information.
Greetings from Venezuela
I'm glad you like the information, thank you
@mrobele ...welcome to this great community..I'm positive you'll do well , I've followed you, please do well to follow back..peace!
thanks for the warm welcome, I've followed you back
Welcome to Steemit mrobele. Let me know if you got any questions about Steem or anything related to it! The official FAQ can be found here and has A LOT of information https://steemit.com/faq.html - Also remember, Steemit is just ONE of the sites built that uses Steem the blockchain. We also have DTube - our very own Youtube, DSound for Soundcloud and Steepshot if you prefer Instagram like experience. I'd also like to mention ChainBB - forums, Busy - Steemit with more modern look basically, DMania for memes and Dlive for streaming just like in Twitch! You can also earn Steem by gaming now! Search for Steemgar if that's more your thing. Welcome to the blockchain! :)
thanks