# How the Heck? The Bootstrap 4 Beta thread **URL:** https://discourse.roots.io/t/how-the-heck-the-bootstrap-4-beta-thread/10198 **Category:** sage **Tags:** bootstrap4, sass, sage9 **Created:** 2017-08-11T18:33:27Z **Posts:** 30 ## Post 1 by @MWDelaney — 2017-08-11T18:33:27Z So Bootstrap 4 Beta was released today, and it includes some significant changes from Alpha 6, including how colors are referenced. Rather than ``` $brand-primary: blue; ``` We now have ``` $theme-colors: ( primary: $blue, secondary: $gray-600, success: $green, info: $cyan, warning: $yellow, danger: $red, light: $gray-100, dark: $gray-800 ) !default; ``` I’ve worked with Sass maps before, but only to automate mixins and such. What’s our best way to override one or two of these values? Or will we be copying the whole map into our `_variables.scss` file and editing it there? This is compounded by the fact that the above references the `$gray-` colors, which Sage’s `_variables.scss` doesn’t have access to since it’s called first in `main.scss` and those values don’t exist yet. So this is an interesting problem. I’d love to start updating some of my in-progress projects for Bootstrap Beta, but I’m not sure how best to tackle these basic issues. Anyone with more Sass experience have thoughts? Thanks! --- ## Post 2 by @kalenjohnson — 2017-08-11T21:01:10Z [![](https://media.giphy.com/media/1zTCTF9o9ffgc/giphy.gif "People Hd GIF - Find & Share on GIPHY") ](https://media.giphy.com/media/1zTCTF9o9ffgc/giphy.gif) --- ## Post 3 by @MWDelaney — 2017-08-11T23:35:07Z I didn’t mean to offend. This thread can be unlisted if it’s inappropriate or purile. --- ## Post 4 by @kalenjohnson — 2017-08-11T23:49:20Z I was referring to the Bootstrap people :wink: --- ## Post 5 by @MWDelaney — 2017-08-11T23:51:33Z Oh! Yeah! The jerks. --- ## Post 6 by @MWDelaney — 2017-08-12T00:43:25Z This might be useful? > **[Map-Set vs. Map-Merge](http://oddbird.net/2013/10/19/map-merge/)** > > The difference between map-set and map-merge? Almost nothing. I haven’t tried it yet, but `map-merge` might let us update the map one item at a time? --- ## Post 7 by @MWDelaney — 2017-08-12T02:01:07Z Ugh. This is the solution: > But it didn’t make it into Beta 1. It seems to me that without this fix the entire Bootstrap color system must be imported into Sage’s `_variables.scss` in order to override a single color, like the primary color. See extended conversation here: > This is profoundly annoying, but with @ben’s ‘OK’ I can make a PR with the color system copied to `_variables.scss` and the primary overridden to Sage’s traditional green. --- ## Post 8 by @Simeon — 2017-08-12T02:36:38Z So this will break in new Sage 8.5/9 installs but what about existing ones? --- ## Post 9 by @smutek — 2017-08-12T02:44:58Z I don’t care for it. Last time I tried Bootstrap 4 was around May and I ended up rolling the project back to Bootstrap 3 because of this type of stuff. At the time the colors weren’t in maps, but it seemed like everything else was - spacers, break points, columns, container widths. I know it’s probably an “old man yells at cloud” scenario on my part, but I don’t see the benefit here. It seems like being clever just for the sake of being clever. --- ## Post 10 by @MWDelaney — 2017-08-12T03:22:23Z With the way existing Sage dependencies are written, if you run yarn, it’ll break. Update `package.json` to read… ``` "bootstrap": "4.0.0-alpha6", ``` (remove the “^”) And you’ll be fine. --- ## Post 11 by @Simeon — 2017-08-12T03:24:58Z Neat. Is there any reason then to upgrade if you find Bootstrap alpha v6 fine? --- ## Post 12 by @MWDelaney — 2017-08-12T03:54:39Z Other than an intense desire to learn the latest thing and be on top of it, no? But Beta and release are going to be more stable. And that stability means we have to learn new things :slight_smile: --- ## Post 13 by @KimH — 2017-08-15T11:45:59Z Having the colors in a theme-colors map seemed a bit strange at once, but one benefit seems to be that components are only generated in the color variants that you define in this map, and it is easier to add new colors if needed. Also really like the new grid column ordering system. --- ## Post 14 by @MWDelaney — 2017-08-16T13:54:30Z This is really helping me out. I don’t have to remember to do a background variant, button variant, alert variant, text variant, etc. I just add a color to `$theme-colors` and recompile. Very nice. --- ## Post 15 by @ben — 2017-08-16T17:33:37Z Yesterday I noticed that with the beta the old `hidden-XX-xxxx` classes from the alphas are gone and have been replaced with display helper classes: `hidden-md-up` → `d-md-none` via [Migrating to v4 · Bootstrap](https://getbootstrap.com/docs/4.0/migration/#responsive-utilities) > Rather than using explicit `.visible-*` classes, you make an element visible by simply not hiding it at that screen size. You can combine one `.d-*-none` class with one `.d-*-block` class to show an element only on a given interval of screen sizes (e.g. `.d-none.d-md-block.d-xl-none` shows the element only on medium and large devices). --- ## Post 16 by @ben — 2017-08-16T20:40:14Z Column offsets are now different > --- ## Post 17 by @MWDelaney — 2017-08-17T17:17:00Z So [Card Decks](https://getbootstrap.com/docs/4.0/components/card/#card-decks) are great, but they’re not responsive. If you have 4 cards in a row, it’s gonna stay 4 cards in a row until you get down to `xs` size. A decent work-around if you just need your cards to match height is to use flexbox helpers and the standard grid: ```

This is a card

And here's some card text

Another card!

And here's some more card text!

``` --- ## Post 18 by @ben — 2017-08-17T17:26:54Z This has been my solution to making card decks work better responsively: ``` @include media-breakpoint-only(sm) { .card-deck .card { margin-left: 0; margin-right: 0; &:not(:first-child), &:not(:last-child) { margin-left: 0; margin-right: 0; } } } ``` Have also used `@include media-breakpoint-down(md)` instead of `@include media-breakpoint-only(sm)` --- ## Post 19 by @Simeon — 2017-08-17T23:33:21Z Aren’t the guidelines to making them responsive at the bottom of that page? --- ## Post 20 by @ben — 2017-08-17T23:44:55Z Card columns, yes — card decks, no --- ## Post 21 by @Abdallah_Flefel — 2017-08-24T13:43:24Z hi, what about RTL support in beta ? --- ## Post 22 by @asuh — 2017-09-28T18:14:51Z For anyone coming here to find out _how_ to include the Sass map colors in your styles.css, I haven’t seen this reproduced anywhere else. After you install Sage 9, Bootstrap 4 Beta 1 is a Node Module and the styles are imported into the compiled CSS file. So now I want to use the default theme color, which is currently `$blue` as seen in the original post above. However, maybe I want to change this to another color to match the site’s branding. So, as indicated elsewhere, as of Beta 1, you have to copy the the complete `$theme-colors` Sass map and override the colors in your local variables file (Beta 2 changes this with the addition of map-merge into the Sass map). Once you’ve done that, you can then reference this new color scheme to override the default Bootstrap variables. In the Bootstrap’s `scss/_functions.scss` file, there’s a function called `theme-color` that allows you to pull in the sass map colors fairly easily. So in Sage’s `sage/resources/assets/styles/common/_variables.scss`, you can override styles using the following: ``` $link-color: theme-color("primary"); ``` When I first did this, I compiled the CSS and found that nothing happened! `theme-color(“primary”) was still showing up. Something was weird. Turns out, we have to link to or duplicate `_functions.scss` into the local files. Or at the very least, make a new file called `sage/resources/assets/styles/common/_functions.scss` and include the theme colors function, which is: ``` @function theme-color($key: "primary") { @return map-get($theme-colors, $key); } ``` Once this file exists, place it above the variables file in `sage/resources/assets/styles/main.scss`. So, that file will start like this: ``` @import "~bootstrap/scss/functions"; /* or @import "common/functions"; */ @import "common/variables"; /** Import everything from autoload */ @import "./autoload/**/*"; [...] ``` This will enable the theme colors to be mapped into your stylesheet and overrride the default colors. Once Beta 2 lands, the above will slightly change. You can see the PR they’ve added in the link in [this post above](https://discourse.roots.io/t/how-the-heck-the-bootstrap-4-beta-thread/10198/7?u=asuh). --- ## Post 23 by @Andy — 2017-10-26T08:03:25Z @asuh When you mention in this bit… > [@asuh](#): > > you have to copy the the complete $theme-colors Sass map and override the colors in your local variables file …isn’t there then an issue that the BS variables haven’t been defined yet, so you’ll get an error, e.g. $gray-600 hasn’t been definded yet: ``` > $theme-colors: ( > primary: $blue, > secondary: $gray-600, ``` …so you either have to define all the variables up front or set fixed values? Presumably better in Beta 2 (as you mentioned) as only need to set the colors that you actually want to change. --- ## Post 24 by @asuh — 2017-10-26T16:58:00Z With Beta 2, the process I described above changed so I will eventually update my post above to reflect this. That makes your question not a problem anymore :slight_smile: > isn’t there then an issue that the BS variables haven’t been defined yet, so you’ll get an error, e.g. $gray-600 hasn’t been definded yet Local variables you set are all loaded as overrides for existing variables so what you’re describing won’t be a problem. In order for the variables to override Bootstrap’s default color variables, it must first reference Bootstrap’s variables in order to allow the override. So I don’t believe you’ll see the issue you’re asking about. --- ## Post 25 by @Andy — 2017-10-27T07:51:13Z Yes, as you say, should be a lot more straightforward with beta 2 and beyond. My only problem at the moment is that BS has (apparently) dropped support for Bower, so I can’t include beta.2 as a dependency unless I convert to NPM. --- ## Post 26 by @dpc — 2017-12-01T14:25:01Z i can’t seem to get the ‘.d-none’ classes working in sage 8.5.3. `Preformatted text`messageOriginal: Invalid CSS after “…de text-hide();”: expected “}”, was “ **.d-none;** ” ``` .featured-image-caption { // display: none; // @include text-hide(); .d-none; // // .hidden-xs-up; // @include hidden-xl-down(); // .d-none; // // .hide; } ``` Am i missing something obvious? --- ## Post 27 by @Andy — 2017-12-02T11:58:13Z This isn’t really relevant to this thread. However, you use the ‘.d-none’ class within you html, e.g. `
` …not within your scss. If you do want to use within your scss then you can do `@extend .d-none;` (see [http://sass-lang.com/guide#topic-7](http://sass-lang.com/guide#topic-7)) --- ## Post 28 by @dpc — 2017-12-02T14:48:54Z Thanks Andy. I thought it may get be related to the beta release and a new method for use in scss. Turns out I just needed the extend. D. --- ## Post 29 by @ahmad — 2018-07-23T22:26:14Z I am getting this error [http://prntscr.com/ka39u1](http://prntscr.com/ka39u1) on my macos migh sierra. I am trying this command “`sass main.scss main.css`” from the folder path “/wp-content/themes/sage/resources/assets/styles/” I dont see any solutions to this problem anywhere. Any help is highly appreciated. Thanks! --- ## Post 30 by @ben — 2018-07-23T22:44:12Z You’ll need to use the build process included with Sage to compile assets --- ## Post 31 by @ben — 2018-07-23T22:44:15Z