Overview
In this article we are going to cover Bootstrap and Pexels basics and build a single page website.
Bootstrap Basics
We are going to use Bootstrap to create the layout of our website. There is an important formatting theme to cover before we start. When using the grid system the width of our page can be divided, into twelve areas. The “width” of our page or our “div” can be broken up using a combination of numbers that equal twelve. A quick example: if we want three columns we would set the columns to four each this would divide our max number of twelve into three equal parts. This allows us to have two equal columns and a smaller column, for an image.
Another example is we could set one column to 2 and the other two to 5, this would give a small area for an image, and then two for text areas. This is a quick way to setup a simple article or monthly newsletter. The image can be a logo or the topic of the article, then the other two columns are the text of the article. We can just have this one row and columns or we can format more rows and make our columns what number they need to be.
Color Themes in Bootstrap
Color themes are simple and easy to set in Bootstrap, when you create an object in Bootstrap you can add a class in the tag of the “div“, and style the “div“. When styling a “div“, “bg” is the background of our “div” and “text” is the text of our “div“. There are two basic colors: dark and light. One is a black theme and the other is a white theme. We can use a style tag in our class and use any color possible though.
One thing we should remember is that to use the grid we have to wrap our rows and columns in a “div“. We can use container if we are building columns that are not going to completely span the width of our page. We can also use container-fluid if we want our columns to span the entire width of our page.
Pexels Basics
Pexels is a place to find free to use high definition photos. When downloaded, you can choose from different sizes which make our photos easier to edit for our website. This is what we will use in our examples, for practice grab a few images and save them to your folder.
Getting Started
To get started we just grab our CDN from Bootstrap:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
What Is Bootstrap
Bootstrap is a framework that allows us to create websites faster and more effectively. It also allows for quicker and easier layout and styling of websites, less CSS essentially.
Even Columns
To create a row with three columns that have equal width we would set our code up like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
It will create a website like this with extra code:
Two Rows
To create a web-page with two rows that looked like this:
We would use this code:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
<div class=“container-fluid”>
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
<div class="col-sm-3">
</div>
</div>
</div>
It would look like this after we add the images and text:
The code would just be this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<img src="1.jpg" height="97%" width="100%">
</div>
<div class="col-sm-6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum exercitationem, tempora placeat commodi porro molestiae id dolorem fugiat pariatur ab quos quae suscipit eum doloribus harum! Aut deserunt exercitationem a incidunt sint quam! Necessitatibus aut quo omnis molestias debitis eum nobis consequatur fuga sequi earum consectetur praesentium voluptates placeat ipsa excepturi, vel reiciendis atque optio laborum modi corporis obcaecati enim sint facere. Illum atque sit molestias voluptate ut facilis quia placeat ullam laboriosam inventore harum perspiciatis alias quibusdam, dolorem, a ipsam, ea corporis beatae magni sequi consequatur unde pariatur non cumque. Tempore, molestiae sunt. Sed vel cumque, assumenda aliquid officia necessitatibus dolores blanditiis minima! Ducimus, vitae hic! Tenetur facilis repudiandae explicabo, ad id molestiae natus nisi nihil fuga temporibus veritatis recusandae illo reiciendis omnis harum quod, soluta enim, impedit est! Eos officiis maiores ea voluptatibus earum, nostrum et iure. Vitae ratione impedit itaque? Dolorum iure, eligendi impedit assumenda quaerat obcaecati. Laboriosam dolore quo dolores accusantium eligendi illo perspiciatis pariatur? Rem, perferendis cupiditate? Fugiat delectus beatae blanditiis maiores ex itaque explicabo eligendi provident harum, eos corporis perspiciatis, id sunt suscipit voluptas rem! Quia commodi incidunt ab, autem iusto error rem sint, qui mollitia tenetur totam animi quae placeat dolorum eos quaerat eius repellat modi corporis distinctio non quis laborum esse? Quidem magni delectus reprehenderit accusamus ex incidunt. Debitis dolores aspernatur similique dignissimos quam rem reiciendis, asperiores natus quasi nemo neque corrupti, repellat odio tempora sapiente amet eum! Aperiam reiciendis autem dicta quis, et tenetur velit voluptatum omnis repudiandae ea corrupti debitis architecto exercitationem in dolore recusandae. Fuga voluptatibus necessitatibus consequatur! Labore quos numquam, debitis esse ducimus nemo quisquam aliquam alias, et sit nihil nesciunt rerum vitae perferendis sed autem, corporis dolores veniam laboriosam aspernatur doloremque tempora. Iusto consequuntur illo nulla quae, eligendi iste voluptate perspiciatis architecto! Dolor dicta, quos animi necessitatibus voluptatibus ex molestiae atque itaque optio? Aperiam aut itaque distinctio quisquam voluptatibus atque, veniam, eligendi voluptas quam dolor, nobis necessitatibus eius quidem consequatur beatae dolorem obcaecati mollitia assumenda. Cum est consequuntur velit officiis ipsum culpa ex accusamus fuga itaque? Ducimus, perferendis rem iste omnis provident, blanditiis placeat id fugit minima, dolores animi. Accusamus quod delectus eos molestias! Atque quis tempore cupiditate. Quae unde laudantium rerum quo in maiores praesentium itaque necessitatibus. Maxime cum asperiores consectetur culpa commodi velit nobis ex assumenda! Id placeat quis nemo ex.
</div>
<div class="col-sm-3">
<img src="2.jpg" height="97%" width="100%">
</div>
</div>
</div>
Basic Layout and Beyond
Now, we have our basic layout, after we get this we just add our Jumbo-Tron code which is pretty simple:
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<img src="1.jpg" height="97%" width="100%">
</div>
<div class="col-sm-6">
<div class="jumbotron">
<h1>Lorem ipsum</h1>
<hr class="bg-dark">
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum exercitationem, tempora placeat commodi porro molestiae id dolorem fugiat pariatur ab quos quae suscipit eum doloribus harum! Aut deserunt exercitationem a incidunt sint quam! Necessitatibus aut quo omnis molestias debitis eum nobis consequatur fuga sequi earum consectetur praesentium voluptates placeat ipsa excepturi, vel reiciendis atque optio laborum modi corporis obcaecati enim sint facere. Illum atque sit molestias voluptate ut facilis quia placeat ullam laboriosam inventore harum perspiciatis alias quibusdam, dolorem, a ipsam, ea corporis beatae magni sequi consequatur unde pariatur non cumque.
</h2>
</div>
</div>
<div class="col-sm-3">
<img src="2.jpg" height="97%" width="100%">
</div>
</div>
</div>
Intermediate Layout
If we wanted to have a column take up the entire length of the page, and have two rows with two columns on the rows :
We would have our code:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-8">
</div>
</div>
<div class="row">
<div class="col-sm-12">
</div>
</div>
<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
</div>
</div>
</div>
The key to this is where our “divs” are. What we created with this code is a row that has a column with a “width” of 4 and another column with 8 as the “width“. Then in our column that was set to 8 we create two more rows.
Notice we set the first row to 12. The reason this works is 12 is the width of what ever we have our row inside, so if we had it in a fluid container it would equal the “width” of the web page. Since we have it inside of a “div” that is nested in our column set to 8, it just takes up the “width” of that container. Our 12 in this case is equal to eight, it is 12(100%) of 8(75%) of our web page.
Then to get our second sub row we set both columns to 6(50%) of 8(75%)of our web page.
Now we can add images and text:
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<img src="1.jpg" height="98%" width="100%">
</div>
<div class="col-sm-8">
</div>
<div class="row">
<div class="col-sm-12">
<div class="jumbotron">
<h1>Lorem ipsum</h1>
<hr class="bg-dark">
<h1>Lorem Ipsum</h1>
<h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, illum vitae voluptas soluta eveniet ducimus deserunt laboriosam, adipisci est explicabo praesentium quidem natus culpa? Eos voluptates officia molestiae natus, quaerat adipisci quod dolor, sequi tempora laudantium, magni perspiciatis in hic labore facilis itaque necessitatibus vero nesciunt illo facere maiores dicta. Magnam obcaecati vitae repudiandae eum libero totam adipisci doloribus corrupti possimus. Cumque nesciunt iure vero porro, sunt illo enim fugiat dolorem.
</h2>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<img src="4.jpg" height="97%" width="100%">
</div>
<div class="col-sm-6">
<img src="5.jpg" height="97%" width="100%">
</div>
</div>
</div>
