twitter-bootstrap

How to dismiss a Twitter Bootstrap popover by clicking outside?

Update: A slightly more robust solution: http://jsfiddle.net/mattdlockyer/C5GBU/72/ For buttons containing text only: $(‘body’).on(‘click’, function (e) { //did not click a popover toggle or popover if ($(e.target).data(‘toggle’) !== ‘popover’ && $(e.target).parents(‘.popover.in’).length === 0) { $(‘[data-toggle=”popover”]’).popover(‘hide’); } }); For buttons containing icons use (this code has a bug in Bootstrap 3.3.6, see the fix below in this … Read more

Bootstrap with jQuery Validation Plugin

for total compatibility with twitter bootstrap 3, I need to override some plugins methods: // override jquery validate plugin defaults $.validator.setDefaults({ highlight: function(element) { $(element).closest(‘.form-group’).addClass(‘has-error’); }, unhighlight: function(element) { $(element).closest(‘.form-group’).removeClass(‘has-error’); }, errorElement: ‘span’, errorClass: ‘help-block’, errorPlacement: function(error, element) { if(element.parent(‘.input-group’).length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); See Example: http://jsfiddle.net/mapb_1990/hTPY7/7/

Responsive website zoomed out to full width on mobile

Add this to your HTML head.. <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″> This tells smaller device browsers how to scale the page. You can read more about this here: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

What is the difference between Bootstrap .container and .container-fluid classes?

Quick version: .container has one fixed width for each screen size in bootstrap (xs,sm,md,lg); .container-fluid expands to fill the available width. The difference between container and container-fluid comes from these lines of CSS: @media (min-width: 568px) { .container { width: 550px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: … Read more

Center the content inside a column in Bootstrap

Bootstrap 5 (update 2021) Since flexbox is still used the centering methods in Bootstrap 5 work the same way. Columns can be centered using offset, auto-margins or justify-content-center (flexbox). Demo of the Bootstrap 5 Centering Methods Bootstrap 4 (original answer) There are multiple horizontal centering methods in Bootstrap 4… text-center for center display:inline elements offset-* … Read more