Bootstrap 4 Tab | Responsive bootstrap tab

Bootstrap 4 Tabs download with live example
Bootstrap 4 Tabs download with live example
Bootstrap 4 Tabs download with live example

Hey Friends in this article we will learn how to create Bootstrap Tabs using Bootstrap 4 -tab, here i will provides the complete source code of Bootstrap 4 Responsive Templates.



HTML CODE

  <div class="container mytab">
       <div class="tab-content">

          <div id="home" class="container tab-pane active"><br>
            <div class="row">
               <div class="col-md-9 col-12 pb-4 overview">
                  <h2>Parkshala Foundation <i class="fa fa-check"></i></h2>
                  <h3>Upcoming Event Tittle goes here</h3>
                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
                  <div class="row">
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                  </div>
                  
                  <div class="row">
                    <div class="col-md-12 mt-3">
                       <span class="link1">Donate Now</span>
                       <span class="link2">Become Volunteer</span>
                       <span class="link3">See All Photos <i class="fa fa-arrow-right"></i></span>
                    </div>
                  </div>
                  
               </div>
               <div class="col-md-3 col-12 text-center overview_right">
                  <img src="img/pic-1.jpg" />
                  <p>Deepak, 14 Year Old</p>
                  <p>Painting</p>
               </div>
            </div>
         </div>
         
         
         <div id="menu1" class="container tab-pane fade"><br>
             <div class="row">
               <div class="col-md-9 col-12 pb-4 overview">
                  <h2>Parkshala Foundation <i class="fa fa-check"></i></h2>
                  <h3>Upcoming Event Tittle goes here</h3>
                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
                  <div class="row">
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                  </div>
                  
                  <div class="row">
                    <div class="col-md-12 mt-3">
                       <span class="link1">Donate Now</span>
                       <span class="link2">Become Volunteer</span>
                       <span class="link3">See All Photos <i class="fa fa-arrow-right"></i></span>
                    </div>
                  </div>
                  
               </div>
               <div class="col-md-3 col-12 text-center overview_right">
                  <img src="img/pic-1.jpg" />
                  <p>Deepak, 14 Year Old</p>
                  <p>Painting</p>
               </div>
            </div>
         </div>
         
         
         <div id="menu2" class="container tab-pane fade"><br>
             <div class="row">
               <div class="col-md-9 col-12 pb-4 overview">
                  <h2>Parkshala Foundation <i class="fa fa-check"></i></h2>
                  <h3>Upcoming Event Tittle goes here</h3>
                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
                  <div class="row">
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                  </div>
                  
                  <div class="row">
                    <div class="col-md-12 mt-3">
                       <span class="link1">Donate Now</span>
                       <span class="link2">Become Volunteer</span>
                       <span class="link3">See All Photos <i class="fa fa-arrow-right"></i></span>
                    </div>
                  </div>
                  
               </div>
               <div class="col-md-3 col-12 text-center overview_right">
                  <img src="img/pic-1.jpg" />
                  <p>Deepak, 14 Year Old</p>
                  <p>Painting</p>
               </div>
            </div>
         </div>
         
         <div id="menu3" class="container tab-pane fade"><br>
             <div class="row">
               <div class="col-md-9 col-12 pb-4 overview">
                  <h2>Parkshala Foundation <i class="fa fa-check"></i></h2>
                  <h3>Upcoming Event Tittle goes here</h3>
                  <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p>
                  <div class="row">
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                     <div class="col-md-2 col-3"><img src="img/pic-1.jpg" class="img-fluid" /></div>
                  </div>
                  
                  <div class="row">
                    <div class="col-md-12 mt-3">
                       <span class="link1">Donate Now</span>
                       <span class="link2">Become Volunteer</span>
                       <span class="link3">See All Photos <i class="fa fa-arrow-right"></i></span>
                    </div>
                  </div>
                  
               </div>
               <div class="col-md-3 col-12 text-center overview_right">
                  <img src="img/pic-1.jpg" />
                  <p>Deepak, 14 Year Old</p>
                  <p>Painting</p>
               </div>
            </div>
         </div>
         
       </div>
       </div>


       <div class="container mylinks">
          <ul class="nav nav-pills" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-toggle="pill" href="#home">Overview</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#menu1">Upcomming Events</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#menu2">Kids Story</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#menu3">Explore NGO</a></li>
          </ul>
       </div>
       

CSS CODE

body
{	
   background:#fefefd;
   margin:0px;
   padding:0px;
}

.container-fluid {
  padding: 0px;
}


.nav-pills
{
	display: flex;
    justify-content: center;
}

.mylinks
{
	background:#f2f2f2;
	width:100%;
	border-top:1px solid #d4d2d2;
}

#d_container
{
	background:#f8f8f8;
	display:none;
	margin-top:-50px;
	position:relative;
}

.nav-pills .nav-item 
{
	line-height:40px;
	background:#f2f2f2;
	font-weight:600;	
}

.nav-pills .nav-item a
{
	color:#333;
}

.nav-pills .nav-item .active
{
	border-bottom:5px solid #5abafb;
	background:none;
	border-radius:0px;
	color:#5abafb;
}

.overview h2,h3
{
	margin-top:10px;
	font-size:18px;
}

.overview .link1
{
	width:auto;
	padding:6px 20px 6px 20px;
	font-size:12px;
	height:35px;
	border-radius:50px;
	background:#000;
	color:#fff;
	cursor:pointer;
	transition: 250ms all;
	-webkit-transition: 250ms all;
}

