SIMPLEST Bootstrap Nav Tabs

by Osama Qassar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div>
  <!-- Nav tabs -->
    <div >
        <a href data-target="#home" data-toggle="tab">Home</a>
        <a href data-target="#office" data-toggle="tab">Office</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane fade active" id="home">
    <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" />
    </div>
    <div class="tab-pane fade" id="office">
    <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=853&q=80" />
    </div>
  </div>

</div>

CSS

body {
    padding: 20px;
}
img{
  width: 100%;
}