BootStrap Table

Div based

by gbkim1988

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container justify-center">
  <div class="row">
    <ul class="">
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </div>
  <div class="row">
    <ul class="">
      <li><a href="#home">Row2-Column1</a></li>
      <li><a href="#news">Row2-Column2</a></li>
      <li><a href="#contact">Row2-Column3</a></li>
      <li><a href="#about">Row2-Column4</a></li>
    </ul>
  </div>
</div>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #333333; */
}

li {
  float: left;
  margin: 1px;
  padding: 1px;
  border: 1px solid black;
}

li a {
  display: block;
  /* color: white; */
  text-align: center;
  text-decoration: none;
}

li a:hover {
/*   background-color: #111111; */
}