Back

Goal: Learn how to create layouts

Task: Use Bootstrap to create layouts

  1. Create a page (using Bootstrap) with the layout seen below:
    1. Create a layout that is displayed differently on a phone and on computer.
  2. Add content:
    1. Headings, paragraphs and lists;
    2. Pictures;
    3. Blockquote and source;
    4. Table with alternatively coloured rows (zebra striped) and a caption.
  3. Add these Bootstrap components:
    1. Alert;
    2. Form with some form elements;
    3. Image carousel with navigation.

Layout sample:

Check out some example here: example.

Detailed instructions:

Create a new empty document like this:

<!doctype HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
</body>
</html>

Include Bootstrap library in your page like this (put this code inside <head> and </head> tags):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Create page layout using this code (put this code inside <body> and </body> tags):

<div class="container">

	<div class="row">
		<div class="banner col-sm-12 col-lg-12">
		Banner
		</div>
	</div>

	<div class="row">
		<div class="navbar col-sm-12 col-lg-12">Navigation</div>
	</div>

	<div class="row">
		<div class="pic1 col-sm-6 col-lg-3">Pic1</div>
		<div class="pic2 col-sm-6 col-lg-3">Pic2</div>
		<div class="pic3 col-sm-6 col-lg-3">Pic3</div>
		<div class="pic4 col-sm-6 col-lg-3">Pic4</div>
	</div>

	<div class="row">
		<div class="article1 col-sm-12 col-lg-6">Article1</div>
		<div class="article2 col-sm-12 col-lg-6">Article2</div>
	</div>

	<div class="row">
		<div class="footer col-sm-12 col-lg-12">Footer</div>
	</div>

</div>

Add some headings, paragraphs and lists like this:

<h1>Big heading</h1>
<h2>Subheading</h2>
<h3>Smaller heading</h3>
<p>Paragraph 1. Paragraph 1. Paragraph 1. Paragraph 1. Paragraph 1.</p>
<p>Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2. Paragraph 2.</p>
<ul>
	<li>List item 1</li>
	<li>List item 2</li>
	<li>List item 3</li>
</ul>

Add some pictures like this:

<img src="mypicture1.png"/>

A a quote and source like this:
Documentation: https://getbootstrap.com/docs/4.0/content/typography/#blockquotes

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Add a striped table with caption:
Documentation: https://getbootstrap.com/docs/4.0/content/tables/

<table class="table table-striped">
  <caption>List of users</caption>
  <tr>
    <td>Mark</td>
    <td>Otto</td>
  </tr>
  <tr>
    <td>Jacob</td>
    <td>Thornton</td>
  </tr>
  <tr>
    <td>Larry</td>
    <td>the Bird</td>
  </tr>
</table>

Create an Alert inside some div tags:
Documentation: https://getbootstrap.com/docs/4.0/components/alerts/

<div class="alert alert-primary" role="alert">
  This is a primary alert—check it out!
</div>

Create an a form with some form items like this:
Documentation: https://getbootstrap.com/docs/4.0/components/forms/

Create a Carousel slideshow inside some div tags, add your images instead of "...":
Documentation: https://getbootstrap.com/docs/4.0/components/carousel/

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Create files in a new folder named "Name Surname Assign3" (replace with your name and surname).
Archive the folder as zip file.
Send the archive to mikelis@va.lv.