Scribd
Upload
124 views15 pages

Tuto Bootstrap

The document contains code for a sign in template and album template with photos. The sign in template includes fields for email, password, and a remember me checkbox. The album template displays photos in cards that can be viewed or edited, and includes a navbar and intro section.

Uploaded by

crunch
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
124 views15 pages

Tuto Bootstrap

The document contains code for a sign in template and album template with photos. The sign in template includes fields for email, password, and a remember me checkbox. The album template displays photos in cards that can be viewed or edited, and includes a navbar and intro section.

Uploaded by

crunch
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 15

###################### SIGN IN ###################################

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Signin Template · Bootstrap</title>

<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/sign-


in/">

<!-- Bootstrap core CSS -->


<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">

<!-- Favicons -->


<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-
icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png"
sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png"
sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg"
color="#563d7c">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config"
content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

@media (min-width: 768px) {


.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="signin.css" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin">
<img class="mb-4" src="/docs/4.5/assets/brand/bootstrap-solid.svg" alt=""
width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email
address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control"
placeholder="Password" required>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">&copy; 2017-2020</p>
</form>
</body>
</html>

########################### ALBUM ################################

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Album example · Bootstrap</title>

<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/album/">

<!-- Bootstrap core CSS -->


<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">

<!-- Favicons -->


<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-
icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png"
sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png"
sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg"
color="#563d7c">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config"
content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

@media (min-width: 768px) {


.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="album.css" rel="stylesheet">
</head>
<body>
<header>
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Add some information about the album below, the
author, or any other background context. Make it a few sentences long so folks can
pick up some informative tidbits. Then, link them off to some social networking
sites or contact information.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" aria-hidden="true" class="mr-2" viewBox="0 0 24 24"
focusable="false"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-
2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
<strong>Album</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>

<main role="main">

<section class="jumbotron text-center">


<div class="container">
<h1>Album example</h1>
<p class="lead text-muted">Something short and leading about the collection
below—its contents, the creator, etc. Make it short and sweet, but not too short so
folks don’t simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</section>

<div class="album py-5 bg-light">


<div class="container">

<div class="row">
<div class="col-md-4">
<div class="card mb-4 shadow-sm">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
<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">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
<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">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
<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">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
<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">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
<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">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
<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">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
<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">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
<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">
<svg class="bd-placeholder-img card-img-top" width="100%" height="225"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
<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>
</div>
</div>

</main>

<footer class="text-muted">
<div class="container">
<p class="float-right">
<a href="#">Back to top</a>
</p>
<p>Album example is &copy; Bootstrap, but please download and customize it for
yourself!</p>
<p>New to Bootstrap? <a href="https://getbootstrap.com/">Visit the homepage</a>
or read our <a href="/docs/4.5/getting-started/introduction/">getting started
guide</a>.</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script
src="/docs/4.5/assets/js/vendor/jquery.slim.min.js"><\/script>')</script><script
src="/docs/4.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-
LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf"
crossorigin="anonymous"></script></body>
</html>

###################### BLOG ######################################

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap
contributors">
<meta name="generator" content="Jekyll v4.1.1">
<title>Blog Template · Bootstrap</title>

<link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/blog/">

<!-- Bootstrap core CSS -->


<link href="/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/docs/4.5/assets/img/favicons/apple-touch-
icon.png" sizes="180x180">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-32x32.png"
sizes="32x32" type="image/png">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon-16x16.png"
sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/4.5/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/4.5/assets/img/favicons/safari-pinned-tab.svg"
color="#563d7c">
<link rel="icon" href="/docs/4.5/assets/img/favicons/favicon.ico">
<meta name="msapplication-config"
content="/docs/4.5/assets/img/favicons/browserconfig.xml">
<meta name="theme-color" content="#563d7c">

<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

@media (min-width: 768px) {


.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<!-- Custom styles for this template -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700,900"
rel="stylesheet">
<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="blog-header py-3">
<div class="row flex-nowrap justify-content-between align-items-center">
<div class="col-4 pt-1">
<a class="text-muted" href="#">Subscribe</a>
</div>
<div class="col-4 text-center">
<a class="blog-header-logo text-dark" href="#">Large</a>
</div>
<div class="col-4 d-flex justify-content-end align-items-center">
<a class="text-muted" href="#" aria-label="Search">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="mx-3" role="img" viewBox="0 0 24 24"
focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"/><path
d="M21 21l-5.2-5.2"/></svg>
</a>
<a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
</div>
</div>
</header>

<div class="nav-scroller py-1 mb-2">


<nav class="nav d-flex justify-content-between">
<a class="p-2 text-muted" href="#">World</a>
<a class="p-2 text-muted" href="#">U.S.</a>
<a class="p-2 text-muted" href="#">Technology</a>
<a class="p-2 text-muted" href="#">Design</a>
<a class="p-2 text-muted" href="#">Culture</a>
<a class="p-2 text-muted" href="#">Business</a>
<a class="p-2 text-muted" href="#">Politics</a>
<a class="p-2 text-muted" href="#">Opinion</a>
<a class="p-2 text-muted" href="#">Science</a>
<a class="p-2 text-muted" href="#">Health</a>
<a class="p-2 text-muted" href="#">Style</a>
<a class="p-2 text-muted" href="#">Travel</a>
</nav>
</div>

<div class="jumbotron p-4 p-md-5 text-white rounded bg-dark">


<div class="col-md-6 px-0">
<h1 class="display-4 font-italic">Title of a longer featured blog post</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new
readers quickly and efficiently about what’s most interesting in this post’s
contents.</p>
<p class="lead mb-0"><a href="#" class="text-white font-weight-bold">Continue
reading...</a></p>
</div>
</div>

<div class="row mb-2">


<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4
shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text
below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row no-gutters border rounded overflow-hidden flex-md-row mb-4
shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a
natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col-auto d-none d-lg-block">
<svg class="bd-placeholder-img" width="200" height="250"
xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice"
focusable="false" role="img" aria-label="Placeholder:
Thumbnail"><title>Placeholder</title><rect width="100%" height="100%"
fill="#55595c"/><text x="50%" y="50%" fill="#eceeef"
dy=".3em">Thumbnail</text></svg>
</div>
</div>
</div>
</div>
</div>

<main role="main" class="container">


<div class="row">
<div class="col-md-8 blog-main">
<h3 class="pb-4 mb-4 font-italic border-bottom">
From the Firehose
</h3>

<div class="blog-post">
<h2 class="blog-post-title">Sample blog post</h2>
<p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>

<p>This blog post shows a few different types of content that’s supported
and styled with Bootstrap. Basic typography, images, and code are all
supported.</p>
<hr>
<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient
montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem
lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras
mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget
urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula
ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis
consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed
consectetur.</p>
<h2>Heading</h2>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio
sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus.</p>
<pre><code>Example code block</code></pre>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada
magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa.</p>
<h3>Sub-heading</h3>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem
malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur
et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit
libero, a pharetra augue.</p>
<ol>
<li>Vestibulum id ligula porta felis euismod semper.</li>
<li>Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus.</li>
<li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>
</ol>
<p>Cras mattis consectetur purus sit amet fermentum. Sed posuere
consectetur est at lobortis.</p>
</div><!-- /.blog-post -->

<div class="blog-post">
<h2 class="blog-post-title">Another blog post</h2>
<p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p>

<p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient


montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem
lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras
mattis consectetur purus sit amet fermentum.</p>
<blockquote>
<p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget
urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula
ut id elit.</p>
</blockquote>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis
consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed
consectetur.</p>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio
sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div><!-- /.blog-post -->

<div class="blog-post">
<h2 class="blog-post-title">New feature</h2>
<p class="blog-post-meta">December 14, 2013 by <a href="#">Chris</a></p>

<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur


ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem
malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor
mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur
et.</li>
<li>Donec id elit non mi porta gravida at eget metus.</li>
<li>Nulla vitae elit libero, a pharetra augue.</li>
</ul>
<p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis
consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed
consectetur.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit
libero, a pharetra augue.</p>
</div><!-- /.blog-post -->

<nav class="blog-pagination">
<a class="btn btn-outline-primary" href="#">Older</a>
<a class="btn btn-outline-secondary disabled" href="#" tabindex="-1" aria-
disabled="true">Newer</a>
</nav>

</div><!-- /.blog-main -->

<aside class="col-md-4 blog-sidebar">


<div class="p-4 mb-3 bg-light rounded">
<h4 class="font-italic">About</h4>
<p class="mb-0">Etiam porta <em>sem malesuada magna</em> mollis euismod.
Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed
consectetur.</p>
</div>

<div class="p-4">
<h4 class="font-italic">Archives</h4>
<ol class="list-unstyled mb-0">
<li><a href="#">March 2014</a></li>
<li><a href="#">February 2014</a></li>
<li><a href="#">January 2014</a></li>
<li><a href="#">December 2013</a></li>
<li><a href="#">November 2013</a></li>
<li><a href="#">October 2013</a></li>
<li><a href="#">September 2013</a></li>
<li><a href="#">August 2013</a></li>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
<li><a href="#">May 2013</a></li>
<li><a href="#">April 2013</a></li>
</ol>
</div>

<div class="p-4">
<h4 class="font-italic">Elsewhere</h4>
<ol class="list-unstyled">
<li><a href="#">GitHub</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ol>
</div>
</aside><!-- /.blog-sidebar -->

</div><!-- /.row -->

</main><!-- /.container -->

<footer class="blog-footer">
<p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by
<a href="https://twitter.com/mdo">@mdo</a>.</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
</body>
</html>

******************* CSS

--blue: #007bff;

--indigo: #6610f2;

--purple: #6f42c1;

--pink: #e83e8c;

--red: #dc3545;

--orange: #fd7e14;

--yellow: #ffc107;

--green: #28a745;

--teal: #20c997;

--cyan: #17a2b8;

--white: #fff;

--gray: #6c757d;

--gray-dark: #343a40;

--primary: #007bff;

--secondary: #6c757d;

--success: #28a745;

--info: #17a2b8;

--warning: #ffc107;

--danger: #dc3545;

--light: #f8f9fa;

--dark: #343a40;

--breakpoint-xs: 0;
--breakpoint-sm: 576px;

--breakpoint-md: 768px;

--breakpoint-lg: 992px;

--breakpoint-xl: 1200px;

--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe
UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe
UI Emoji","Segoe UI Symbol","Noto Color Emoji";

--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation
Mono","Courier New",monospace;

You might also like