Tag Archives: Twitter Bootstrap

Twitter Bootstrap – Carousel Only CSS

Hey everyone,

I ran into a bit of an issue today with my stylesheet conflicting with Bootstrap. After a bit of tinkering I realised that all I really needed from bootstrap were the Carousel styles. I’ve taken everything else out and included everything that’s left below:

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: .5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
  outline: none;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
}
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    font-size: 30px;
  }
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}

Minified:

.carousel{position:relative}.carousel-inner{position:relative;overflow:hidden;width:100%}.carousel-inner>.item{display:none;position:relative;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;left:0;bottom:0;width:15%;opacity:.5;filter:alpha(opacity=50);font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-control.left{background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.5)0),color-stop(rgba(0,0,0,.0001)100%));background-image:linear-gradient(to right,rgba(0,0,0,.5)0,rgba(0,0,0,.0001)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)}.carousel-control.right{left:auto;right:0;background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.0001)0),color-stop(rgba(0,0,0,.5)100%));background-image:linear-gradient(to right,rgba(0,0,0,.0001)0,rgba(0,0,0,.5)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)}.carousel-control:focus,.carousel-control:hover{outline:0;color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-family:serif}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;border:1px solid #fff;border-radius:10px;cursor:pointer;background-color:#000 \9;background-color:rgba(0,0,0,0)}.carousel-indicators .active{margin:0;width:12px;height:12px;background-color:#fff}.carousel-caption{position:absolute;left:15%;right:15%;bottom:20px;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}.carousel-caption{left:20%;right:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}

Let me know if you have any other issues.

Twitter Bootstrap Dropdown Button

Dropdown Button – Twitter Bootstrap

Hey everyone,

Just a quick post on how to create a dropdown button using Twitter Bootstrap. It’s pretty straight forward, once you’ve included all your CSS etc just add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div style='text-align:left;'>
	<div class="btn-group">
	  <a class="btn dropdown-toggle btn-success" data-toggle="dropdown" href="#">
	    Button Text
	    <span class="caret"></span>
	  </a>
	  <ul class="dropdown-menu">
	    <li>
	    	<a href="#">Menu Option #1</a>
	    </li>
	    <li>
	    	<a href="#">Menu Option #2</a>
	    </li>
	    <li>
	    	<a href="#">Menu Option #3</a>
	    </li>
	    <li class='divider'></li>
	    <li>
	    	<a href="#">Menu Option #4</a>
	    </li>
 
	    <li>
	    	<a href="#">Menu Option #5</a>
	    </li>
	  </ul>
	</div>
</div>

Once you save that you should see something similar to the image below:

Twitter Bootstrap Dropdown Button

A standard twitter bootstrap dropdown button.

Change list item text alignment

To change the text alignment of this list items, all you need to do is adjust the text-align style assigned to the wrapper div.

Change dropdown button color

Once again, this is fairly simple, all you need to do is switch the button type. For instance, if you were after an orange button, you can swap btn-success with btn-warning. A list of the default styles is available on the Twitter Bootstrap site.

Let me know if you have any issues.

jQuery DateTimePicker with Bootstrap

Hey everyone,

I ran into a bit of trouble today trying to get datetimepicker to work within bootstrap tabs. The dialog appeared however none of the buttons seemed to work. The fields also remained unpopulated.

It turned out the the issue was caused by the fact that I’d used jquery’s clone function to duplicate the tabs without reassigning field ids. This meant that there were multiple fields with the same id, confusing datetimepicker.

The solution I used was to dynamically assign all of the ids as each tab was displayed:

 
/* Bind tab change events: this has been done so that there is less js overhead */
function bind_tab_change_events(){
 
	//Bind change event
	$('.nav-tabs').bind('show', function(e){
 
		//Create vars
		var selected_file_id = $(e.target).data('file_id');
 
		//Initialisations
		initialise_time_pickers('#file_' + selected_file_id + ' .timepicker', selected_file_id);	
	})
}
 
/* Initalise timepickers */
function initialise_time_pickers(selector, unique_id){
 
	//Loop through each bound element
	$.each($(selector), function(index, value){
 
		//Set id - datepicker won't work without unique ids
		$(value).attr('id', $(value).attr('id') + '_' + unique_id);
 
		//Initialise datepicker		
		$(value).datetimepicker();
	});
}

UPDATE:
It looks like quite a few people hitting this post are looking for a bootstrap specific alternative, Sebastien has provided a link to one in the comments below:
Bootstrap DatetimePicker.

Another one that looks really good, a bit less clunky than any of the alternatives I’ve seen: http://tarruda.github.com/bootstrap-datetimepicker/

Plain timepicker: http://jdewit.github.com/bootstrap-timepicker/

Plain datepicker: http://www.eyecon.ro/bootstrap-datepicker/

Let me know if you have any questions!

Remove Disabled Attribute – Twitter Bootstrap

