CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-4bootstrap-4
Mani Shooshtari
Mani Shooshtari

Reputation: 780

Bootstrap 4 flex grid system only

So in bootstrap3 we had the 'Customize and download' option, which we could download only whatever we needed. Now that bootstrap 4 supports flexbox, I only wanna download the flex grid system of bootstrap 4 and I cant see that option anymore. is there any way to do this ?

Upvotes: 24

Views: 31463

Answers (5)

Kurtis Jungersen
Kurtis Jungersen

Reputation: 2564

For Bootstrap 5+

After installing to node_modules using your package manager (e.g. yarn add bootstrap@5):

SASS Compilation

This is preferred typically, as you can adjust variable values in compilation (see their docs for more details)

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import '../node_modules/bootstrap/scss/functions';

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import '../node_modules/bootstrap/scss/variables';
@import '../node_modules/bootstrap/scss/mixins';

// 4. Include any optional Bootstrap components as you like
@import '../node_modules/bootstrap/scss/bootstrap-grid.scss';

CSS Only

@import '../node_modules/bootstrap/dist/css/bootstrap-grid.css';

// or for a minified version 

@import '../node_modules/bootstrap/dist/css/bootstrap-grid.min.css';

Upvotes: 4

dippas
dippas

Reputation: 60573

UPDATE (JULY 2019)

With the release of v4 you can simply use either bootstrap-grid.css or bootstrap-grid.min.css , it only includes grid system and flex utilities

SS

Old Answer:

At this Alpha stage, you can toggle between true/false for using flexbox (if using a CSS preprocessor) as per bootstrap V4 Alpha docs

Flexbox support has finally come to Bootstrap. Opt-in to the new CSS layout styles with the flick of a variable or the swap of a stylesheet.

How it works:

If you’re familiar with modifying variables in Sass—or any other CSS preprocessor—you’ll be right at home to move into flexbox mode.

  1. Open the _variables.scss file and find the $enable-flex variable.
  2. Change it from false to true.
  3. Recompile, and done!

Alternatively, if you don’t need the source Sass files, you may swap the default Bootstrap compiled CSS with the compiled flexbox variation. Head to the download page for more information.

Upvotes: 26

Carol Skelly
Carol Skelly

Reputation: 362670

Update 2019, Bootstrap 4.3+

You can get the grid only using bootstrap-grid.css included in the Bootstrap 4 download. http://getbootstrap.com/docs/4.1/getting-started/contents/#css-files

This includes the grid, flexbox and display utilities, but not all the utilities like the borders, spacing, etc.. If you want a further 'Customize and download' option you must rebuild Bootstrap using SASS, or use a 3rd party tool like themestr.app

Original Answer, Bootstrap 4 alpha (flexbox optional)

There may be customizable downloads in the future, but the only way currently is to enable the $enable-flex variable. Here's an example using SASS.

$enable-flex:true;

http://codeply.com/go/JbGGN4Ok3A

As of Bootstrap 4 alpha 6, flexbox is now the default: http://www.codeply.com/go/p/bootstrap_4.0.alpha.6

Upvotes: 4

kenan gündoğan
kenan gündoğan

Reputation: 11

if you just want to use flex-grid. I recommend

https://www.flexible-grid.com

https://github.com/kenangundogan/flexible-grid

flexible-grid/
    ├── scss
        ├── flexible-grid.scss
        ├── _variables.scss
        ├── _definitions.scss
        ├── _wrapper.scss
        ├── _array-list.scss
        ├── _attribute.scss
        ├── _grid.scss
        └── _normalize.scss

Upvotes: 1

Jacob Raccuia
Jacob Raccuia

Reputation: 1686

At the time of answering this question, if you download the compiled .zip found here, it comes with a css folder that has three stylesheets,

  • bootstrap-grid.css
  • bootstrap-normalize.css
  • bootstrap.css

The bootstrap-grid file has only the grid CSS and nothing else, which is what you're looking for.

Upvotes: 9

Related Questions