Bootstrap - Tutorial Shares

Home » All Website Development Tutorials » Bootstrap

Remove Blue Glow around Bootstrap Form Fields

Dec 1, 2015 by Michael Salafia in Bootstrap

174

Quick and Dirty Override By default, all Bootstrap text input areas, like contact form fields for example, have a blue glow when selected. Here’s a very quick and easy way to disable the blue glow: input, textarea, button {outline: none; … Continued

Change Navbar Collapse Breakpoint in Bootstrap

Apr 21, 2015 by Christine Cardoso in Bootstrap

528

@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

@media (max-width: 992px) {

.navbar-header {

float: none;

}

.navbar-left,.navbar-right {

float: none !important;

}

.navbar-toggle {

display: block;

}

.navbar-collapse {

border-top: 1px solid transparent;

box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);

}

.navbar-fixed-top {

top: 0;

border-width: 0 0 1px;

}

.navbar-collapse.collapse {

display: none!important;

}

.navbar-nav {

float: none!important;

margin-top: 7.5px;

}

.navbar-nav>li {

float: none;

}

.navbar-nav>li>a {

padding-top: 10px;

padding-bottom: 10px;

}

.collapse.in{

display:block !important;

}

Vertically Center Bootstrap Modals to Fit in Browser Window

Oct 23, 2014 by Christine Cardoso in Bootstrap

1069

Vertically center bootstrap modals without setting a height. Modal max-height will not exceed the window height with scrollable .modal-body and adapts on resize. You will need these JS and CSS snippets:

function adjustModalMaxHeightAndPosition(){
  $('.modal').each(function(){
    if($(this).hasClass('in') === false){
      $(this).show();
    }
    var contentHeight = $(window).height() - 60;
    var headerHeight = $(this).find('.modal-header').outerHeight() || 2;
    var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

    $(this).find('.modal-dialog').addClass('modal-dialog-center').css({
      
      'margin-top': function () {
        var mH = $(this).outerHeight(); 
        var wH = $(window).height();
        return (mH &lt; wH ) ? -( mH * 0.6): -( wH * 0.5) + 12;
      },
      'margin-left': function () {
        return -($(this).outerWidth() / 2);
      }
    });
    if($(this).hasClass('in') === false){
      $(this).hide();
    }
  });
}
if ($(window).height() &gt;= 320){
  $(window).resize(adjustModalMaxHeightAndPosition).trigger("resize");
}

function adjustModalMaxHeightAndPosition(){

$('.modal').each(function(){

if($(this).hasClass('in') === false){

$(this).show();

}

var contentHeight = $(window).height() - 60;

var headerHeight = $(this).find('.modal-header').outerHeight() || 2;

var footerHeight = $(this).find('.modal-footer').outerHeight() || 2;

$(this).find('.modal-dialog').addClass('modal-dialog-center').css({

'margin-top': function () {

var mH = $(this).outerHeight();

var wH = $(window).height();

return (mH < wH ) ? -( mH * 0.6): -( wH * 0.5) + 12;

'margin-left': function () {

return -($(this).outerWidth() / 2);

}

});

if($(this).hasClass('in') === false){

$(this).hide();

}

});

}

if ($(window).height() >= 320){

$(window).resize(adjustModalMaxHeightAndPosition).trigger("resize");

}

.modal-dialog-center {
    margin: 0;
    margin-bottom: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
}

.modal-footer {
    margin-top: 0;
}

@media (max-width: 767px) {
  .modal-dialog-center {
    width: 100%;
  }
}

.modal-dialog-center {

margin: 0;

margin-bottom: 12px;

position: absolute;

top: 50%;

left: 50%;

}

.modal-footer {

margin-top: 0;

}

@media (max-width: 767px) {

.modal-dialog-center {

width: 100%;

}

View this on Codepen