Bootstrap/site/docs/4.1/getting-started/best-practices.md

---
layout: docs
title: Best practices
description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap.
group: getting-started
---

We've designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves.

{% capture callout %}
**Heads up!** This copy is a work in progress.
{% endcapture %}
{% include callout.html content=callout type="info" %}

### General outline

- Working with CSS
- Working with Sass files
- Building new CSS components
- Working with flexbox
- Ask in [Slack](https://bootstrap-slack.herokuapp.com/)
stub out a best practices page 2015-08-10 20:18:06 +02:00			`---`
Massive cleanup - Simpler main nav on all pages - Back to purple masthead on homepage instead of dark graphite - Active link styles on the main nav - Cleaned up sidebar nav - New docs layout name - Homepage copy edits - Updated bright purple docs color 2015-08-15 07:45:55 +02:00			`layout: docs`
stub out a best practices page 2015-08-10 20:18:06 +02:00			`title: Best practices`
v4: Social meta tags (#20825) * descriptions for getting started pages * descriptions for layout * add content page descriptions * more descriptions, updates to some existing ones * correct site url * add social stuff to config for twitter cards * add twitter meta tags; use large image for homepage and regular card for all others * add the assets * more site config * more social shiz to partial, remove existing meta for the partial, remove page title from homepage for simpler if statements 2016-10-03 03:19:47 +02:00			`description: Learn about some of the best practices we've gathered from years of working on and using Bootstrap.`
stub out a best practices page 2015-08-10 20:18:06 +02:00			`group: getting-started`
			`---`

			`We've designed and developed Bootstrap to work in a number of environments. Here are some of the best practices we've gathered from years of working on and using it ourselves.`

Use callout without custom Jekyll plugin. 2018-01-15 23:49:36 +01:00			`{% capture callout %}`
stub out a best practices page 2015-08-10 20:18:06 +02:00			`Heads up! This copy is a work in progress.`
Use callout without custom Jekyll plugin. 2018-01-15 23:49:36 +01:00			`{% endcapture %}`
			`{% include callout.html content=callout type="info" %}`
stub out a best practices page 2015-08-10 20:18:06 +02:00
			`### General outline`
Minor Markdown consistency changes. 2017-09-26 13:50:35 +02:00
stub out a best practices page 2015-08-10 20:18:06 +02:00			`- Working with CSS`
			`- Working with Sass files`
missing todo 2015-08-10 20:18:40 +02:00			`- Building new CSS components`
Flexbox all the time (Drop IE9 support and remove $enable-flex option) (#21389) * remove the $enable-flex variable option * remove bootstrap-flex.css dist file and it's grunt task * remove the separate flex css file for docs; it's all the same now * remove flexbox docs (porting some to the main grid docs in next commit) * clean up few grid docs bits to simplify copy, start to mention flexbox * port relevant flexbox-grid.md content to grid.md - clean up mixins - update how it works section - bring over sizing and alignment sections * remove the $enable-flex from the options.md page * update lead paragraph to mention flexbox * update migration to mention loss of ie9 support * remove mention of flexbox dist file * clarify IE support * making a note * remove flexbox variant mentions from component docs - updates docs for media object, navs, list group, and cards to consolidate docs - no more need to callout flexbox variants since it's now the default * remove $enable-flex if/else from sass files * remove flex dist files * update scss lint property order to account for flex properties * linting * change to numberless classes for autosizing, wrap in highlighting div * bump gruntfile and postcss to ie10 * redo intro sections * rearrange * phew, redo hella grid docs - rearrange all the things - consolidate some bits * remove reference to flexbox mode * more border action for demo * Make some changes to the .card's in .card-deck's to ensure footers align to the bottom 2016-12-22 05:26:17 +01:00			`- Working with flexbox`
Linked to slack 2016-11-01 15:37:47 +01:00			`- Ask in [Slack](https://bootstrap-slack.herokuapp.com/)`