I have an angular project that has bootstrap 4.
The container has two rows. I want one row to be at the bottom of the container always.
I have tried justify-content: flex-end; , bottom:0; and other methods, but none seem to work.
Also note: the parent component just has min-height: 100vh; in it's CSS. (So the board is always full height)
Here is the code and to properly see the situation:
<div class="sight-slider bg-success">
slider goes here <br>
slider goes here <br>
</div>
<div class="container">
<div class="row">
<div class="col-12 sight-info">
<h2> Title of Sight </h2>
<div class="sight-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate
consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab
modi nobis nesciunt voluptate eum tempora pariatur possimus et?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate
consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab
modi nobis nesciunt voluptate eum tempora pariatur possimus et?
</div>
<div class="sight-logic-info">
Bla <br>
Phone <br>
Hours <br>
Website
</div>
</div>
</div>
<div class="row btn-controls"> <!-- THIS ROW I NEED AT BOTTOM -->
<div class="col-3 bg-danger">
<button type="button" class="btn btn-exit">X</button>
</div>
<div class="col-9 bg-warning">
<button type="button" class="btn btn-go">Go to location</button>
</div>
</div>
</div>
Bootstrap has a few class built-in that can help.
You tell us you set min-height:100vh on the parent so i'll add this parent missing here and will use twice flex with flex-direction:column boostrap class : .flex-column.
To fill entire space, flex:1;/* or only flex-grow:1; */ is required and a custom class is needed.
finally, margin-top:auto ,via mt-auto class, will push the buttons container all the way down to bottom if it needs to.
/* custom class */
.min-h100vh {
min-height: 100vh;
}
.flex-1 {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class=" d-flex flex-column min-h100vh"><!-- flex boxe turned into a single column to minfill window -->
<div class="sight-slider bg-success">
slider goes here
</div>
<div class="container flex-1 d-flex flex-column "><!-- column again + fill entire space left -->
<div class="row">
<div class="col-12 sight-info">
<h2> Title of Sight </h2>
<div class="sight-description">
Lorem, ipsum dolor ...
</div>
<div class="sight-logic-info">
Bla bla bla ...
</div>
</div>
</div>
<div class="row btn-controls mt-auto"><!-- margin-top:auto; to go all the way down -->
<!-- THIS ROW I NEED AT BOTTOM -->
<div class="col-3 bg-danger">
<button type="button" class="btn btn-exit">X</button>
</div>
<div class="col-9 bg-warning">
<button type="button" class="btn btn-go">Go to location</button>
</div>
</div>
</div>
You can find the boostrap class about flex here https://getbootstrap.com/docs/4.0/utilities/flex/ margin and padding here https://getbootstrap.com/docs/4.0/utilities/spacing/ , ...
Since there are 2 items inside .container (div.row and div.row.btn-controls), you can set flex, column and justify as space-between, like this:
.container {
display: flex;
justify-content: space-between;
flex-direction: column;
}
So it should make that row stay at bottom.
Other possible solution depending on the situation:
As you mention bottom: 0. Also set position: relative to it. Or position: absolute and on its parent position: relative to make it as a reference.
Related
I have a problem with starting with the new beginning line after text is passed by Image.
I just wrote many sentences in the <p> tag in the portfolio-description part and all these texts are appeared in that part not starting with the new beginning line under image if the last line of text is passed by Image.
Here is the alignment issue https://ibb.co/825KFHJ
What I want to do that : https://ibb.co/RvM48rn
How can I do that? What file should I use? (CSS or JS)
<section id="portfolio-details" class="portfolio-details">
<div class="container">
<div class="row gy-4">
<div class="col-lg-6">
<div class="portfolio-details-slider swiper-container">
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="https://thumbs.dreamstime.com/b/projects-concept-black-chalkboard-d-rendering-handwritten-top-view-office-desk-lot-business-office-supplies-79906734.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://thumbs.dreamstime.com/b/projects-concept-black-chalkboard-d-rendering-handwritten-top-view-office-desk-lot-business-office-supplies-79906734.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://thumbs.dreamstime.com/b/projects-concept-black-chalkboard-d-rendering-handwritten-top-view-office-desk-lot-business-office-supplies-79906734.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="col-lg-6">
<div class="portfolio-info">
<h3>Project information</h3>
<ul>
<li><strong>Category</strong>: Web design</li>
<li><strong>Customer</strong>: ASU Company</li>
<li><strong>Project Date</strong>: 01 March, 2020</li>
</ul>
</div>
<div class="portfolio-description">
<h2>Project Title</h2>
<p>
Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia accusantium nesciunt est omnis tempora consectetur
dignissimos. Sequi nulla at esse enim cum deserunt eius.
</p>
</div>
</div>
</div>
</div>
</section>
I am trying to add a class to make a child .modal-container visible when clicking on the parent, which works, but then the second part of the code doesn't seem to work. e.g. when I click on the top right corner X sign .close-modal the modal doesn't disappear.
This is how the code looks like:
$(".animals-images").on('click', function() {
$(this).find(".modal-container").addClass("show");
});
$(".close-modal").on('click', function() {
$(this).parent(".modal-right").parent(".modal").parent(".modal-container").removeClass("show");
});
This is how the .show class style on CSS looks like:
.modal-container.show {
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
If on the last part of the jQuery code I put CSS ("opacity", "0"); instead of removeClass it works (but only once obviously). So I don't quite understand what is wrong here.
I wanted to do this in vanilla JavaScript, so if you have any idea how to do this it would be so much appreciated!
HTML:
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim!
Aut odio nobis vitae tenetur assumenda sit enim quo explicabo!
Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
</p>
</div>
</div>
</div>
</div>
Consider that this is repeated 10 times (for 10 different images/modals), I am trying to find a way to do this with a few lines of code instead of selecting 10 individual times
Update (based on OP comment)
thanks for the answer #dippas , is there any way that I can make this code functional for many other images?
You've got to loop through each button then toggling class show on each event (e.currentTarget)
const buttonsOpen = document.querySelectorAll('.click-me'),
buttonsClose = document.querySelectorAll('.close-modal')
buttonsOpen.forEach(el => el.addEventListener('click', e => e.currentTarget.parentElement.nextElementSibling.classList.add('show')))
buttonsClose.forEach(el => el.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show')))
.modal-container {
display: none
}
.modal-container.show {
display: block
}
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Modal 1
</p>
</div>
</div>
</div>
</div>
<hr />
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Modal 2
</p>
</div>
</div>
</div>
</div>
Here is a simple solution using vanilla JS
const buttonOpen = document.querySelector('.click-me'),
buttonClose = document.querySelector('.close-modal'),
modal = document.querySelector('.modal-container')
buttonOpen.addEventListener('click', () => modal.classList.add('show'))
//this
//buttonClose.addEventListener('click', () => modal.classList.remove('show'))
//or this
buttonClose.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show'))
.modal-container {
display: none
}
.modal-container.show {
display: block
}
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim! Aut odio nobis vitae tenetur assumenda sit enim quo explicabo! Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
</p>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$(".nav-item").click(function () {
$(".content").load("about.html");
});
});
<section id="header">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</section>
<div class="content"></div>
<div class="jumbotron "><h5>We make web app mobile app IOT and AI</h5>
<h1>We partner with startups founder</h1>
<h1>to build robust digital product</h1>
<div class="mt-5">
<button type="button">Start a Program</button>
</div>
</div>
<div class="discription text-center">
<h1>Digital Agency In India</h1>
<h3>Strategic.Creative.Technical</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br>
Iure dolores quo illo, et ipsa, hic consequuntur quae quia vero, nostrum aspernatur quisquam.<br>
Velit mollitia sapiente blanditiis animi illo, possimus repudiandae.<br>
</p>
</div>
<div class="content">
<div class="row">
<div class="col">
<P class="text-center">want to bring idea to you life?<br>
<button type="button">Call Us Today</button>
</P>
</div>
<div class="col">
<P class="text-center">1 tiny idea + team work = Result.<br>
<button type="button ">Start your Project</button>
</P>
</div>
</div>
</div>
<div>
<h1 class="text-center"><p>EXPLORE YOUR WORK</p></h1>
</div>
<div class="Strack">
<div class="row">
<div class="col">
</P>
</div>
<div class="col">
<h3>S-Track</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Assumenda veritatis fuga quo illum quibusdam, fugiat, sit adipisci magni voluptas<br>
distinctio quisquam, facilis dolorem ab. Totam cupiditate aperiam delectus laudantium?<br>
Fugiat.
</p>
<button type="button ">Read More</button>
</P>
</div>
</div>
</div>
<div class="SmartCrm">
<div class="row">
<div class="col">
<h3>Smart CRM</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Assumenda veritatis fuga quo illum quibusdam, fugiat, sit adipisci magni voluptas<br>
distinctio quisquam, facilis dolorem ab. Totam cupiditate aperiam delectus laudantium?<br>
Fugiat.
</p>
<button type="button ">Read More</button>
</div>
<div class="col">
</div>
</div>
</div>
<div class="Fleemarket">
<div class="row">
<div class="col">
</P>
</div>
<div class="col">
<h3>O-Fleet management</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Assumenda veritatis fuga quo illum quibusdam, fugiat, sit adipisci magni voluptas<br>
distinctio quisquam, facilis dolorem ab. Totam cupiditate aperiam delectus laudantium?<br>
Fugiat.
</p>
<button type="button ">Read More</button>
</P>
</div>
</div>
</div>
<div class="Fleemarket text-center">
<div class="row">
<div class="col">
Are you ready to start you project?
</P>
</div>
<div class="col">
<p>
Want to see our more work?
</p>
</div>
</div>
</div>
<div class="text-center">
OUR DIGITAL SERVICE
</div>
<div class="ods text-center">
<div class="row">
<div class="col-sm-3">
<h5>Strategy</h5>
</div>
<div class="col-sm-3">
<h5>UI/UX</h5>
</div>
<div class="col-sm-3">
<h5>development</h5>
</div>
<div class="col-sm-3">
<h5>AI</h5>
</div>
</div>
</div>
<div>
<p class="text-center">FIND US HERE</p>
</div>
<div class="cities text-center">
<div class="row">
<div class="col">
<p>Chennai</p>
</div>
<div class="col">
<p>United Kingdom</p>
</div>
</div>
</div>
<div class="text-center">
<h1>map</h1>
</div>
<div class="footer">
<div class="row">
<div class="col-sm-2">
Logo
</div>
<div class="col-sm-5">
<div class="row">
<div class="col">
<p> OUR services</p>
<p> Blog</p>
<p>Tech</p>
<p>our Process</p>
<p>About us</p>
</div>
<div class="col">
<p>Content</p>
<p>Career</p>
<p>Terms and Conditions</p>
<p>Privacy</p>
</div>
</div>
</div>
<div class="col-sm-5">
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
I'm trying to load one HTML to another main HTML using the load function. I have a navbar which has 4 links such as ABOUT, CONTACT, BLOG, SUPPORT. So incase if I click on the link ABOUT, I want the new content to load and already existing content should go. I have already loaded the ABOUT content to main page but I want already exsisting content to go and then new content to display.
PHP gives out native include and requires functions, but if using HTML, I found this working and useful: https://www.w3schools.com/howto/howto_html_include.asp
For removing the body part, you can write a JavaScript function to hide the elements.
hey guys i am using the bootstrap tabs component in one of my projects , now i wanted to add some animations to my bootstrap tabs , below is the HTML code :
<ul class="nav nav-tabs" id="myTab">
<li class="active">General fitness</li>
<li>Cardio</li>
<li>weight training</li>
<li>weight loss</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceInLeft">
</div>
<div class="col-md-5 animated bounceInRight" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionB" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionC" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionD" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
</div>
now everything works fine , notice how i am adding an animation to <img> and the 2nd <div class="col-md-5"> .
below is the script i wrote for the animations to apply , everytime a tab is clicked :
Jquery script :
$('#myTab').on('click' , 'li a' , function(){
$this = $(this);
var str_href = $this.attr('href');
str_image = str_href + ' ' + 'img';
str_contentdiv = str_href + ' ' + '.add-animation';
$(str_image).removeClass('animated bounceInLeft');
$(str_contentdiv).removeClass('animated bounceInRight');
setTimeout(function(){
$(str_image).addClass('animated bounceInLeft');
$(str_contentdiv).addClass('animated bounceInRight');
setTimeout( function(){
$(str_image).removeClass('animated bounceInLeft');
$(str_contentdiv).removeClass('animated bounceInRight');
}, 2000);
}, 100);
});
its short and sweet , the problem is for removal of the class the setTimeout function takes 2 secound , which means that if the user turns out to be a click maniac , the animations won't run , the reason , i can't lover the 2 secounds rule is that , the animation runs for 2 secound .
I would be grateful if somebody can help me join the missing peice here , I.E. how do i make the animations appear everytime a tab is clicked ??
Thank you.
Alexander.
Add an event lister on the element for the animationend/transitionend events
first obtain the transition end name with the properly prefix. (Use Modernizr or read this article to implement the logic without Modernizr to obtain the event name with prefix)
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',// Saf 6, Android Browser
'MozTransition' : 'transitionend', // only for FF < 15
'transition' : 'transitionend' // IE10, Opera, Chrome, FF 15+, Saf 7+
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
Then add the eventListener with the callback
element.addEventListener(transEndEventName, transitionEndCallback);
Also you can just implement your desired animation when the element becomes active, only once
#myTab.active img {
animation: bounce-left-right 2s ease 1; //Actually is 1 by default so it's not necessary
}
#keyframe {
0% {//bounce left animation}
100% {//bounce right animation}
}
I have a small difficulty with the Bootstrap tabs.
Basically I am using these tabs for a demo site and I have the following HTML structure.
HTML :
<ul class="nav nav-tabs" id="myTab">
<li class="active">General fitness</li>
<li>Cardio</li>
<li>weight training</li>
<li>weight loss</li>
</ul>
<div class="tab-content">
<div id="sectionA" class="tab-pane fade in active">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right animated bounceInLeft">
</div>
<div class="col-md-5 animated bounceInRight" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionB" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionC" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
<div id="sectionD" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="images/traning/traning-image.jpg" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
</div>
</div>
Now this works perfectly fine, I have used this tabs feature for a lot of old sites of mine, but this time I decided to add some css-3 animations, so let's focus on the part that I am having difficulty with. Basically, every time a tab is clicked I want the <img> and the <div class="col-md-5"> to be added with the classes animated bounceInLeft and animated bounceInRight respectively.
Now, what did I do to achieve this, basically every time the tabs are clicked an event fires, hidden.bs.tab and every time a tab is shown an event fires shown.bs.tab. Now I wrote the below code :
$('#myTab').on('hidden.bs.tab' , function(){
// console.log('tab hidden');
$('.tab-content img').removeClass('animated bounceInLeft');
$('.tab-content .col-md-5').removeClass('animated bounceInRight');
});
$('#myTab').on('shown.bs.tab' , function(){
// console.log('tab hidden');
if ($('.tab-pane').hasClass('active')) {
$('.tab-content img' ).addClass('animated bounceInLeft');
$('.tab-content .col-md-5').addClass('animated bounceInRight');
}
});
There is a big flaw with the above code I have written though, what I wanted to achieve is when I click on a tab I only want the <img> and the <div class="col-md-5"> of that particular tab to be added with the classes animated bounceInLeft and animated bounceInRight respectively. But what the above code is really doing is removing the classes from all the elements and immediately re-adding them.
I am thinking the this keyword maybe needs to be used, but am I not sure how to implement this; can somebody tell me what am I missing?
I don't know if Bootstrap has animated classes?
However you could use this repo to achieve the preferred animation you want.
Add this:
<link rel="stylesheet" href="animate.min.css">
I've updated the HTML slightly(added class text-content to every col-md-5).
<div id="sectionD" class="tab-pane fade">
<div class="container">
<div class="row">
<div class="col-md-offset-1 col-md-5 clearfix">
<img src="http://lorempixel.com/400/200/" alt="stretching exercise" class="pull-right">
</div>
<div class="col-md-5 text-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus eligendi odit aspernatur asperiores quia laudantium porro velit. Eligendi neque, quos quo at eos earum qui harum, temporibus dolore laboriosam aperiam.</p>
</div>
</div>
</div>
And this jQuery
$(document).ready(function(){
//make first tab active
$("#myTab li:eq(0) a").tab('show');
$('#myTab').on('hidden.bs.tab' , function(){
$('.text-content').removeClass('animated bounceInRight');
$('img').removeClass('animated bounceInLeft');
});
$('#myTab').on('shown.bs.tab' , function(){
$('.active').find('.text-content').addClass('animated bounceInRight');
$('.active').find('img').addClass('animated bounceInLeft');
});
});
Using a little setTimeout magic, I found the solution:
$('#myTab').on('click' , 'li a' , function(){
$this = $(this);
var str_href = $this.attr('href');
str_image = str_href + ' ' + 'img';
str_contentdiv = str_href + ' ' + '.add-animation';
setTimeout(function(){
$(str_image).addClass('animated bounceInLeft');
$(str_contentdiv).addClass('animated bounceInRight');
setTimeout( function(){
$(str_image).removeClass('animated bounceInLeft');
$(str_contentdiv).removeClass('animated bounceInRight');
}, 2000);
}, 100);
});
Note: to the col-md-5 that I add the animated bounceInRight class I also add the class add-animation as a hook, could have used a css selector, but never mind.
Drawback of this method : if the user turns out to be a click maniac, the animations will not show, because that's the way setTimeout works :D