How to enable bootstrap 4 flex?


Tags: html,css,twitter-bootstrap,flexbox

Problem :

So I'm on this page:

http://v4-alpha.getbootstrap.com/getting-started/flexbox/

I am trying to enable bootstrap flex so I can use it in my application. Down at the bottom it tells you to head to a download page and installed the compiled CSS version with flex box enabled. So I uninstalled bootstrap from my application and ran this line in the package manager console:

PM> Install-Package bootstrap -Pre

This installed the _variables.scss file with enableFlex set as true.

It also downloaded bootstraps.css/min files and also the appropriate bootstrap JS files. I also installed tether via NuGet because bootstrap required this.

I copied this code from the bootstrap website:

<div class="container">
  <div class="row">
    <div class="col-xs">
      1 of 2
    </div>
    <div class="col-xs">
      1 of 2
    </div>
  </div>
  <div class="row">
    <div class="col-xs">
      1 of 3
    </div>
    <div class="col-xs">
      1 of 3
    </div>
    <div class="col-xs">
      1 of 3
    </div>
  </div>
</div>

Which is meant to use flex box to display some divs. However, when running the application they do not show how their supposed to show. Follow this link and scroll down to see what it's supposed to look like:

http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#auto-layout-columns

I have no console errors, I can't see what I'm doing wrong. I believe it may be an issue with the bootstrap download as the css file downloaded does not have the .col-xs class. Only the col-xs-1 and up classes.

Does anyone know how to enable the flex features in bootstrap 4?



Solution :

Right well I managed to get the thing working. I do believe that there is an issue with the bootstrap download or at the very least the wording on the website.

The way I managed to get it to work was like so:

  1. Run this in the NuGet Package Manager Console

    Install-Package bootstrap.sass -Pre

  2. Install Ruby

  3. Install sass via Ruby CMD

  4. I put a watch on the whole folder of the bootstrap scss files

This then generated me all the css files I needed. I then used the bootstrap-flex.css file on my view and it worked.

Why it says to download the compiled flex css on the page I don't know.


    CSS Howto..

    Javascript how to use external Css sheet

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How to programmatically ungroup CSS selectors?

    I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?

    How to draw a shape using a piece of image in php

    How to make device width-height based html & css via PhoneGap

    How to center a banner and keep margin?

    How to set a minimum content size of a webpage in html, css? [closed]

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    How to reduce shiny interactive rmarkdown margins?

    bootstrap modal disappear immediately after showing

    How to justify short text inside fill fixed width parent with CSS?

    How to remove dropdown active color in bootstrap 3.0?

    How to hide a