Vi gick genom idag hur man kan använda Bootstrap för att snabbt göra en layout.
Man lägger en länk till deras css i head taggen.
<head>
<!-- LÄNK TILL BOOTSTRAP CSS -->
<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">
</head>Och för att det ska fungera måste man även referera till lite JavaScript.
jQuery, Popper.js och Bootstraps eget JavaScript, villket man lägger längst ned i body, innan den avslutas
<body>
<!-- jQuery: -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<!-- Bootstrap egna javascript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>Sen gick vi genom hur vi använder Bootstraps grid system, med att vi ger et div element, klassen container. Inuti den ger vi et nytt div element, klassen row. Och till slut inuti den så kan vi, baserat på hur mycket plats vi vill at vårt innehåll ska ta och villken skärmstorlek, ge div element, klassen col.
Och den kan exempelvis se ut såhär:
<div class="container">
<div class="row">
<div class="col-md-4">LOREM IPSUM</div>
<div class="col-md-4">LOREM IPSUM</div>
<div class="col-md-4">LOREM IPSUM</div>
</div>
</div>Sen fick ni återskapa en layout.