Bootstrap 4

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div id="header">
<p>&lt; BACK TO HOMEPAGE</p>
</div>
<div id="menu-bar">
    <div class="container-fluid text-center">
        <div class="row border-bottom border-dark align-items-center">
          <div class="col">
          Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text<br/>
            Hello World
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col col-3">
            6
          </div>
          <div class="col col-2">
            7
          </div>
          <div class="col col-2">
            <button type="button" class="btn btn-dark">Play Video</button>
          </div>
        </div>
        <div class="row" style="font-size: smaller;">
          <div class="col col-3">
            1
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col">
            Preview text
          </div>
          <div class="col col-3">
            Colour
          </div>
          <div class="col col-4">
            Preview text
          </div>
        </div>
      </div>
</div>
</body>
</html>

CSS

body {
    margin: 10px;
}

div {
  border: 1px solid black;
}