Theo-denBlanken/gridBootstrap.html

## gridBootstrap.html
<!DOCTYPE html>
<html lang="ne">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Theo den Blanken">
    <title>navigatiebalk</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container-fluid ">
        <div class="row">
            <div class="col-4">
                <h3>Eenderde van de breedte</h3>
                <p>
                    met een class <code>.col-4</code>. <br>

                </p>
            </div>
            <div class="col-8">
                <h3>Tweederde van de breedte</h3>
                <p>
                    met een class <code>.col-8</code> .
                    Deze kolom zit samen met de smallere kolom hiernaast in een div met de class <code>.row</code>.
                    Deze zit dan weer in de class <code>container-fluid.</code>
                </p>
            </div>
        </div>
    </div>
    <hr>
    <div class="container bg-secondary">
        <div class="row">
            <div class="col-4">
                <h3>Eenderde van de breedte</h3>
                <p>
                    met een class <code>.col-4</code>. <br>

                </p>
            </div>
            <div class="col-8">
                <h3>Tweederde van de breedte</h3>
                <p>
                    met een class <code>.col-8</code> <br>
                    Deze kolom zit samen met de smallere kolom hiernaast in een div met de class <code>.row</code>.
                    Deze zit dan weer in de class <code>container.</code>
                </p>
            </div>
        </div>
    </div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script> -->
</body>
</html>
	<!DOCTYPE html>
	<html lang="ne">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="Theo den Blanken">
	<title>navigatiebalk</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	</head>
	<body>
	<div class="container-fluid ">
	<div class="row">
	<div class="col-4">
	<h3>Eenderde van de breedte</h3>
	<p>
	met een class <code>.col-4</code>. <br>

	</p>
	</div>
	<div class="col-8">
	<h3>Tweederde van de breedte</h3>
	<p>
	met een class <code>.col-8</code> .
	Deze kolom zit samen met de smallere kolom hiernaast in een div met de class <code>.row</code>.
	Deze zit dan weer in de class <code>container-fluid.</code>
	</p>
	</div>
	</div>
	</div>
	<hr>
	<div class="container bg-secondary">
	<div class="row">
	<div class="col-4">
	<h3>Eenderde van de breedte</h3>
	<p>
	met een class <code>.col-4</code>. <br>

	</p>
	</div>
	<div class="col-8">
	<h3>Tweederde van de breedte</h3>
	<p>
	met een class <code>.col-8</code> <br>
	Deze kolom zit samen met de smallere kolom hiernaast in een div met de class <code>.row</code>.
	Deze zit dan weer in de class <code>container.</code>
	</p>
	</div>
	</div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
	<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script> -->
	</body>
	</html>