Bootstrap Tabs:

Bootstrap Tabs with Cards

Perhaps one of the greatest features you can add to a website is a tabs section. Tabs can help clean up your pages from having to contain category lists and links to different pages. You can have a handy toolbar for you users where they can navigate to the different sections of your site. They also have a big impact on the appearance of your site which we all know is an extremely important element to focus on. With that said, you don’t have to suffice to a simple tabs section. You can go beyond and implement greater features with the help of your creativity and innovation. For instance, why not combine the tabs with some HTML CSS cards and make it extra special.

Bootstrap has a built-in feature that allows you to design tabs. In combination with cards, you can make them more interesting. Also, don’t stop there. A Bootstrap tabs animation can help get the cards dynamic which is more pleasing to the eye. The Bootstrap cards masonry is responsive, beautiful and very attractive. Also, the Bootstrap cards animation code is designed for different screen sizes, meaning the cards will be placed in a column for narrow screens whereas in wider ones, the cards are placed alongside each other.

Bootstrap Cards Masonry

Bootstrap Cards Animation

Bootstrap Tabs Animation

HTML CSS Cards

<!-- This script got from frontendfreecode.com -->
<main role="main" class="container-fluid">

  <div class="row">
    <div class="col-md">
      <div class="starter-template">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
          </li>
        </ul>

        <!-- tab content starts here -->
        <div class="tab-content" id="myTabContent">

          <!-- content 1 -->
          <div class="tab-pane masonry-container fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <h3>Tab 1 Content</h3>
            <div class="card-columns">
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-1.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 1</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-2.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 2</h5>
                  <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-3.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 3</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
            </div>
          </div>

          <!-- content 2 -->
          <div class="tab-pane fade masonry-container" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <h3>Tab 2 Content</h3>
            <div class="card-group">
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-4.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 4</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-5.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 5</h5>
                  <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-6.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 6</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
            </div>
          </div>

          <!-- content 3 -->
          <div class="tab-pane fade masonry-container" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <h3>Tab 3 Content</h3>
            <div class="card-group">
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-7.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 7</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-8.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 8</h5>
                  <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-9.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 9</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</main><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
  padding-top: 50px;
}

.starter-template {
  padding: 40px 15px;
}

.card {
  width: 300px !important; 
}

(function ($) {

  var $container = $('.masonry-container');
  $container.imagesLoaded(function () {
    $container.masonry({
      columnWidth: '.card',
      itemSelector: '.card' });

  });

  //Reinitialize masonry inside each panel after the relative tab link is clicked - 
  $('a[data-toggle=tab]').each(function () {
    var $this = $(this);

    $this.on('shown.bs.tab', function () {

      $container.imagesLoaded(function () {
        $container.masonry({
          columnWidth: '.card',
          itemSelector: '.card' });

      });

    }); //end shown
  }); //end each

})(jQuery);

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.js'></script>
<script src='https://unpkg.com/popper.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.1/masonry.pkgd.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.4/imagesloaded.js'></script>
<script src='https://unpkg.com/popper.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<style>
body {
  padding-top: 50px;
}

.starter-template {
  padding: 40px 15px;
}

.card {
  width: 300px !important; 
}
</style>

</head>
<body>
<main role="main" class="container-fluid">

  <div class="row">
    <div class="col-md">
      <div class="starter-template">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
          </li>
        </ul>

        <!-- tab content starts here -->
        <div class="tab-content" id="myTabContent">

          <!-- content 1 -->
          <div class="tab-pane masonry-container fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <h3>Tab 1 Content</h3>
            <div class="card-columns">
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-1.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 1</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-2.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 2</h5>
                  <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-3.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 3</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
            </div>
          </div>

          <!-- content 2 -->
          <div class="tab-pane fade masonry-container" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            <h3>Tab 2 Content</h3>
            <div class="card-group">
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-4.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 4</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-5.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 5</h5>
                  <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-6.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 6</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
            </div>
          </div>

          <!-- content 3 -->
          <div class="tab-pane fade masonry-container" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            <h3>Tab 3 Content</h3>
            <div class="card-group">
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-7.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 7</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-8.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 8</h5>
                  <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
              <div class="card">
                <img class="card-img-top" src="http://frontendfreecode.com/codes/files/400x250-9.jpg" alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title 9</h5>
                  <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</main><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
(function ($) {

  var $container = $('.masonry-container');
  $container.imagesLoaded(function () {
    $container.masonry({
      columnWidth: '.card',
      itemSelector: '.card' });

  });

  //Reinitialize masonry inside each panel after the relative tab link is clicked - 
  $('a[data-toggle=tab]').each(function () {
    var $this = $(this);

    $this.on('shown.bs.tab', function () {

      $container.imagesLoaded(function () {
        $container.masonry({
          columnWidth: '.card',
          itemSelector: '.card' });

      });

    }); //end shown
  }); //end each

})(jQuery);
</script>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS