Bootstrap 4 (August 2017 BETA) Enhancements & Fixes

Bootstrap 4 (August 2017 BETA) Enhancements & Fixes.md

Some Basic BS4 (beta) Enhancements / Fixes

Quick Overview

This is just my own collection of Bootstrap 4 enhancements. I recommend putting the SCSS snippets into an .scss/.sass file that imports bootstrap.scss at the top, but you're welcome to use them however you'd like.

I also included enhancements_compiled.css gist, which is a compiled version of these enhancements using Bootstrap 4 default sizes & colors, for those who don't re-compile SASS from BS4 source.

Buttons

The buttons.css gist contains the following enhancements :

• cursor:pointer on hover
• cursor:not-allowed on :disabled and .disabled buttons
• an :active class (the default buttons show no change in button state/color when pressed)

Quick Flexbox Column Safari Bug Fix

The BS4 docs reference this Safari bug, so I went ahead and included it in my custom CSS, just in case.

Card Enhancements

Flexbox Card Columns

I love the new BS4 cards. They're great, they're beautiful, they're utilitarian. However! I ran into an issue when building an example layout (to teach myself BS4, having used BS3 for many years), and I made myself a few classes to "fix" it.

Since a card group (and a card deck) just use Flexbox to fill the width of their container, there's no easy way to build something like "I want 3 cards per row for this breakpoint, 2 per row at this breakpoint..." and so on.

Sure, you could wrap the cards in col-* classes, but then you lose the awesome unified footer option, and height-matching.

You could also apply col-* to the card directly, like I do in my example, (<div class="card col-6">) but the cards themselves have a white background, whereas the card's content would be padded by Bootstrap's natural spacing.

Example :

Disgusting, right?

So, what I do is wrap my group of cards in cards-col (which works just like a .row), and remove the background from the .card itself, applying it only to the .card-body. By doing it this way, you can have happy little cards using nicely-spaced columns, or use the .no-gutters class in addition to the .card-cols class and have happy little cards connecting to each other.

With gutters :

Without gutters :

