Tag: twitter bootstrap

Why I'm getting more than one on click event fire inside bootstrap modal

I’m getting some problem here and need some help. I think this is easy but I just can’t figure it out myself what’s happening. Please see fiddle below: Fiddle When I only open the modal and clicks it for the first time. It works normally, but when I reopened it, there goes the problem. It […]

Animating Glyphicon on click

I am trying to animate a glyphicon-refresh icon so that when I click on the icon it should rotate. I am trying to do this using CSS3, but it is not working properly. Here is my markup: <a id=”update” href=”#”><i class=”glyphicon glyphicon-refresh”></i></a> Here is my css: <style> .glyphicon-refresh-animate { animation-name: rotateThis; animation-duration: .5s; animation-iteration-count: infinite; […]

Bootstrap Carousel not Working (showing all images at once)

I’m trying to add a carousel to my Bootstrap 3 website. The code used is directly from http://getbootstrap.com/javascript/#carousel. The code is also quite undocumented, so I had to make some guesses. The carousel just displays all three images stacked on top of one another. I am fairly certain that my javascript and jQuery are working, […]

Bootstrap Lightbox. How to use simple example in own site?

I’m trying to integrate Bootstrap Lightbox with my own twitter bootstrap site. How to use example from http://jbutz.github.com/bootstrap-lightbox/#demo in my code? What do I need to import? <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”utf-8″> <title>Template &middot; Bootstrap</title> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta name=”description” content=””> <meta name=”author” content=””> <!– Le styles –> <link href=”css/bootstrap.css” rel=”stylesheet”> <style […]

jQuery show.bs.collapse event for nested Bootstrap collapsible buttons fires on more buttons than expected

I’m using Bootstrap to make collapsible nested divs/buttons. I want to collapse all siblings of a div when it’s expanded and to collapse all children of a div when it’s collapsed (so that the expanded divs are from only one path from one of the root divs to an inner div). I chose to do […]

Prevent dialog on mobile screen from scrolling the body

I’m displaying a dialog on a mobile screen that’s longer than the size of the screen (so it scrolls). Here’s the problem: When you scroll past the bottom of the dialog (I happen to be using Bootstrap 3), I expect it to just stop. Instead, it starts scrolling the underlying body. I’ve tried everything that’s […]

Current state of bootstrap collapse stored in HTML5 Storage

I’m not sure if this is possible, but I hope someone can direct me in the right direction to achieve what I wish to achieve. I’m building a website around bootstrap from twitter; I use bootstrap collapse on a section box. This box isn’t collapsed by default, but if a user pushes a button and […]

Bootstrap 3: Nested tab

I am trying to put a tab inside of a tab, but whenever I click a inner nested tab, the entire inner nested tab row goes away. Here is an example in a jsfiddle http://jsfiddle.net/jNWMY/1/ Try clicking “Acquisitions/Facebook” tab. You will notice the second row of tabs just disappear. Here is my code <h1> Dashboard […]

Bootstrap make accordion collapse by clicking heading?

How can I make my accordion collapse after clicking the heading rather than just the text in the heading? Right now it only collapses when I click “Major”. JSFiddle: http://jsfiddle.net/P63pp/ My accordion html: <div class=”panel-group” id=”accordion”> <div class=”panel panel-default”> <div class=”panel-heading”> <h4 class=”panel-title”> <a data-toggle=”collapse” data-parent=”accordian” href=”#collapseMajor”> Major </a> </h4> </div> <div id=”collapseMajor” class=”panel-collapse collapse […]

Bootstrap Tabs – Prevent scrolling to top

This is the layout of my tabs. T1 and T2 are normal tab section. There is cascading tabs inside T3. Please find the markup below: <ul class=”nav nav-tabs” id=”myTab”> <li class=”active”><a href=”#T1″>Tab1</a></li> <li class=””><a href=”#T2″>Tab2</a></li> <li class=””><a href=”#T3″>Tab3</a></li> </ul> <div id=”myTabContent” class=”tab-content”> <div class=”tab-pane” id=”T2″> Tab 2 Content… </div> <div class=”tab-pane” id=”T3″> <div class=”tabbable tabs-left”> […]