.overview .link1:hover
{
    background:#f60;
}

.overview .link2
{
	width:auto;
	margin-left:10px;
	padding:5px 20px 5px 20px;
	font-size:12px;
	height:35px;
	border-radius:50px;
	border:1px solid #000;
	color:#000;
	cursor:pointer;
	transition: 250ms all;
	-webkit-transition: 250ms all;
}

.overview .link2:hover
{
    background:#000;
    border:none;
    color:#fff;
}

.overview .link3
{
	width:auto;
	padding:5px 10px 5px 12px;
	font-size:14px;
	font-weight:bold;
	height:35px;
	color:#000;
	cursor:pointer;
}

.overview_right img
{
	width:150px;
	margin-top:40px;
	height:150px;
	border-radius:100%;
}

.overview_right p
{
	font-weight:bold;
	margin:0px;
	padding:0px;
}

.overview ul
{
    padding-left:5px;
    list-style:none;
    margin-top:20px;
}

.overview ul li::before
{
    content:">";
    padding-right:5px;
    font-weight:bold;
    color:Maroon;
}

.overview ul li
{
    line-height:25px;
}



/*Image Hover Content*/


.image_hover_container
{
	display:none;
	position:absolute;
	border-radius:10px;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	background:rgba(0,0,0,0.8);
	z-index:100000000000000;
}

.block_1
{
	margin-top:10px;
}

.pl
{
	padding-left:20px;
}


.pr
{
	padding-right:20px;
}


.b_1
{
	font-size:8px;
	padding-left:20px;
	color:#fff;
}



.b_1
{
	font-size:10px;
	padding-left:20px;
	color:#fff;
}

.b_2
{
	position:relative;
	width:20px;
	height:20px;
	line-height:20px;
	background:#fff;
	border-radius:100%;
	display:inline-block;
}

.b_2 i
{
	position:absolute;
	left:50%;
	font-size:10px;
	color:#333;
	top:50%;
	transform:translate(-50%,-50%);
}


.block_2 h2
{
	font-size:12px;
	color:#fff;
}

.block_3 i
{
	font-size:12px;
	color:#fff;
}

.block_4 p
{
  display: -webkit-box;
  max-width: 100%;
  height: 50px;
  margin: 0 auto;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#ccc;
  font-size:9px;
}

.block_5 i
{
	position:fixed;
	left:50%;
	bottom:10px;
	color:#fff;
	cursor:pointer;
}

#close_bt
{
    position:absolute;
	text-align:center;
	padding:10px;
	font-weight:bold;
	color:#fff;
	background:#333;
	width:30px;
	height:30px;
	line-height:10px;
	border-radius:100%;
	cursor:pointer;
	position:absolute;
	top:20px;
	right:10px;
	z-index:10000000000000000000000;
}




@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and  only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

.swiper-button-next
{
}

	
.nav-pills .nav-item 
{
	line-height:30px;
	background:#f9f9f6;
	margin:0px;
	padding:0px;
}

.nav-pills .nav-item a
{
	color:#333;
	font-size:10px;
	font-weight:bold;
}

.nav-pills .nav-item .active
{
	border-bottom:2px solid #5abafb;
	background:none;
	border-radius:0px;
	color:#5abafb;
}


.overview h2,h3
{
	margin-top:10px;
	font-size:16px;
}

.overview p
{
	font-size:13px;
	text-align:justify;
}

.overview .link1
{
	width:auto;
	padding:3px 5px 3px 5px;
	font-size:12px;
	height:35px;
	border-radius:50px;
	background:#000;
	color:#fff;
	cursor:pointer;
}

.overview .link2
{
	width:auto;
	margin-left:6px;
	padding:3px 5px 3px 5px;
	font-size:12px;
	height:35px;
	border-radius:50px;
	border:1px solid #000;
	color:#000;
	cursor:pointer;
}

.overview .link3
{
	width:auto;
	padding:5px 5px 5px 5px;
	font-size:10px;
	font-weight:bold;
	height:35px;
	color:#000;
	cursor:pointer;
}

.overview_right
{
	padding-bottom:20px;
}


/*Image Hover Responsive */


.pl
{
	padding-left:5px;
}


.pr
{
	padding-right:5px;
}

.block_2
{
	margin-top:10px;
}

.b_1
{
	font-size:8px;
	color:#fff;
}



.b_2
{
	position:relative;
	width:15px;
	height:15px;
	line-height:15px;
	background:#fff;
	border-radius:100%;
	display:inline-block;
}

.b_2 i
{
	position:absolute;
	left:50%;
	font-size:7px;
	color:#333;
	top:50%;
	transform:translate(-50%,-50%);
}

.block_2
{
	margin-top:-25px;
}

.block_2 h2
{
	font-size:10px;
	color:#fff;
}

.block_3 i
{
	font-size:8px;
	color:#fff;
}

.block_4 p
{
  display: -webkit-box;
  max-width: 100%;
  height: 20px;
  margin: 0 auto;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#ccc;
  font-size:9px;
}

.block_5 i
{
	position:fixed;
	left:50%;
	bottom:5px;
	color:#fff;
	font-size:12px;
	cursor:pointer;
}

.overview ul li
{
    font-size:13px;
    line-height:18px;
}






}



1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
trackback

[…] 4 Tabs download with live example Responsive Bootstrap Tab Filed Under: Filed Under:CSS TRICKS, General, HTML […]