| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Brand guidelines | |
| 4 | description: Documentation and examples for Bootstrap's logo and brand usage guidelines. | |
| 5 | group: about | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | Have a need for Bootstrap's brand resources? Great! We have only a few guidelines we follow, and in turn ask you to follow as well. These guidelines were inspired by MailChimp's [Brand Assets](https://mailchimp.com/about/brand-assets/). | |
| 10 | ||
| 11 | ## Mark and logo | |
| 12 | ||
| 13 | Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Bootstrap**). It should always appear in San Francisco Display Semibold. **Do not use the Twitter bird** in association with Bootstrap. | |
| 14 | ||
| 15 | <div class="bd-brand-logos"> | |
| 16 | <div class="bd-brand-item"> | |
| 17 | <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144"> | |
| 18 | </div> | |
| 19 | <div class="bd-brand-item inverse"> | |
| 20 | <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144"> | |
| 21 | </div> | |
| 22 | </div> | |
| 23 | <div class="bd-brand-logos"> | |
| 24 | <div class="bd-brand-item"> | |
| 25 | <span class="h1">Bootstrap</span> | |
| 26 | </div> | |
| 27 | <div class="bd-brand-item inverse"> | |
| 28 | <span class="h1">Bootstrap</span> | |
| 29 | </div> | |
| 30 | </div> | |
| 31 | ||
| 32 | ## Download mark | |
| 33 | ||
| 34 | Download the Bootstrap mark in one of three styles, each available as an SVG file. Right click, Save as. | |
| 35 | ||
| 36 | <div class="bd-brand-logos"> | |
| 37 | <div class="bd-brand-item"> | |
| 38 | <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144"> | |
| 39 | </div> | |
| 40 | <div class="bd-brand-item inverse"> | |
| 41 | <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144"> | |
| 42 | </div> | |
| 43 | <div class="bd-brand-item inverse"> | |
| 44 | <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144"> | |
| 45 | </div> | |
| 46 | </div> | |
| 47 | ||
| 48 | ## Name | |
| 49 | ||
| 50 | The project and framework should always be referred to as **Bootstrap**. No Twitter before it, no capital _s_, and no abbreviations except for one, a capital **B**. | |
| 51 | ||
| 52 | <div class="bd-brand-logos"> | |
| 53 | <div class="bd-brand-item"> | |
| 54 | <span class="h3">Bootstrap</span> | |
| 55 | <strong class="text-success">Right</strong> | |
| 56 | </div> | |
| 57 | <div class="bd-brand-item"> | |
| 58 | <span class="h3 text-muted">BootStrap</span> | |
| 59 | <strong class="text-warning">Wrong</strong> | |
| 60 | </div> | |
| 61 | <div class="bd-brand-item"> | |
| 62 | <span class="h3 text-muted">Twitter Bootstrap</span> | |
| 63 | <strong class="text-warning">Wrong</strong> | |
| 64 | </div> | |
| 65 | </div> | |
| 66 | ||
| 67 | ## Colors | |
| 68 | ||
| 69 | Our docs and branding use a handful of primary colors to differentiate what *is* Bootstrap from what *is in* Bootstrap. In other words, if it's purple, it's representative of Bootstrap. | |
| 70 | ||
| 71 | <div class="bd-brand"> | |
| 72 | <div class="color-swatches"> | |
| 73 | <div class="color-swatch bd-purple"></div> | |
| 74 | <div class="color-swatch bd-purple-light"></div> | |
| 75 | <div class="color-swatch bd-purple-lighter"></div> | |
| 76 | <div class="color-swatch bd-gray"></div> | |
| 77 | </div> | |
| 78 | </div> | |
