Tab block can be used to display alternatively visible content on websites, web applications and landing pages.

Dependencies

  • Bootstrap 4
  • FontAwesome
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>FWR Bootstrap Blocks - Tab 1</title>

    <!-- Styles -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    <!-- Custom style -->
    <link rel="stylesheet" href="style.css">
    
</head>
<body class="bg-light">

    <div class="tab-1 py-4 py-md-5">
        <div class="container py-md-3">

            <div class="row">
                <div class="col-md-10 col-xl-8 tab-intro text-center mx-auto">
                    <h1 class="tab-intro-title mb-3">Awesome blocks for your website</h1>
                    <p class="lead">FWR blocks contains a variety of blocks and elements that you can mix and match to create various layouts. FWR blocks follow a similar pattern and design style so you can reuse it in your websites and web applications.</p>
                </div>
            </div>

            <ul class="nav nav-tabs mt-5" id="tab-1" 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="#about" role="tab" aria-controls="about" aria-selected="false">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                </li>
            </ul>

            <div class="bg-white p-3 p-md-4 shadow-sm tab-container">
                <div class="tab-content">
                    <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <h5 class="mb-3">Bootstrap and Foundation Blocks</h5>
                        <p><a href="//free-website-resources.com">FWR</a> contains a variety of blocks and elements which you can mix and match to create a variety of layouts. FWR blocks follow a similar pattern and design style so you can reuse it in your websites and web applications.</p>
                        <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
                    </div>
                    <div class="tab-pane" id="about" role="tabpanel" aria-labelledby="about-tab">
                        <h5 class="mb-3">About FWR</h5>
                        <p><a href="//free-website-resources.com">FWR</a> is a resource website, where we would be sharing design blocks, resources, snippets, tools, tips and tricks related to web designing and development.</p>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
                    </div>
                    <div class="tab-pane" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <h5 class="mb-3">Contact FWR</h5>
                        <p>We value customer feedback and suggestions. So, if you have any valuable feedback or suggestion, you can contact us through our <a href="//free-website-resources.com/contact-us">website</a>.</p>
                        <p>If you like our work and would like to support us, you can follow us on
                            <a href="//www.facebook.com/freeweb" target="_blank" rel="noopener nofollow">Facebook</a>,
                            <a href="//twitter.com/freeweb19" target="_blank" rel="noopener nofollow">Twitter</a>,
                            <a href="//www.linkedin.com/company/freeweb19/" target="_blank" rel="noopener nofollow">Linkedin</a> and
                            <a href="//www.pinterest.com/freewebz/" target="_blank" rel="noopener nofollow">Pinterest</a>.<br>
                            You can even join us on <a href="//t.me/freeweb19" rel="noopener nofollow">Telegram channel</a> or subscribe for newsletter.</p>
                        <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- /.tab-1 -->

    <!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
// Bootstrap variables and mixins
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// Variables
$primary:       #5863F8;

// Custom CSS
.tab-intro-title {
  font-size: 1.75rem;
  color: $primary;
}

.nav-tabs {
  border-bottom: none;

  .nav-item {
    margin-bottom: 0;
  }

  .nav-link {
    font-size: .875rem;
    font-weight: 600;
    color: $text-muted;
    text-transform: uppercase;
    border: none;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    transition: color .3s, background-color .3s, box-shadow .3s;

    &.active {
      color: $primary;
      box-shadow: $box-shadow-sm;
    }
  }
}

.tab-container {
  position: relative;
  z-index: 999;
  margin-top: -1px;
}

.tab-pane {
  a {
    color: $primary;
    padding-bottom: 2px;
    position: relative;

    &::after {
      content: '';
      height: 2px;
      border-radius: 1px;
      background-color: $primary;
      width: 0;
      position: absolute;
      bottom: 0;
      left: 50%;
      transition: width .3s, left .3s;
    }

    @include hover-focus-active {
      color: darken($primary, 5%);
      text-decoration: none;

      &::after {
        left: 0;
        width: 100%;
      }
    }
  }

  p:last-child {
    margin-bottom: 0;
  }
}


@include media-breakpoint-up(md) {

  .tab-intro-title {
    font-size: 2.5rem;
  }

  .nav-tabs {
    .nav-link {
      padding: 12px 24px;
    }
  }

}
.tab-intro-title {
  font-size: 1.75rem;
  color: #5863F8;
}

.nav-tabs {
  border-bottom: none;
}

.nav-tabs .nav-item {
  margin-bottom: 0;
}

.nav-tabs .nav-link {
  font-size: .875rem;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  border: none;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  -webkit-transition: color .3s, background-color .3s, -webkit-box-shadow .3s;
  transition: color .3s, background-color .3s, -webkit-box-shadow .3s;
  -o-transition: color .3s, background-color .3s, box-shadow .3s;
  transition: color .3s, background-color .3s, box-shadow .3s;
  transition: color .3s, background-color .3s, box-shadow .3s, -webkit-box-shadow .3s;
}

.nav-tabs .nav-link.active {
  color: #5863F8;
  -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
          box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.tab-container {
  position: relative;
  z-index: 999;
  margin-top: -1px;
}

.tab-pane a {
  color: #5863F8;
  padding-bottom: 2px;
  position: relative;
}

.tab-pane a::after {
  content: '';
  height: 2px;
  border-radius: 1px;
  background-color: #5863F8;
  width: 0;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transition: width .3s, left .3s;
  -o-transition: width .3s, left .3s;
  transition: width .3s, left .3s;
}

.tab-pane a:hover, .tab-pane a:focus, .tab-pane a:active {
  color: #404cf7;
  text-decoration: none;
}

.tab-pane a:hover::after, .tab-pane a:focus::after, .tab-pane a:active::after {
  left: 0;
  width: 100%;
}

.tab-pane p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .tab-intro-title {
    font-size: 2.5rem;
  }
  .nav-tabs .nav-link {
    padding: 12px 24px;
  }
}

Similar Blocks

No similar blocks found
aHR0cHM6Ly9mcmVlLXdlYnNpdGUtcmVzb3VyY2VzLmNvbS9ibG9ja3MvYm9vdHN0cmFwL3RhYi90YWItMQ==