Hey everyone,

I was using Bootstrap’s disabled attribute today and just needed a way to remove it. Once again, jQuery has a quick and easy way to do this:

 
$('#my_input').removeAttr('disabled');

There’s a whole heap of documentation on the jQuery site: http://api.jquery.com/removeAttr/

Modal Popup – Twitter Bootstrap

Just a quick post on how to create a modal popup using twitter bootstrap:

Step #1:

Add the following to a page element such as a link or button in order to open the modal:

     href="modal_content_name"
     data-toggle="modal"

i.e.

<a type="button" class="btn" style="width:100%;" href="#test_modal" data-toggle="modal">Add Image</a>

Step #2:
Create a content div i.e.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="modal fade" id="test_modal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h3>Modal Header</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save Changes</a>
  </div>
</div>

And that’s all there is to it, just make sure you’ve included the bootstrap-modal.js file.

Modal Popup - Twitter Bootstrap

Modal Popup - Twitter Bootstrap


Open Twitter Bootstrap Modal Popup on Page Load:
In order to open the modal dialog on page load simply add the following JavaScript:

1
2
3
4
5
<script type="text/javascript">
    $(document).ready(function(){
        $('#test_modal').modal('show');
    });
</script>

You can also close the modal popup manually by using the following JavaScript:

1
2
3
<script type="text/javascript">
$('#test_modal').modal('hide')
</script>

Adjust Modal Width:
In order to adjust the modal width you have two options, Javascript or CSS. You can use the following JavaScript mentioned on GitHub:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
   $('#test_modal').modal({
        backdrop: true,
        keyboard: true,
        show: false \\remove this if you don't want it to show straight away
    }).css({
        width: 'auto',
        'margin-left': function () {
            return -($(this).width() / 2);
        }
    });
</script>

Or this CSS from StackOverflow:

1
2
3
4
5
6
body .modal-admin {
    //new custom width
    width: 750px;
    //must be half of the width, minus scrollbar on the left (30px)
    margin: -345px 0 0 -375px;
}

Show modal when the user scrolls past certain div
I’ve received another request on how to show the modal when a user scrolls to a certain div. The following should work, but please let me know if you have any issues.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* Wait for document to load */
$(document).ready(function(){
 
$(window).scroll(function(){
 
//Retrieve scroll distance from top
var top = $(window).scrollTop();
 
//Retrieve the divs distance from top of page
var div_distance = $('my_div').offset().top;
 
//Use this if you want a bit of a variable distance, for instance if they scroll 150 pixels past the div
var buffer_distance = 150;
 
//Check if scrolled past div
if(top >= div_distance && top <= (div_distance + buffer_distance)){
 
//Show modal - you may want to add checks etc to see if it's already show
$('#test_modal').modal('show');
 
} else {
 
//Hide the modal, have scrolled past - you may want to add some checks to see if it's already hidden etc
$('#test_modal').modal('hide');                         
}        
}); 
});

Popover Function – Twitter Bootstrap

Just a quick post on how easy it is to implement a popover with twitter bootsrap:

JavaScript:

//Create tooltips for login/signup forms
function create_tooltips(){
 
    //Create vars
    var titles = ['test title']
    var contents = ['test content'];
    var fields = ['#user_email'];
 
    //Loop through each field and assign tooltip
    for(var i = 0; i < fields.length; i++){
 
        //Create vars
        var field = $(fields[i]);
        var title = titles[i];
        var content = contents[i];
 
        //Ensure field found
        if(field){
 
            //Create popover
            $(field).popover(
                {
                    animation: true,
                    placement: 'right',
                    selector: false,
                    trigger: 'hover',
                    title: title,
                    content: content,
                    delay: 0
                });
        }
    }
}

Form:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  <div class="span4">
    <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :class => 'form-vertical') do |f| %>
    <fieldset class="well">
      <div class="control-group">
        <%= f.label :email, 'Email:' %>
        <div class="controls">
          <%= f.email_field :email %>
        </div>
      </div>
      <div class="control-group">
        <%= f.label :display_name, 'Display Name:' %>
        <div class="controls">
          <%= f.text_field :display_name %>
        </div>
      </div>
      <div class="control-group">
        <%= f.label :password, 'Password:' %>
        <div class="controls">
          <%= f.password_field :password %>
        </div>
      </div>
      <div class="control-group">
        <%= f.label :password_confirmation, 'Password Confirmation:'%>
        <div class="controls">
          <%= f.password_field :password_confirmation %>
        </div>
      </div>
      <div class="control-group">
        <%= f.submit "Sign up", :class => 'btn btn-success' %>
      </div>
    </fieldset>
    <% end %>
  </div>

Result:

Popover - Twitter Bootstrap

Popover - Twitter Bootstrap

That’s all there is to it, if you haven’t had a chance to check it out yet make sure you head on over to the official site – there are some pretty neat features.