Ga naar inhoud
GetPraut Dev Docs GetPraut Dev Docs

Hoe gebruik je bootstrap

Bootstrap

Hoe gebruik ik Bootstrap?

  1. Importeer bootstrap van de cdn. dit doe je zo:
<link   href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  1. Gebruik bootstrap.
  2. Maak een index.html bestand in je top folder. Include the tag voor een mobiel vriendelijke site.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Demonstratie</title>
  </head>
  <body>
    <h1>Hallo, wereld!</h1>
  </body>
</html>
  1. Voeg de Bootstrap CSS en Javascript bestanden toe aan de file het bestand zou er nu zo uit moeten zien.
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>
  1. Hallo, wereld! Open een webbrowser naar keuze en je ziet je bootstrap pagina.