Bootstrap – nice to know
All you need to know?
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style>
.col {
outline: solid rgb(255, 255, 255) 1px;
height: 100px;
background-color: rgba(42, 95, 142, 0.226);
}
</style>
</head>
<body>
<!-- Bootstrap Classes
Columns:
.col-xs- <768px
.col-sm- >=768px
.col-md- >=992px
.col-lg- >=1200px
Usefull links:
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php
http://getbootstrap.com/docs/3.3/css/#grid
https://www.w3schools.com/bootstrap/bootstrap_ref_all_classes.asp
Learn Bootstrap in One Video
Icons:
https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp
Cheatsheet:
https://cheatsheet.kursbootstrap.pl/
https://hackerthemes.com/bootstrap-cheatsheet/ (Bootstrap 4)
-->
<!-- Navbar with dropdown and hamburger -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#collapsemenu"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div class="collapse navbar-collapse" id="collapsemenu">
<button class="btn btn-primary navbar-btn">Inbox <span class="badge">3</span></button>
<ul class="nav navbar-nav">
<li class="active">
<a href="#">Home</a>
</li>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false" href="#">Links
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Example link1</a></li>
<li><a href="#">Example link1</a></li>
<li><a href="#">Example link1</a></li>
</ul>
</li>
<li class="disabled">
<a href="#">Disabled</a>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</div>
<button class="btn btn-defaults" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<!-- Jumbotron layout -->
<br>
<div class="jumbotron">
<div class="container">
<h2>Jumbotrooooon</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur obcaecati et consequatur nobis. Est
quibusdam iusto dolorem perferendis, odit, in iure, ipsum dolore dolores quo neque amet consequatur
pariatur doloribus maxime architecto reprehenderit. Ratione odio repellendus illo ea error
necessitatibus, at quae, mollitia voluptas soluta natus, nostrum dolores et ex placeat impedit. Ab,
blanditiis ducimus? Sequi cum, beatae adipisci earum repudiandae itaque sunt reprehenderit fugit
impedit tempora culpa. Vel quis vitae, consequuntur odit facere adipisci. Ab voluptates voluptate
molestias architecto sint quos nobis nam dolor officia quia minima maxime commodi optio quae odio,
repellendus ut id, sed totam? Libero, expedita?</p>
</div>
</div>
<div class="content container">
<div class="row">
<section class="col-sm-4">
<h3>Col-SM-4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
<a href="#">Read more</a>
</section>
<section class="col-sm-4">
<h3>Col-SM-4 <span class="label label-primary">NEW</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
<a href="#">Read more</a>
</section>
<section class="col-sm-4">
<h3>Col-SM-4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
<a href="#">Read more</a>
</section>
</div>
<div class="row">
<section class="col-sm-4">
<h3>Col-SM-4 <span class="label label-danger">HOT</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
<a href="#">Read more</a>
</section>
<section class="col-sm-4">
<h3>Col-SM-4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
<a href="#">Read more <span class="badge">more</span></a>
</section>
<section class="col-sm-4">
<h3>Col-SM-4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, temporibus.</p>
<a href="#">Read more</a>
</section>
</div>
</div>
<br>
<!-- Breadcrumbs -->
<div class="container">
<ol class="breadcrumb">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">us</a></li>
</ol>
</div>
<!-- Thumbnails -->
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="thumbnail">
<h1 class="text-center"><span class="glyphicon glyphicon-heart"></span></h1>
<div class="caption">
<h3>Heart</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-primary" role="button">Add to Cart</a></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="thumbnail">
<h1 class="text-center"><span class="glyphicon glyphicon-off"></span></h1>
<div class="caption">
<h3>Off</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-primary" role="button">Add to Cart</a></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="thumbnail">
<h1 class="text-center"><span class="glyphicon glyphicon-music"></span></h1>
<div class="caption">
<h3>Music</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-primary" role="button">Add to Cart</a></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="thumbnail">
<h1 class="text-center"><span class="glyphicon glyphicon-star"></span></h1>
<div class="caption">
<h3>Star</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.</p>
<p><a href="#" class="btn btn-primary" role="button">Add to Cart</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- Dropdown -->
<div class="container">
<div class="dropdown">
<button id="dev-drop" class="btn btn-primary dropdown-toggle btn-lg" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Dev. Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dev-drop">
<li class="dropdown-header">Front-End</li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Back-End</li>
<li><a href="#">Ruby</a></li>
<li><a href="#">Phyton</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</div>
<br>
<!-- Form -->
<div class="container">
<form class="form-inline" style="text-align: center;">
<div class="form-group has-feedback">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" style="border: 1px solid #4CAF50;">
<span class="glyphicon glyphicon-user form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group has-feedback">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" placeholder="E-mail" style="border: 1px solid #4CAF50;">
<span class="glyphicon glyphicon-envelope form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit"> Submit
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
</div>
</form>
</div>
<br>
<!-- Carousel -->
<div class="content container">
<div class="row">
<section class="col-sm-12">
<div id="carouselen" class="carousel slide hidden-xs" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselen" data-slide-to="0" class="active"></li>
<li data-target="#carouselen" data-slide-to="1"></li>
<li data-target="#carouselen" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<svg width="1200px" height="300px">
<rect x="0" y="0" width="1200px" height="300px" style="fill:lightblue">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s"
repeatCount="indefinite" />
</rect>
Sorry, your browser does not support inline SVG.
</svg>
<div class="carousel-caption">
<h4>First image</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, expedita.</p>
</div>
</div>
<div class="item">
<svg width="1200px" height="300px">
<rect x="0" y="0" width="1200px" height="300px" style="fill:yellow">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s"
repeatCount="indefinite" />
</rect>
Sorry, your browser does not support inline SVG.
</svg>
<div class="carousel-caption">
<h4>Second image</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, expedita.</p>
</div>
</div>
<div class="item">
<svg width="1200px" height="300px">
<rect x="0" y="0" width="1200px" height="300px" style="fill:brown">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s"
repeatCount="indefinite" />
</rect>
Sorry, your browser does not support inline SVG.
</svg>
<div class="carousel-caption">
<h4>Third image</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eaque, expedita.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#carouselen" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carouselen" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</section>
</div>
</div>
<br>
<!-- Modal -->
<div class="container">
<button class="btn btn-warning btn-lg" type="button" data-toggle="modal" data-target="#modal">Modal button</button>
<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="close"><span aria-hidden="true">×</span></button>
<div id="modalLabel" class="modal-title">
Modal Example
</div>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eveniet architecto
excepturi exercitationem nobis ipsum perspiciatis quibusdam voluptate aliquid, vel, nostrum
rem error quas ipsam sequi ex iste harum accusamus.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" role="button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<br>
<!-- Video responsive -->
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="embed-responsive embed-responsive-16by9">
<!-- Can also be 4by3 -->
<video class="embed-responsive-item" src="video/#.mp4" autoplay controls muted></video>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="embed-responsive embed-responsive-4by3">
<video class="embed-responsive-item" src="video/#.mp4" autoplay controls muted></video>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="embed-responsive embed-responsive-16by9">
<video class="embed-responsive-item" src="video/#.mp4" autoplay controls muted></video>
</div>
</div>
</div>
</div>
<br>
<!-- Panel -->
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">This is a panel</h2>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, cumque. Quidem libero modi ipsa quia
facere deleniti nihil in animi est exercitationem quis laboriosam pariatur aperiam repudiandae
beatae quisquam eius, sunt nulla? Odit maiores nulla autem similique tenetur reprehenderit quidem
aspernatur fugit laboriosam iste molestias sequi alias laudantium, vero deserunt?</p>
</div>
<div class="panel-footer">
<a href="#">Any kind of item here</a>
</div>
</div>
</div>
<!-- Pagination -->
<div class="container">
<ol class="pagination pagination-lg">
<li><a href="#" aria-label="Previous">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#" aria-label="Next">»</a></li>
</ol>
</div>
<br>
<hr>
<br>
<h1>Example 0:</h1>
<div class="container">
<div class="row">
<div class="col col-lg-1">M</div>
<div class="col col-lg-1">A</div>
<div class="col col-md-3">K</div>
<div class="col col-md-3">S</div>
<div class="col col-sm-2">I</div>
<div class="col col-sm-2">MER</div>
</div>
</div>
<div class="clearfix"></div>
<br>
<hr>
<br>
<h1>Example 1:</h1>
<div class="container">
<div class="row">
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
<div class="col col-sm-1">1</div>
</div>
</div>
<br>
<hr>
<br>
<h1>Example 2:</h1>
<div class="container-fluid">
<div class="row">
<div class="col col-sm-3 col-md-2">Column one</div>
<div class="col col-sm-9 col-md-8">Column two</div>
<div class="col col-sm-12 col-md-2">Column three</div>
</div>
</div>
<br>
<hr>
<br>
<h1>Example 3:</h1>
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>
<br>
<hr>
<br>
<h1>Example 4:</h1>
<div class="container">
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
</div>
<br>
<hr>
<br>
<h1>Example 5:</h1>
<div class="container">
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col col-xs-6">.col-xs-6</div>
<div class="col col-xs-6">.col-xs-6</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Live result: https://thomasweb.studio/bootstrap/bootstrap_moduler.html