Bootstrap/site/content/docs/4.5/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.

{{< callout info >}}
**Heads up!** This copy is a work in progress.
{{< /callout >}}

### 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 11:18:06 -07: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-14 22:45:55 -07:00			`layout: docs`
stub out a best practices page 2015-08-10 11:18:06 -07: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-02 18:19:47 -07: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 11:18:06 -07: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.`

Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing. 2020-11-04 16:39:29 +02:00			`{{< callout info >}}`
stub out a best practices page 2015-08-10 11:18:06 -07:00			`Heads up! This copy is a work in progress.`
Switch to Hugo This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing. 2020-11-04 16:39:29 +02:00			`{{< /callout >}}`
stub out a best practices page 2015-08-10 11:18:06 -07:00
			`### General outline`
Minor Markdown consistency changes. 2017-09-26 14:50:35 +03:00
stub out a best practices page 2015-08-10 11:18:06 -07:00			`- Working with CSS`
			`- Working with Sass files`
missing todo 2015-08-10 11:18:40 -07: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-21 20:26:17 -08:00			`- Working with flexbox`
Linked to slack 2016-11-01 15:37:47 +01:00			`- Ask in [Slack](https://bootstrap-slack.herokuapp.com/)`