twitter-bootstrap - w3toppers.com

Bootstrap 5 – Custom theme-colors not updating classes

Bootstrap 5.1.0 A recent change to the way the text- and bg- classes are created requires additional SASS map merges in 5.1.0 @import “functions”; @import “variables”; @import “mixins”; $tertiary: #3fb247; $custom-theme-colors:map-merge($theme-colors, ( “tertiary”: $tertiary )); $theme-colors: map-merge($theme-colors, $custom-theme-colors); $theme-colors-rgb: map-loop($theme-colors, to-rgb, “$value”); $utilities-colors: map-merge($utilities-colors, $theme-colors-rgb); $utilities-text-colors: map-loop($utilities-colors, rgba-css-var, “$key”, “text”); $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, “$key”, “bg”); … Read more

Reduce the gutter (default 30px) on smaller devices in Bootstrap3?

The gutter is construct by a left and right padding, you could use media queries to change this depending on your screen size: /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { div[class^=”col”]{padding-left:5px; padding-right:5px;} } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { div[class^=”col”]{padding-left:10px; padding-right:10px;} } /* Large … Read more

Using media breakpoints in Bootstrap 4-alpha

Update: Bootstrap 5. v5 breakpoints reference Original answer – Bootstrap v4: Use breakpoint mixins like this: .something { padding: 5px; @include media-breakpoint-up(sm) { padding: 20px; } @include media-breakpoint-up(md) { padding: 40px; } } v4 breakpoints reference v4 alpha6 breakpoints reference Below full options and values. Breakpoint & up (toggle on value and above): @include media-breakpoint-up(xs) … Read more

Vertical alignment of text and icon in button

There is one rule that is set by font-awesome.css, which you need to override. You should set overrides in your CSS files rather than inline, but essentially, the icon-ok class is being set to vertical-align: baseline; by default and which I’ve corrected here: <button id=”whatever” class=”btn btn-large btn-primary” name=”Continue” type=”submit”> <span>Continue</span> <i class=”icon-ok” style=”font-size:30px; vertical-align: … Read more

Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding

You should also add a “row” to each container which will “fix” this issue! <div class=”container-fluid”> <div class=”row”> Some text </div> </div> See http://jsfiddle.net/3px20h6t/

Twitter Bootstrap Navbar with AngularJS – Collapse Not Functioning

For those interested – Here is another way of implementing this without Bootstrap’s javascript. Import Angular’s UI-Bootstrap. HTML: <div class=”navbar navbar-inverse” ng-controller=”NavBarCtrl”> <div class=”navbar-inner”> <div class=”container”> <button class=”btn btn-navbar” ng-click=”isCollapsed = !isCollapsed”> <span class=”icon-bar”></span> <span class=”icon-bar”></span> <span class=”icon-bar”></span> </button> <a class=”brand” href=”#”>Short Course</a> <div class=”nav-collapse” uib-collapse=”isCollapsed”> <ul class=”nav”> <li><a href=”#”><i class=”icon-home icon-white”></i> Home</a> </li> <li><a … Read more

Change the background color in a twitter bootstrap modal?

To change the color via: CSS Put these styles in your stylesheet after the bootstrap styles: .modal-backdrop { background-color: red; } Less Changes the bootstrap-variables to: @modal-backdrop-bg: red; Source Sass Changes the bootstrap-variables to: $modal-backdrop-bg: red; Source Bootstrap-Customizer Change @modal-backdrop-bg to your desired color: getbootstrap.com/customize/ You can also remove the backdrop via Javascript or by … Read more