(I applied a .bg-dark class to the footer in the HTML, not the css. Also, you can add border-0 on a card's HTML to kill the border)

Slightly Larger Border Radius

Just a personal preference, I sometimes like a little more "oomph" in my border radiuses, so I made a .card-biground class I can use on a card to double the size of the border-radius.

Custom File Input

As stated in the Bootstrap 4 docs for the Custom Form File Browser :

The file input is the most gnarly of the bunch and require additional JavaScript if you’d like to hook them up with functional Choose file… and selected file name text.

...but, alas, no Javascript is provided. A cursory Googling showed some great options, but many of them were based on BS4 Alpha builds that have since changed. The initial Javascript & CSS came from this post & reply on StackOverflow, which is like 98% of the way there.

Two minor issues :

1. The filename preview always showed "C:\fakepath<filename>" (curious why? here's the answer)
2. The filename preview would wrap to another line, or cutoff in an ugly way that ruined the effect of looking like a native file input control

For the Javascript, I simply strip out those first 12 characters. There might be some browsers that don't show that, but it was first implemented in IE8 so I kinda doubt it. If you wish, you can test the string for the existence of "C:\fakepath" or just "fakepath", but I was being lazy.

For the preview, I increased the padding-right to match the standard Browse button width, forced the text not to wrap, added an overflow:hidden, and used text-overflow: ellipsis to give it that native look & feel.

Before/After Comparison :

buttons_enhanced.scss

.btn {
	cursor: pointer;
  &.disabled,
  &:disabled {
	  cursor: not-allowed;
	}
	&.btn-primary.active,
	&.btn-primary:active,
	&.btn-outline-primary.active,
	&.btn-outline-primary:active {
		background: darken(theme-color("primary"),15%);
	}
	&.btn-secondary.active,
	&.btn-secondary:active,
	&.btn-outline-secondary.active,
	&.btn-outline-secondary:active {
		background: darken(theme-color("secondary"),15%);
	}
	&.btn-success.active,
	&.btn-success:active,
	&.btn-outline-success.active,
	&.btn-outline-success:active {
		background: darken(theme-color("success"),15%);
	}
	&.btn-danger.active,
	&.btn-danger:active,
	&.btn-outline-danger.active,
	&.btn-outline-danger:active {
		background: darken(theme-color("danger"),15%);
	}
	&.btn-warning.active,
	&.btn-warning:active,
	&.btn-outline-warning.active,
	&.btn-outline-warning:active {
		background: darken(theme-color("warning"),15%);
	}
	&.btn-info.active,
	&.btn-info:active,
	&.btn-outline-info.active,
	&.btn-outline-info:active {
		background: darken(theme-color("info"),15%);
	}
	&.btn-light.active,
	&.btn-light:active,
	&.btn-outline-light.active,
	&.btn-outline-light:active {
		background: darken(theme-color("light"),15%);
	}
	&.btn-dark.active,
	&.btn-dark:active,
	&.btn-outline-dark.active,
	&.btn-outline-dark:active {
		background: darken(theme-color("dark"),15%);
	}
}

card_enhancements.scss

/* Extra Card Options */

.card-cols {
	@include make-row();
	.card {
		background: none;
	}
	.card-body {
		background: $white;
	}
}

.card-biground {
	border-radius: calc(.5rem - 1px);
	.card-img-top {
		border-top-left-radius: calc(.5rem - 1px);
		border-top-right-radius: calc(.5rem - 1px);
	}
	.card-footer:last-child {
		border-radius: 0 0 calc(.5rem - 1px) calc(.5rem - 1px);
	}
}

custom_file_input.js

	// for custom-form file inputs
	// mostly ripped from : https://stackoverflow.com/questions/37545206/filename-in-file-browser-bootstrap-4
	$("input[type=file]").change(function () {
	  var fieldVal = $(this).val();
	  if (fieldVal != undefined || fieldVal != "") {
		  // remove the "C:\fakepath\" prefix
		  fieldVal = fieldVal.substring(12);
		  // show it in the file input field
	    $(this).next(".custom-file-control").attr('data-content', fieldVal);
	  }
	});

custom_file_input.scss

/*
	
	For custom-form file inputs (needs accompanying JS)
	source : https://stackoverflow.com/questions/37545206/filename-in-file-browser-bootstrap-4
	
	plus, additional padding and a text-overflow to make things pretty
	
*/

.custom-file-control {
	overflow: hidden;
	padding: .5rem 6rem .5rem 1rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.custom-file-control:after {
	content: attr(data-content) !important;
}

enhancements_compiled.css

.btn {
    cursor: pointer
}

.btn.disabled, .btn:disabled {
    cursor: not-allowed
}

.btn.btn-primary.active, .btn.btn-primary:active, .btn.btn-outline-primary.active,
.btn.btn-outline-primary:active {
    background: #0056b3
}

.btn.btn-secondary.active, .btn.btn-secondary:active, .btn.btn-outline-secondary.active,
.btn.btn-outline-secondary:active {
    background: #121416
}

.btn.btn-success.active, .btn.btn-success:active, .btn.btn-outline-success.active,
.btn.btn-outline-success:active {
    background: #19692c
}

.btn.btn-danger.active, .btn.btn-danger:active, .btn.btn-outline-danger.active,
.btn.btn-outline-danger:active {
    background: #a71d2a
}

.btn.btn-warning.active, .btn.btn-warning:active, .btn.btn-outline-warning.active,
.btn.btn-outline-warning:active {
    background: #ba8b00
}

.btn.btn-info.active, .btn.btn-info:active, .btn.btn-outline-info.active,
.btn.btn-outline-info:active {
    background: #0f6674
}

.btn.btn-light.active, .btn.btn-light:active, .btn.btn-outline-light.active,
.btn.btn-outline-light:active {
    background: #cbd3da
}

.btn.btn-dark.active, .btn.btn-dark:active, .btn.btn-outline-dark.active,
.btn.btn-outline-dark:active {
    background: #121416
}

.col, [class * ="col-"] {
    border: 1px solid transparent
}

.card-cols {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px
}

.card-cols .card {
    background: none
}

.card-cols .card-body {
    background: #fff
}

.card-biground {
    border-radius: calc(.5rem - 1px);
}

.card-biground .card-img-top {
    border-top-left-radius: calc(.5rem - 1px);
    border-top-right-radius: calc(.5rem - 1px);
}

.card-biground .card-footer:last-child {
    border-radius: 0 0 calc(.5rem - 1px);
}

.custom-file-control {
    overflow: hidden;
    padding: .5rem 6rem .5rem 1rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.custom-file-control:after {
    content: attr(data-content) !important
}

example_custom.scss

/*

I make a folder inside the scss folder containing all of Bootstrap 4's .scss files and I call it "custom",
from there I make a few different files, but the starting file is custom.scss (this file).

At the top, I import the BS4 .scss files (so I can use all variables, mixins, utilities)...

*/

// full bootstrap
@import "../bootstrap-reboot";
@import "../bootstrap-grid";
@import "../bootstrap";

/*

Now, everything below is my own customizations, overrides, etc...

*/

body {
 font-family: "Something Else";  
}

flexbox_safari_bug_fix.scss

/* Flexbox Safari Bug, Fixed with transparent border */
	
.col,
[class*="col-"] {
	border: 1px solid transparent;
}

Those cards look Sweet!

since class card and col-sm-6 on the same div. the border of card is shown after padding of class card