New in v5.3Color mode support, expanded color palette, and more!
Boosted
Orange Boosted with Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid
system and components, and bring projects to life with powerful JavaScript plugins.
Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
The official Sass port of Bootstrap was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass contributing guidelines for information on how the Sass port is developed.
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
-
+
@@ -127,1322 +128,1322 @@
Orange Icons
Icons created from the Orange brand.Co
Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.
-
+
glyphicon glyphicon-asterisk
-
+
glyphicon glyphicon-plus
-
+
glyphicon glyphicon-euro
-
+
glyphicon glyphicon-eur
-
+
glyphicon glyphicon-minus
-
+
glyphicon glyphicon-cloud
-
+
glyphicon glyphicon-envelope
-
+
glyphicon glyphicon-pencil
-
+
glyphicon glyphicon-glass
-
+
glyphicon glyphicon-music
-
+
glyphicon glyphicon-search
-
+
glyphicon glyphicon-heart
-
+
glyphicon glyphicon-star
-
+
glyphicon glyphicon-star-empty
-
+
glyphicon glyphicon-user
-
+
glyphicon glyphicon-film
-
+
glyphicon glyphicon-th-large
-
+
glyphicon glyphicon-th
-
+
glyphicon glyphicon-th-list
-
+
glyphicon glyphicon-ok
-
+
glyphicon glyphicon-remove
-
+
glyphicon glyphicon-zoom-in
-
+
glyphicon glyphicon-zoom-out
-
+
glyphicon glyphicon-off
-
+
glyphicon glyphicon-signal
-
+
glyphicon glyphicon-cog
-
+
glyphicon glyphicon-trash
-
+
glyphicon glyphicon-home
-
+
glyphicon glyphicon-file
-
+
glyphicon glyphicon-time
-
+
glyphicon glyphicon-road
-
+
glyphicon glyphicon-download-alt
-
+
glyphicon glyphicon-download
-
+
glyphicon glyphicon-upload
-
+
glyphicon glyphicon-inbox
-
+
glyphicon glyphicon-play-circle
-
+
glyphicon glyphicon-repeat
-
+
glyphicon glyphicon-refresh
-
+
glyphicon glyphicon-list-alt
-
+
glyphicon glyphicon-lock
-
+
glyphicon glyphicon-flag
-
+
glyphicon glyphicon-headphones
-
+
glyphicon glyphicon-volume-off
-
+
glyphicon glyphicon-volume-down
-
+
glyphicon glyphicon-volume-up
-
+
glyphicon glyphicon-qrcode
-
+
glyphicon glyphicon-barcode
-
+
glyphicon glyphicon-tag
-
+
glyphicon glyphicon-tags
-
+
glyphicon glyphicon-book
-
+
glyphicon glyphicon-bookmark
-
+
glyphicon glyphicon-print
-
+
glyphicon glyphicon-camera
-
+
glyphicon glyphicon-font
-
+
glyphicon glyphicon-bold
-
+
glyphicon glyphicon-italic
-
+
glyphicon glyphicon-text-height
-
+
glyphicon glyphicon-text-width
-
+
glyphicon glyphicon-align-left
-
+
glyphicon glyphicon-align-center
-
+
glyphicon glyphicon-align-right
-
+
glyphicon glyphicon-align-justify
-
+
glyphicon glyphicon-list
-
+
glyphicon glyphicon-indent-left
-
+
glyphicon glyphicon-indent-right
-
+
glyphicon glyphicon-facetime-video
-
+
glyphicon glyphicon-picture
-
+
glyphicon glyphicon-map-marker
-
+
glyphicon glyphicon-adjust
-
+
glyphicon glyphicon-tint
-
+
glyphicon glyphicon-edit
-
+
glyphicon glyphicon-share
-
+
glyphicon glyphicon-check
-
+
glyphicon glyphicon-move
-
+
glyphicon glyphicon-step-backward
-
+
glyphicon glyphicon-fast-backward
-
+
glyphicon glyphicon-backward
-
+
glyphicon glyphicon-play
-
+
glyphicon glyphicon-pause
-
+
glyphicon glyphicon-stop
-
+
glyphicon glyphicon-forward
-
+
glyphicon glyphicon-fast-forward
-
+
glyphicon glyphicon-step-forward
-
+
glyphicon glyphicon-eject
-
+
glyphicon glyphicon-chevron-left
-
+
glyphicon glyphicon-chevron-right
-
+
glyphicon glyphicon-plus-sign
-
+
glyphicon glyphicon-minus-sign
-
+
glyphicon glyphicon-remove-sign
-
+
glyphicon glyphicon-ok-sign
-
+
glyphicon glyphicon-question-sign
-
+
glyphicon glyphicon-info-sign
-
+
glyphicon glyphicon-screenshot
-
+
glyphicon glyphicon-remove-circle
-
+
glyphicon glyphicon-ok-circle
-
+
glyphicon glyphicon-ban-circle
-
+
glyphicon glyphicon-arrow-left
-
+
glyphicon glyphicon-arrow-right
-
+
glyphicon glyphicon-arrow-up
-
+
glyphicon glyphicon-arrow-down
-
+
glyphicon glyphicon-share-alt
-
+
glyphicon glyphicon-resize-full
-
+
glyphicon glyphicon-resize-small
-
+
glyphicon glyphicon-exclamation-sign
-
+
glyphicon glyphicon-gift
-
+
glyphicon glyphicon-leaf
-
+
glyphicon glyphicon-fire
-
+
glyphicon glyphicon-eye-open
-
+
glyphicon glyphicon-eye-close
-
+
glyphicon glyphicon-warning-sign
-
+
glyphicon glyphicon-plane
-
+
glyphicon glyphicon-calendar
-
+
glyphicon glyphicon-random
-
+
glyphicon glyphicon-comment
-
+
glyphicon glyphicon-magnet
-
+
glyphicon glyphicon-chevron-up
-
+
glyphicon glyphicon-chevron-down
-
+
glyphicon glyphicon-retweet
-
+
glyphicon glyphicon-shopping-cart
-
+
glyphicon glyphicon-folder-close
-
+
glyphicon glyphicon-folder-open
-
+
glyphicon glyphicon-resize-vertical
-
+
glyphicon glyphicon-resize-horizontal
-
+
glyphicon glyphicon-hdd
-
+
glyphicon glyphicon-bullhorn
-
+
glyphicon glyphicon-bell
-
+
glyphicon glyphicon-certificate
-
+
glyphicon glyphicon-thumbs-up
-
+
glyphicon glyphicon-thumbs-down
-
+
glyphicon glyphicon-hand-right
-
+
glyphicon glyphicon-hand-left
-
+
glyphicon glyphicon-hand-up
-
+
glyphicon glyphicon-hand-down
-
+
glyphicon glyphicon-circle-arrow-right
-
+
glyphicon glyphicon-circle-arrow-left
-
+
glyphicon glyphicon-circle-arrow-up
-
+
glyphicon glyphicon-circle-arrow-down
-
+
glyphicon glyphicon-globe
-
+
glyphicon glyphicon-wrench
-
+
glyphicon glyphicon-tasks
-
+
glyphicon glyphicon-filter
-
+
glyphicon glyphicon-briefcase
-
+
glyphicon glyphicon-fullscreen
-
+
glyphicon glyphicon-dashboard
-
+
glyphicon glyphicon-paperclip
-
+
glyphicon glyphicon-heart-empty
-
+
glyphicon glyphicon-link
-
+
glyphicon glyphicon-phone
-
+
glyphicon glyphicon-pushpin
-
+
glyphicon glyphicon-usd
-
+
glyphicon glyphicon-gbp
-
+
glyphicon glyphicon-sort
-
+
glyphicon glyphicon-sort-by-alphabet
-
+
glyphicon glyphicon-sort-by-alphabet-alt
-
+
glyphicon glyphicon-sort-by-order
-
+
glyphicon glyphicon-sort-by-order-alt
-
+
glyphicon glyphicon-sort-by-attributes
-
+
glyphicon glyphicon-sort-by-attributes-alt
-
+
glyphicon glyphicon-unchecked
-
+
glyphicon glyphicon-expand
-
+
glyphicon glyphicon-collapse-down
-
+
glyphicon glyphicon-collapse-up
-
+
glyphicon glyphicon-log-in
-
+
glyphicon glyphicon-flash
-
+
glyphicon glyphicon-log-out
-
+
glyphicon glyphicon-new-window
-
+
glyphicon glyphicon-record
-
+
glyphicon glyphicon-save
-
+
glyphicon glyphicon-open
-
+
glyphicon glyphicon-saved
-
+
glyphicon glyphicon-import
-
+
glyphicon glyphicon-export
-
+
glyphicon glyphicon-send
-
+
glyphicon glyphicon-floppy-disk
-
+
glyphicon glyphicon-floppy-saved
-
+
glyphicon glyphicon-floppy-remove
-
+
glyphicon glyphicon-floppy-save
-
+
glyphicon glyphicon-floppy-open
-
+
glyphicon glyphicon-credit-card
-
+
glyphicon glyphicon-transfer
-
+
glyphicon glyphicon-cutlery
-
+
glyphicon glyphicon-header
-
+
glyphicon glyphicon-compressed
-
+
glyphicon glyphicon-earphone
-
+
glyphicon glyphicon-phone-alt
-
+
glyphicon glyphicon-tower
-
+
glyphicon glyphicon-stats
-
+
glyphicon glyphicon-sd-video
-
+
glyphicon glyphicon-hd-video
-
+
glyphicon glyphicon-subtitles
-
+
glyphicon glyphicon-sound-stereo
-
+
glyphicon glyphicon-sound-dolby
-
+
glyphicon glyphicon-sound-5-1
-
+
glyphicon glyphicon-sound-6-1
-
+
glyphicon glyphicon-sound-7-1
-
+
glyphicon glyphicon-copyright-mark
-
+
glyphicon glyphicon-registration-mark
-
+
glyphicon glyphicon-cloud-download
-
+
glyphicon glyphicon-cloud-upload
-
+
glyphicon glyphicon-tree-conifer
-
+
glyphicon glyphicon-tree-deciduous
-
+
glyphicon glyphicon-cd
-
+
glyphicon glyphicon-save-file
-
+
glyphicon glyphicon-open-file
-
+
glyphicon glyphicon-level-up
-
+
glyphicon glyphicon-copy
-
+
glyphicon glyphicon-paste
-
+
glyphicon glyphicon-alert
-
+
glyphicon glyphicon-equalizer
-
+
glyphicon glyphicon-king
-
+
glyphicon glyphicon-queen
-
+
glyphicon glyphicon-pawn
-
+
glyphicon glyphicon-bishop
-
+
glyphicon glyphicon-knight
-
+
glyphicon glyphicon-baby-formula
-
+
glyphicon glyphicon-tent
-
+
glyphicon glyphicon-blackboard
-
+
glyphicon glyphicon-bed
-
+
glyphicon glyphicon-apple
-
+
glyphicon glyphicon-erase
-
+
glyphicon glyphicon-hourglass
-
+
glyphicon glyphicon-lamp
-
+
glyphicon glyphicon-duplicate
-
+
glyphicon glyphicon-piggy-bank
-
+
glyphicon glyphicon-scissors
-
+
glyphicon glyphicon-bitcoin
-
+
glyphicon glyphicon-btc
-
+
glyphicon glyphicon-xbt
-
+
glyphicon glyphicon-yen
-
+
glyphicon glyphicon-jpy
-
+
glyphicon glyphicon-ruble
-
+
glyphicon glyphicon-rub
-
+
glyphicon glyphicon-scale
-
+
glyphicon glyphicon-ice-lolly
-
+
glyphicon glyphicon-ice-lolly-tasted
-
+
glyphicon glyphicon-education
-
+
glyphicon glyphicon-option-horizontal
-
+
glyphicon glyphicon-option-vertical
-
+
glyphicon glyphicon-menu-hamburger
-
+
glyphicon glyphicon-modal-window
-
+
glyphicon glyphicon-oil
-
+
glyphicon glyphicon-grain
-
+
glyphicon glyphicon-sunglasses
-
+
glyphicon glyphicon-text-size
-
+
glyphicon glyphicon-text-color
-
+
glyphicon glyphicon-text-background
-
+
glyphicon glyphicon-object-align-top
-
+
glyphicon glyphicon-object-align-bottom
-
+
glyphicon glyphicon-object-align-horizontal
-
+
glyphicon glyphicon-object-align-left
-
+
glyphicon glyphicon-object-align-vertical
-
+
glyphicon glyphicon-object-align-right
-
+
glyphicon glyphicon-triangle-right
-
+
glyphicon glyphicon-triangle-left
-
+
glyphicon glyphicon-triangle-bottom
-
+
glyphicon glyphicon-triangle-top
-
+
glyphicon glyphicon-console
-
+
glyphicon glyphicon-superscript
-
+
glyphicon glyphicon-subscript
-
+
glyphicon glyphicon-menu-left
-
+
glyphicon glyphicon-menu-right
-
+
glyphicon glyphicon-menu-down
-
+
glyphicon glyphicon-menu-up
-
+
@@ -2613,7 +2614,7 @@
Tabs
</ul>
-
+
Standard tabs bar
Put the .active class both onto the active tab menu controler and onto the .tab-pane. If you don't want border onto the content, add the class .tab-content-clear to the tab-content panel. See all the Javascript requirement for dynamic tab
@@ -2627,34 +2628,34 @@
Standard tabs bar
Lorem ipsum dolor sit
amet, consectetur adipiscing elit. In iaculis volutpat quam, non
suscipit arcu accumsan at. Aliquam pellentesque.test focus 4
-
Sed ut perspiciatis unde omnis iste natus error sit
- voluptatem accusantium doloremque laudantium, totam rem aperiam,
- eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
- sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
- adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
- magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
- ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
- Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+
Sed ut perspiciatis unde omnis iste natus error sit
+ voluptatem accusantium doloremque laudantium, totam rem aperiam,
+ eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+ sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+ adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
+ magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
+ ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+ Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-
At vero eos et accusamus et iusto odio dignissimos ducimus
- qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
- molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
- qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
- rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
- eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
- omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
- aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
- sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
+
At vero eos et accusamus et iusto odio dignissimos ducimus
+ qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
+ molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+ qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
+ rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+ eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+ omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
+ aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
+ sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Lorem ipsum dolor sit
amet, consectetur adipiscing elit. In iaculis volutpat quam, non
suscipit arcu accumsan at. Aliquam pellentesque.
suscipit arcu accumsan at. Aliquam pellentesque.<ahref="#">test focus 4</a></div><divclass="tab-pane"id="profile"role="tabpanel">
- Sed ut perspiciatis unde omnis iste natus error sit
- voluptatem accusantium doloremque laudantium, totam rem aperiam,
- eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
- sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
- adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
- magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
- ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
- Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+ Sed ut perspiciatis unde omnis iste natus error sit
+ voluptatem accusantium doloremque laudantium, totam rem aperiam,
+ eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+ sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+ adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
+ magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
+ ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+ Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div><divclass="tab-pane"id="messages"role="tabpanel">
- At vero eos et accusamus et iusto odio dignissimos ducimus
- qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
- molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
- qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
- rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
- eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
- omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
- aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
- sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
+ At vero eos et accusamus et iusto odio dignissimos ducimus
+ qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
+ molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+ qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
+ rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+ eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+ omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
+ aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
+ sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div><divclass="tab-pane"id="settings"role="tabpanel">
@@ -3101,7 +3102,7 @@
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
-
+
@@ -190,7 +191,7 @@
Media queries
/* Small devices (phones 480px and up) */@media(min-width:@screen-sm-min){...}
-
+
/* Medium devices (tablets, 768px and up) */@media(min-width:@screen-md-min){...}
@@ -199,7 +200,7 @@
Media queries
/* Extra large devices (large desktops, 1220px and up) */@media(min-width:@screen-xl-min){...}
-
+
/* Extra extra large devices (large desktops, 1380px and up) */@media(min-width:@screen-xxl-min){...}
We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
<ahref="#"class="o-link-arrow back">This is a sample link with arrow for backward</a>
-
+
<ahref="#"class="o-link-arrow back">This is a sample link with arrow for backward</a>
+
@@ -1748,7 +1749,7 @@
Conveying meaning to assistive technologies
Responsive tables
Fully based onto css class, for complex table with col and row headers. Add the .o-responsive-table class to the table tag, the scope='col' to the th into the thead, scope='row' onto row header, and repeat the col header's into the attribute data-title of each td. Display one card by line onto small screen, 2 card by line between small and medium, classic tab for upper sizes
An overview of Bootstrap, how to download and use, basic templates and examples, and more.
-
+
@@ -119,7 +120,7 @@
Getting started
Download
Boosted (currently v3.3.3) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
See NOTICE.txt for more informations.
--><linkrel="stylesheet"href="css/orangeIcons.css"/>
-
+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!-- --><!-- IE11 WARNING
- <!-- IE11 enterprise docmode IE8 -->
+ <!-- IE11 enterprise docmode IE8 --><!-- If your application is executed into IE8 compatibility mode, or included into a frame you need to replace the following test `if lt IE 9` by `if IE` otherwise your website will crash --><!-- --><!--[if lt IE 9]>
@@ -305,11 +306,11 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script><!-- Include all compiled plugins bootstrap, bootstrap accessibility plugin and boosted specific components (below), or include individual files as needed --><script src="js/boosted.js"></script>
-
+
</body></html>
@@ -569,24 +570,24 @@
Tools
Bootlint
Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.
Go to the top left menu and select manage projects:
-
+
Then, select import project link and select the file orange-icons.json
It will load all the Orange Icons into a new project
-
-
-
You can now access to all the icons by clicking onto Load
+
+
+
You can now access to all the icons by clicking onto Load
-
-
Select your icons
-
You will find 2 sets : the 1st one contains all the Orange Frames and Popout, the 2nd one contains all the Solaris icons.
-
-
+
+
Select your icons
+
You will find 2 sets : the 1st one contains all the Orange Frames and Popout, the 2nd one contains all the Solaris icons.
+
+
By default there is no selected icon, you can make your selection for your own project.
Check that you are in selection mode (3rd icon in the top bar, after import icons and icon library), when an icon is selected, its border becomes yellow.
@@ -596,31 +597,31 @@
Select your icons
Warning! Icons format recommendation
You need to import icons in SVG, within a square layout to preserve icons consistency ; if the layout is not a square, you will have some surprises.
-
-
+
+
Download and adapt your project font
Have you finished your shopping?
-Now you can create your font for your project.
+Now you can create your font for your project.
Click onto generate font at the bottom right of the page.
-
+
Depending of the number of icons selected, it can take a little bit of time...
-
+
Setting your font preferences
-Now you have a Download button at the bottom right but WAIT!!!
-We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
+Now you have a Download button at the bottom right but WAIT!!!
+We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
On the top menu bar, click onto Preferences.
By default the font-family is named orange-icons, rename it for your project (MYPROJECT-icons or other) and customize the class prefix by adding your project name to create a unique css selector.
-You also can get Stylesheet variables for scss or less and if you want change the version.
-And uncheck IE8 support if you rely on Boosted 4!
+You also can get Stylesheet variables for scss or less and if you want change the version.
+And uncheck IE8 support if you rely on Boosted 4!
-
+
Close the Preferences window, you’re now ready to download your font.
@@ -637,10 +638,10 @@
Download and adapt your project font
-As you use Boosted 3, you will also need to update this css file.
-Why? Because it is generated with a fontsize base at 16px.
+As you use Boosted 3, you will also need to update this css file.
+Why? Because it is generated with a fontsize base at 16px.
Boosted 4 is now based on the same value (16px) but Boosted3 was set on a different value (14px).
-In MYPROJECT-icons.css you will find:
+In MYPROJECT-icons.css you will find:
[class^="myprojecticon-"],[class*=" myprojecticonicon-"]{/* use !important to prevent issues with browser extensions that change fonts */
@@ -672,11 +673,11 @@
Download and adapt your project font
}
Adapt your file for SCSS or LESS if needed, you can now use your icons.
-
-
-
+
+
+
-
+
Community
@@ -791,7 +792,7 @@
Desktop browsers
On Windows, we support Internet Explorer 8-11.
-
+
For Firefox, in addition to the latest normal stable release, we also support the latest Extended Support Release (ESR) version of Firefox.
Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, as well as Microsoft Edge, though they are not officially supported.
@@ -1067,31 +1068,31 @@
Translations
Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
Add the .tablesorter class to the table tag will make the table headers sortable. For ergonomic reaseons, you need to initiate the table with a default sorted row by including the folowing script, you can also put a text just before the table to inform the user that headers are sortable. More informations about tablesorter options (External link)
Add the .tablesorter class to the table tag will make the table headers sortable. For ergonomic reaseons, you need to initiate the table with a default sorted row by including the folowing script, you can also put a text just before the table to inform the user that headers are sortable. More informations about tablesorter options (External link)
Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
The official Sass port of Bootstrap was created and is maintained by this team. It became part of Bootstrap's organization with v3.1.0. Read the Sass contributing guidelines for information on how the Sass port is developed.
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
-
+
@@ -137,1322 +138,1322 @@
Orange Icons
Icons created from the Orange brand.Co
Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible.
-
+
glyphicon glyphicon-asterisk
-
+
glyphicon glyphicon-plus
-
+
glyphicon glyphicon-euro
-
+
glyphicon glyphicon-eur
-
+
glyphicon glyphicon-minus
-
+
glyphicon glyphicon-cloud
-
+
glyphicon glyphicon-envelope
-
+
glyphicon glyphicon-pencil
-
+
glyphicon glyphicon-glass
-
+
glyphicon glyphicon-music
-
+
glyphicon glyphicon-search
-
+
glyphicon glyphicon-heart
-
+
glyphicon glyphicon-star
-
+
glyphicon glyphicon-star-empty
-
+
glyphicon glyphicon-user
-
+
glyphicon glyphicon-film
-
+
glyphicon glyphicon-th-large
-
+
glyphicon glyphicon-th
-
+
glyphicon glyphicon-th-list
-
+
glyphicon glyphicon-ok
-
+
glyphicon glyphicon-remove
-
+
glyphicon glyphicon-zoom-in
-
+
glyphicon glyphicon-zoom-out
-
+
glyphicon glyphicon-off
-
+
glyphicon glyphicon-signal
-
+
glyphicon glyphicon-cog
-
+
glyphicon glyphicon-trash
-
+
glyphicon glyphicon-home
-
+
glyphicon glyphicon-file
-
+
glyphicon glyphicon-time
-
+
glyphicon glyphicon-road
-
+
glyphicon glyphicon-download-alt
-
+
glyphicon glyphicon-download
-
+
glyphicon glyphicon-upload
-
+
glyphicon glyphicon-inbox
-
+
glyphicon glyphicon-play-circle
-
+
glyphicon glyphicon-repeat
-
+
glyphicon glyphicon-refresh
-
+
glyphicon glyphicon-list-alt
-
+
glyphicon glyphicon-lock
-
+
glyphicon glyphicon-flag
-
+
glyphicon glyphicon-headphones
-
+
glyphicon glyphicon-volume-off
-
+
glyphicon glyphicon-volume-down
-
+
glyphicon glyphicon-volume-up
-
+
glyphicon glyphicon-qrcode
-
+
glyphicon glyphicon-barcode
-
+
glyphicon glyphicon-tag
-
+
glyphicon glyphicon-tags
-
+
glyphicon glyphicon-book
-
+
glyphicon glyphicon-bookmark
-
+
glyphicon glyphicon-print
-
+
glyphicon glyphicon-camera
-
+
glyphicon glyphicon-font
-
+
glyphicon glyphicon-bold
-
+
glyphicon glyphicon-italic
-
+
glyphicon glyphicon-text-height
-
+
glyphicon glyphicon-text-width
-
+
glyphicon glyphicon-align-left
-
+
glyphicon glyphicon-align-center
-
+
glyphicon glyphicon-align-right
-
+
glyphicon glyphicon-align-justify
-
+
glyphicon glyphicon-list
-
+
glyphicon glyphicon-indent-left
-
+
glyphicon glyphicon-indent-right
-
+
glyphicon glyphicon-facetime-video
-
+
glyphicon glyphicon-picture
-
+
glyphicon glyphicon-map-marker
-
+
glyphicon glyphicon-adjust
-
+
glyphicon glyphicon-tint
-
+
glyphicon glyphicon-edit
-
+
glyphicon glyphicon-share
-
+
glyphicon glyphicon-check
-
+
glyphicon glyphicon-move
-
+
glyphicon glyphicon-step-backward
-
+
glyphicon glyphicon-fast-backward
-
+
glyphicon glyphicon-backward
-
+
glyphicon glyphicon-play
-
+
glyphicon glyphicon-pause
-
+
glyphicon glyphicon-stop
-
+
glyphicon glyphicon-forward
-
+
glyphicon glyphicon-fast-forward
-
+
glyphicon glyphicon-step-forward
-
+
glyphicon glyphicon-eject
-
+
glyphicon glyphicon-chevron-left
-
+
glyphicon glyphicon-chevron-right
-
+
glyphicon glyphicon-plus-sign
-
+
glyphicon glyphicon-minus-sign
-
+
glyphicon glyphicon-remove-sign
-
+
glyphicon glyphicon-ok-sign
-
+
glyphicon glyphicon-question-sign
-
+
glyphicon glyphicon-info-sign
-
+
glyphicon glyphicon-screenshot
-
+
glyphicon glyphicon-remove-circle
-
+
glyphicon glyphicon-ok-circle
-
+
glyphicon glyphicon-ban-circle
-
+
glyphicon glyphicon-arrow-left
-
+
glyphicon glyphicon-arrow-right
-
+
glyphicon glyphicon-arrow-up
-
+
glyphicon glyphicon-arrow-down
-
+
glyphicon glyphicon-share-alt
-
+
glyphicon glyphicon-resize-full
-
+
glyphicon glyphicon-resize-small
-
+
glyphicon glyphicon-exclamation-sign
-
+
glyphicon glyphicon-gift
-
+
glyphicon glyphicon-leaf
-
+
glyphicon glyphicon-fire
-
+
glyphicon glyphicon-eye-open
-
+
glyphicon glyphicon-eye-close
-
+
glyphicon glyphicon-warning-sign
-
+
glyphicon glyphicon-plane
-
+
glyphicon glyphicon-calendar
-
+
glyphicon glyphicon-random
-
+
glyphicon glyphicon-comment
-
+
glyphicon glyphicon-magnet
-
+
glyphicon glyphicon-chevron-up
-
+
glyphicon glyphicon-chevron-down
-
+
glyphicon glyphicon-retweet
-
+
glyphicon glyphicon-shopping-cart
-
+
glyphicon glyphicon-folder-close
-
+
glyphicon glyphicon-folder-open
-
+
glyphicon glyphicon-resize-vertical
-
+
glyphicon glyphicon-resize-horizontal
-
+
glyphicon glyphicon-hdd
-
+
glyphicon glyphicon-bullhorn
-
+
glyphicon glyphicon-bell
-
+
glyphicon glyphicon-certificate
-
+
glyphicon glyphicon-thumbs-up
-
+
glyphicon glyphicon-thumbs-down
-
+
glyphicon glyphicon-hand-right
-
+
glyphicon glyphicon-hand-left
-
+
glyphicon glyphicon-hand-up
-
+
glyphicon glyphicon-hand-down
-
+
glyphicon glyphicon-circle-arrow-right
-
+
glyphicon glyphicon-circle-arrow-left
-
+
glyphicon glyphicon-circle-arrow-up
-
+
glyphicon glyphicon-circle-arrow-down
-
+
glyphicon glyphicon-globe
-
+
glyphicon glyphicon-wrench
-
+
glyphicon glyphicon-tasks
-
+
glyphicon glyphicon-filter
-
+
glyphicon glyphicon-briefcase
-
+
glyphicon glyphicon-fullscreen
-
+
glyphicon glyphicon-dashboard
-
+
glyphicon glyphicon-paperclip
-
+
glyphicon glyphicon-heart-empty
-
+
glyphicon glyphicon-link
-
+
glyphicon glyphicon-phone
-
+
glyphicon glyphicon-pushpin
-
+
glyphicon glyphicon-usd
-
+
glyphicon glyphicon-gbp
-
+
glyphicon glyphicon-sort
-
+
glyphicon glyphicon-sort-by-alphabet
-
+
glyphicon glyphicon-sort-by-alphabet-alt
-
+
glyphicon glyphicon-sort-by-order
-
+
glyphicon glyphicon-sort-by-order-alt
-
+
glyphicon glyphicon-sort-by-attributes
-
+
glyphicon glyphicon-sort-by-attributes-alt
-
+
glyphicon glyphicon-unchecked
-
+
glyphicon glyphicon-expand
-
+
glyphicon glyphicon-collapse-down
-
+
glyphicon glyphicon-collapse-up
-
+
glyphicon glyphicon-log-in
-
+
glyphicon glyphicon-flash
-
+
glyphicon glyphicon-log-out
-
+
glyphicon glyphicon-new-window
-
+
glyphicon glyphicon-record
-
+
glyphicon glyphicon-save
-
+
glyphicon glyphicon-open
-
+
glyphicon glyphicon-saved
-
+
glyphicon glyphicon-import
-
+
glyphicon glyphicon-export
-
+
glyphicon glyphicon-send
-
+
glyphicon glyphicon-floppy-disk
-
+
glyphicon glyphicon-floppy-saved
-
+
glyphicon glyphicon-floppy-remove
-
+
glyphicon glyphicon-floppy-save
-
+
glyphicon glyphicon-floppy-open
-
+
glyphicon glyphicon-credit-card
-
+
glyphicon glyphicon-transfer
-
+
glyphicon glyphicon-cutlery
-
+
glyphicon glyphicon-header
-
+
glyphicon glyphicon-compressed
-
+
glyphicon glyphicon-earphone
-
+
glyphicon glyphicon-phone-alt
-
+
glyphicon glyphicon-tower
-
+
glyphicon glyphicon-stats
-
+
glyphicon glyphicon-sd-video
-
+
glyphicon glyphicon-hd-video
-
+
glyphicon glyphicon-subtitles
-
+
glyphicon glyphicon-sound-stereo
-
+
glyphicon glyphicon-sound-dolby
-
+
glyphicon glyphicon-sound-5-1
-
+
glyphicon glyphicon-sound-6-1
-
+
glyphicon glyphicon-sound-7-1
-
+
glyphicon glyphicon-copyright-mark
-
+
glyphicon glyphicon-registration-mark
-
+
glyphicon glyphicon-cloud-download
-
+
glyphicon glyphicon-cloud-upload
-
+
glyphicon glyphicon-tree-conifer
-
+
glyphicon glyphicon-tree-deciduous
-
+
glyphicon glyphicon-cd
-
+
glyphicon glyphicon-save-file
-
+
glyphicon glyphicon-open-file
-
+
glyphicon glyphicon-level-up
-
+
glyphicon glyphicon-copy
-
+
glyphicon glyphicon-paste
-
+
glyphicon glyphicon-alert
-
+
glyphicon glyphicon-equalizer
-
+
glyphicon glyphicon-king
-
+
glyphicon glyphicon-queen
-
+
glyphicon glyphicon-pawn
-
+
glyphicon glyphicon-bishop
-
+
glyphicon glyphicon-knight
-
+
glyphicon glyphicon-baby-formula
-
+
glyphicon glyphicon-tent
-
+
glyphicon glyphicon-blackboard
-
+
glyphicon glyphicon-bed
-
+
glyphicon glyphicon-apple
-
+
glyphicon glyphicon-erase
-
+
glyphicon glyphicon-hourglass
-
+
glyphicon glyphicon-lamp
-
+
glyphicon glyphicon-duplicate
-
+
glyphicon glyphicon-piggy-bank
-
+
glyphicon glyphicon-scissors
-
+
glyphicon glyphicon-bitcoin
-
+
glyphicon glyphicon-btc
-
+
glyphicon glyphicon-xbt
-
+
glyphicon glyphicon-yen
-
+
glyphicon glyphicon-jpy
-
+
glyphicon glyphicon-ruble
-
+
glyphicon glyphicon-rub
-
+
glyphicon glyphicon-scale
-
+
glyphicon glyphicon-ice-lolly
-
+
glyphicon glyphicon-ice-lolly-tasted
-
+
glyphicon glyphicon-education
-
+
glyphicon glyphicon-option-horizontal
-
+
glyphicon glyphicon-option-vertical
-
+
glyphicon glyphicon-menu-hamburger
-
+
glyphicon glyphicon-modal-window
-
+
glyphicon glyphicon-oil
-
+
glyphicon glyphicon-grain
-
+
glyphicon glyphicon-sunglasses
-
+
glyphicon glyphicon-text-size
-
+
glyphicon glyphicon-text-color
-
+
glyphicon glyphicon-text-background
-
+
glyphicon glyphicon-object-align-top
-
+
glyphicon glyphicon-object-align-bottom
-
+
glyphicon glyphicon-object-align-horizontal
-
+
glyphicon glyphicon-object-align-left
-
+
glyphicon glyphicon-object-align-vertical
-
+
glyphicon glyphicon-object-align-right
-
+
glyphicon glyphicon-triangle-right
-
+
glyphicon glyphicon-triangle-left
-
+
glyphicon glyphicon-triangle-bottom
-
+
glyphicon glyphicon-triangle-top
-
+
glyphicon glyphicon-console
-
+
glyphicon glyphicon-superscript
-
+
glyphicon glyphicon-subscript
-
+
glyphicon glyphicon-menu-left
-
+
glyphicon glyphicon-menu-right
-
+
glyphicon glyphicon-menu-down
-
+
glyphicon glyphicon-menu-up
-
+
@@ -2623,7 +2624,7 @@
Tabs
</ul>
-
+
Standard tabs bar
Put the .active class both onto the active tab menu controler and onto the .tab-pane. If you don't want border onto the content, add the class .tab-content-clear to the tab-content panel. See all the Javascript requirement for dynamic tab
@@ -2637,34 +2638,34 @@
Standard tabs bar
Lorem ipsum dolor sit
amet, consectetur adipiscing elit. In iaculis volutpat quam, non
suscipit arcu accumsan at. Aliquam pellentesque.test focus 4
-
Sed ut perspiciatis unde omnis iste natus error sit
- voluptatem accusantium doloremque laudantium, totam rem aperiam,
- eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
- sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
- adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
- magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
- ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
- Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+
Sed ut perspiciatis unde omnis iste natus error sit
+ voluptatem accusantium doloremque laudantium, totam rem aperiam,
+ eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+ sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+ adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
+ magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
+ ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+ Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
-
At vero eos et accusamus et iusto odio dignissimos ducimus
- qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
- molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
- qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
- rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
- eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
- omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
- aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
- sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
+
At vero eos et accusamus et iusto odio dignissimos ducimus
+ qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
+ molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+ qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
+ rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+ eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+ omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
+ aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
+ sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Lorem ipsum dolor sit
amet, consectetur adipiscing elit. In iaculis volutpat quam, non
suscipit arcu accumsan at. Aliquam pellentesque.
suscipit arcu accumsan at. Aliquam pellentesque.<ahref="#">test focus 4</a></div><divclass="tab-pane"id="profile"role="tabpanel">
- Sed ut perspiciatis unde omnis iste natus error sit
- voluptatem accusantium doloremque laudantium, totam rem aperiam,
- eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
- Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
- sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
- Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
- adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
- magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
- ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
- Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+ Sed ut perspiciatis unde omnis iste natus error sit
+ voluptatem accusantium doloremque laudantium, totam rem aperiam,
+ eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+ Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+ sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+ Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
+ adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
+ magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
+ ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
+ Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div><divclass="tab-pane"id="messages"role="tabpanel">
- At vero eos et accusamus et iusto odio dignissimos ducimus
- qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
- molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
- qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
- rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
- eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
- omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
- aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
- sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
+ At vero eos et accusamus et iusto odio dignissimos ducimus
+ qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas
+ molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
+ qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
+ rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
+ eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
+ omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et
+ aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae
+ sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
</div><divclass="tab-pane"id="settings"role="tabpanel">
@@ -3111,7 +3112,7 @@
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
-
+
@@ -200,7 +201,7 @@
Media queries
/* Small devices (phones 480px and up) */@media(min-width:@screen-sm-min){...}
-
+
/* Medium devices (tablets, 768px and up) */@media(min-width:@screen-md-min){...}
@@ -209,7 +210,7 @@
Media queries
/* Extra large devices (large desktops, 1220px and up) */@media(min-width:@screen-xl-min){...}
-
+
/* Extra extra large devices (large desktops, 1380px and up) */@media(min-width:@screen-xxl-min){...}
We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
<ahref="#"class="o-link-arrow back">This is a sample link with arrow for backward</a>
-
+
<ahref="#"class="o-link-arrow back">This is a sample link with arrow for backward</a>
+
@@ -1788,7 +1789,7 @@
Conveying meaning to assistive technologies
Responsive tables
Fully based onto css class, for complex table with col and row headers. Add the .o-responsive-table class to the table tag, the scope='col' to the th into the thead, scope='row' onto row header, and repeat the col header's into the attribute data-title of each td. Display one card by line onto small screen, 2 card by line between small and medium, classic tab for upper sizes
An overview of Bootstrap, how to download and use, basic templates and examples, and more.
-
+
@@ -129,7 +130,7 @@
Getting started
Download
Boosted (currently v3.4.1) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
See NOTICE.txt for more informations.
--><linkrel="stylesheet"href="css/orangeIcons.css"/>
-
+
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --><!-- WARNING: Respond.js doesn't work if you view the page via file:// --><!-- --><!-- IE11 WARNING
- <!-- IE11 enterprise docmode IE8 -->
+ <!-- IE11 enterprise docmode IE8 --><!-- If your application is executed into IE8 compatibility mode, or included into a frame you need to replace the following test `if lt IE 9` by `if IE` otherwise your website will crash --><!-- --><!--[if lt IE 9]>
@@ -315,11 +316,11 @@
Bootlint is the official Bootstrap HTML linter tool. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Vanilla Bootstrap's components/widgets require their parts of the DOM to conform to certain structures. Bootlint checks that instances of Bootstrap components have correctly-structured HTML. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.
Go to the top left menu and select manage projects:
-
+
Then, select import project link and select the file orange-icons.json
It will load all the Orange Icons into a new project
-
-
-
You can now access to all the icons by clicking onto Load
+
+
+
You can now access to all the icons by clicking onto Load
-
-
Select your icons
-
You will find 2 sets : the 1st one contains all the Orange Frames and Popout, the 2nd one contains all the Solaris icons.
-
-
+
+
Select your icons
+
You will find 2 sets : the 1st one contains all the Orange Frames and Popout, the 2nd one contains all the Solaris icons.
+
+
By default there is no selected icon, you can make your selection for your own project.
Check that you are in selection mode (3rd icon in the top bar, after import icons and icon library), when an icon is selected, its border becomes yellow.
@@ -606,31 +607,31 @@
Select your icons
Warning! Icons format recommendation
You need to import icons in SVG, within a square layout to preserve icons consistency ; if the layout is not a square, you will have some surprises.
-
-
+
+
Download and adapt your project font
Have you finished your shopping?
-Now you can create your font for your project.
+Now you can create your font for your project.
Click onto generate font at the bottom right of the page.
-
+
Depending of the number of icons selected, it can take a little bit of time...
-
+
Setting your font preferences
-Now you have a Download button at the bottom right but WAIT!!!
-We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
+Now you have a Download button at the bottom right but WAIT!!!
+We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
On the top menu bar, click onto Preferences.
By default the font-family is named orange-icons, rename it for your project (MYPROJECT-icons or other) and customize the class prefix by adding your project name to create a unique css selector.
-You also can get Stylesheet variables for scss or less and if you want change the version.
-And uncheck IE8 support if you rely on Boosted 4!
+You also can get Stylesheet variables for scss or less and if you want change the version.
+And uncheck IE8 support if you rely on Boosted 4!
-
+
Close the Preferences window, you’re now ready to download your font.
@@ -647,10 +648,10 @@
Download and adapt your project font
-As you use Boosted 3, you will also need to update this css file.
-Why? Because it is generated with a fontsize base at 16px.
+As you use Boosted 3, you will also need to update this css file.
+Why? Because it is generated with a fontsize base at 16px.
Boosted 4 is now based on the same value (16px) but Boosted3 was set on a different value (14px).
-In MYPROJECT-icons.css you will find:
+In MYPROJECT-icons.css you will find:
[class^="myprojecticon-"],[class*=" myprojecticonicon-"]{/* use !important to prevent issues with browser extensions that change fonts */
@@ -682,11 +683,11 @@
Download and adapt your project font
}
Adapt your file for SCSS or LESS if needed, you can now use your icons.
-
-
-
+
+
+
-
+
Community
@@ -1077,31 +1078,31 @@
Translations
Community members have translated Bootstrap's documentation into various languages. None are officially supported and they may not always be up to date.
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
-
+
@@ -285,15 +286,15 @@
Disabling transitions
-
+
Table sorter
-
Table with sortable columns.
-
Add the .tablesorter class to the table tag will make the table headers sortable. For ergonomic reaseons, you need to initiate the table with a default sorted row by including the folowing script, you can also put a text just before the table to inform the user that headers are sortable. More informations about tablesorter options (External link)
Add the .tablesorter class to the table tag will make the table headers sortable. For ergonomic reaseons, you need to initiate the table with a default sorted row by including the folowing script, you can also put a text just before the table to inform the user that headers are sortable. More informations about tablesorter options (External link)
Back to top
diff --git a/docs/4.0/components/alerts/index.html b/docs/4.0/components/alerts/index.html
index dcd28cf11c..9a46a13ee7 100644
--- a/docs/4.0/components/alerts/index.html
+++ b/docs/4.0/components/alerts/index.html
@@ -401,7 +401,7 @@
Back to top
diff --git a/docs/4.0/components/card/index.html b/docs/4.0/components/card/index.html
index 10c61d9753..b31376cf52 100644
--- a/docs/4.0/components/card/index.html
+++ b/docs/4.0/components/card/index.html
@@ -401,7 +401,7 @@
-
+
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
@@ -588,7 +589,7 @@
Contextual classes
Dapibus ac facilisis in
-
+
This is a primary list group item
This is a secondary list group item
This is a success list group item
@@ -602,7 +603,7 @@
Contextual classes
<ulclass="list-group"><liclass="list-group-item">Dapibus ac facilisis in</li>
-
+
<liclass="list-group-item list-group-item-primary">This is a primary list group item</li><liclass="list-group-item list-group-item-secondary">This is a secondary list group item</li><liclass="list-group-item list-group-item-success">This is a success list group item</li>
@@ -619,7 +620,7 @@
<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
-
+
<ahref="#"class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
@@ -927,7 +928,7 @@
Events
-
+
Back to top
diff --git a/docs/4.0/components/local-navigation/index.html b/docs/4.0/components/local-navigation/index.html
index 29277dd7cf..a0723dbbea 100644
--- a/docs/4.0/components/local-navigation/index.html
+++ b/docs/4.0/components/local-navigation/index.html
@@ -401,7 +401,7 @@
-
+
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
@@ -1281,7 +1282,7 @@
Collapsed content
-
+
Back to top
diff --git a/docs/4.0/components/navs/index.html b/docs/4.0/components/navs/index.html
index 45ac7a4175..97caa55fa0 100644
--- a/docs/4.0/components/navs/index.html
+++ b/docs/4.0/components/navs/index.html
@@ -401,7 +401,7 @@
-
+
Displays a link at the bottom right of the page after scrolling down one page height.
+
Displays a link at the bottom right of the page after scrolling down one page height.
On desktop this link displays the “Back to top” text and an icon. On mobile it only displays the icon.
Adds a link at the end of the page with the o-scroll-up class. The link is made up of 2 elements. The first element is a text with the .o-scroll-up-text class, shown only on desktop display (you can change the breakpoint if needed). The second element is the arrow up icon, with the .o-scroll-up-icon class. For accessibility reasons, add a consistant title to the link, and add aria-hidden='true' to the icon.
@@ -432,7 +433,7 @@
Scroll up auto display
Scroll up static
Displays a link in the page with the arrow up icon.
-
Adds a link in the page with the o-scroll-up and static class.
+
Adds a link in the page with the o-scroll-up and static class.
You can let the text .o-scroll-up-text display on all devices.
@@ -449,7 +450,7 @@
Scroll up static
-
+
Back to top
diff --git a/docs/4.0/components/scrollspy/index.html b/docs/4.0/components/scrollspy/index.html
index 4bb7d0f193..c91501082b 100644
--- a/docs/4.0/components/scrollspy/index.html
+++ b/docs/4.0/components/scrollspy/index.html
@@ -401,7 +401,7 @@
-
+
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
@@ -770,7 +771,7 @@
Events
-
+
Back to top
diff --git a/docs/4.0/components/stepbar/index.html b/docs/4.0/components/stepbar/index.html
index dca92a6093..05715dcf88 100644
--- a/docs/4.0/components/stepbar/index.html
+++ b/docs/4.0/components/stepbar/index.html
@@ -401,7 +401,7 @@
-
+
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
@@ -779,7 +780,7 @@
Events
-
+
Back to top
diff --git a/docs/4.0/content/code/index.html b/docs/4.0/content/code/index.html
index a17f4ab683..b5ef96264c 100644
--- a/docs/4.0/content/code/index.html
+++ b/docs/4.0/content/code/index.html
@@ -401,7 +401,7 @@
-
+
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
@@ -484,7 +485,7 @@
Picture
-
+
Back to top
diff --git a/docs/4.0/content/reboot/index.html b/docs/4.0/content/reboot/index.html
index de3f773c8a..d3bad18287 100644
--- a/docs/4.0/content/reboot/index.html
+++ b/docs/4.0/content/reboot/index.html
@@ -401,7 +401,7 @@
-
+
Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.
@@ -809,7 +810,7 @@
jQuery incompatibility
-
+
Back to top
diff --git a/docs/4.0/content/tables/index.html b/docs/4.0/content/tables/index.html
index c425ff7059..955414a56f 100644
--- a/docs/4.0/content/tables/index.html
+++ b/docs/4.0/content/tables/index.html
@@ -401,7 +401,7 @@
-
+
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
@@ -480,7 +481,7 @@
Headings
Mobile size
-
+
h1. Boosted heading
@@ -521,7 +522,7 @@
Headings
h6. Boosted heading
Bold 1rem (16px)
-
Bold .875rem (14px)
+
Bold .875rem (14px)
@@ -947,7 +948,7 @@
Responsive typography
-
+
Back to top
diff --git a/docs/4.0/extend/approach/index.html b/docs/4.0/extend/approach/index.html
index 439d4209f9..efdccf99d8 100644
--- a/docs/4.0/extend/approach/index.html
+++ b/docs/4.0/extend/approach/index.html
@@ -401,9 +401,10 @@
-
+
+ Explore OUDS
Approach
Learn about the guiding principles, strategies, and techniques used to build and maintain Bootstrap so you can more easily customize and extend it yourself.
@@ -485,7 +486,7 @@
Flexible HTML
-
+
Back to top
diff --git a/docs/4.0/extend/icons/index.html b/docs/4.0/extend/icons/index.html
index 97a4ad235e..b067d786ef 100644
--- a/docs/4.0/extend/icons/index.html
+++ b/docs/4.0/extend/icons/index.html
@@ -401,9 +401,10 @@
-
+
+ Explore OUDS
Icons
Guidance and suggestions for using external icon libraries with Bootstrap.
@@ -483,13 +484,13 @@
Download and adapt your project fo
-
Now you have a Download button at the bottom right but WAIT!!!
+
Now you have a Download button at the bottom right but WAIT!!!
We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
On the top menu bar, click onto Preferences.
By default the font-family is named orange-icons, rename it for your project (MYPROJECT-icons or other) and customize the class prefix by adding your project name to create a unique css selector.
-You also can get Stylesheet variables for scss or less and if you want change the version.
+You also can get Stylesheet variables for scss or less and if you want change the version.
And uncheck IE8 support if you rely on Boosted 4!
@@ -513,7 +514,7 @@
Download and adapt your project fo
-
+
Back to top
diff --git a/docs/4.0/extend/index.html b/docs/4.0/extend/index.html
index f4127e9786..53db6eea63 100644
--- a/docs/4.0/extend/index.html
+++ b/docs/4.0/extend/index.html
@@ -401,9 +401,10 @@
-
+
+ Explore OUDS
Extend
@@ -413,7 +414,7 @@
Extend
-
+
Back to top
diff --git a/docs/4.0/getting-started/accessibility/index.html b/docs/4.0/getting-started/accessibility/index.html
index 9e8dbaed46..4d695eb74d 100644
--- a/docs/4.0/getting-started/accessibility/index.html
+++ b/docs/4.0/getting-started/accessibility/index.html
@@ -401,7 +401,7 @@
-
+
Bring Bootstrap to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.
@@ -530,7 +531,7 @@
Util
-
+
Back to top
diff --git a/docs/4.0/getting-started/rtl/index.html b/docs/4.0/getting-started/rtl/index.html
index 07daedc3b8..862269e3ea 100644
--- a/docs/4.0/getting-started/rtl/index.html
+++ b/docs/4.0/getting-started/rtl/index.html
@@ -401,7 +401,7 @@
-
+
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
@@ -698,73 +699,73 @@
All colors
All colors available in Boosted 4, are available as Sass variables and a Sass map in our scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.
-
-
+
+
Blue
-
-
-
+
+
+
Indigo
-
-
-
+
+
+
Purple
-
-
-
+
+
+
Pink
-
-
-
+
+
+
Red
-
-
-
+
+
+
Orange
-
-
-
+
+
+
Yellow
-
-
-
+
+
+
Green
-
-
-
+
+
+
Teal
-
-
-
+
+
+
Cyan
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Here’s how you can use these in your Sass:
@@ -786,39 +787,39 @@
Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our scss/_variables.scss file.
-
+
Primary
-
+
Secondary
-
+
Success
-
+
Danger
-
+
Warning
-
+
Info
-
+
Light
-
+
Dark
-
+
Grays
@@ -827,25 +828,25 @@
Grays
-
+
100
-
+
200
-
+
300
-
+
400
-
+
500
-
+
600
-
+
700
-
+
800
-
+
900
-
+
@@ -973,7 +974,7 @@
Examples
-
+
Back to top
diff --git a/docs/4.0/getting-started/webpack/index.html b/docs/4.0/getting-started/webpack/index.html
index ef7415e368..0c3dfa3a05 100644
--- a/docs/4.0/getting-started/webpack/index.html
+++ b/docs/4.0/getting-started/webpack/index.html
@@ -401,7 +401,7 @@
-
+
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
@@ -528,7 +529,7 @@
Grid options
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
-
We have include a security margin for container fluid. The goal is to fit exactly the desired content width at the targetted resolution.
+
We have include a security margin for container fluid. The goal is to fit exactly the desired content width at the targetted resolution.
[comment]: # Boosted mod
[comment]: # Orange grid custom BP values
@@ -1645,7 +1646,7 @@
Grid tiers
-
+
Back to top
diff --git a/docs/4.0/layout/media-object/index.html b/docs/4.0/layout/media-object/index.html
index 7144a2f6e0..1f8014a8d2 100644
--- a/docs/4.0/layout/media-object/index.html
+++ b/docs/4.0/layout/media-object/index.html
@@ -401,7 +401,7 @@
-
+
Components and options for laying out your Boosted project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
@@ -579,7 +580,7 @@
Z-index
-
+
Back to top
diff --git a/docs/4.0/layout/utilities-for-layout/index.html b/docs/4.0/layout/utilities-for-layout/index.html
index 0838e1b9c4..0183c6be82 100644
--- a/docs/4.0/layout/utilities-for-layout/index.html
+++ b/docs/4.0/layout/utilities-for-layout/index.html
@@ -401,7 +401,7 @@
-
+
For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
@@ -438,7 +439,7 @@
Toggle visibility
-
+
Back to top
diff --git a/docs/4.0/migration/index.html b/docs/4.0/migration/index.html
index ed0422f427..4b2b8eeed9 100644
--- a/docs/4.0/migration/index.html
+++ b/docs/4.0/migration/index.html
@@ -401,7 +401,7 @@
-
+
Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
@@ -923,7 +924,7 @@
Responsive utilities
-
+
Back to top
diff --git a/docs/4.0/utilities/borders/index.html b/docs/4.0/utilities/borders/index.html
index c84654a46e..ea9fb94c2b 100644
--- a/docs/4.0/utilities/borders/index.html
+++ b/docs/4.0/utilities/borders/index.html
@@ -401,7 +401,7 @@
-
+
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
@@ -570,7 +571,7 @@
Display in print
-
+
Back to top
diff --git a/docs/4.0/utilities/embed/index.html b/docs/4.0/utilities/embed/index.html
index f7e8c5d27f..6342d71391 100644
--- a/docs/4.0/utilities/embed/index.html
+++ b/docs/4.0/utilities/embed/index.html
@@ -401,7 +401,7 @@
-
+
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
@@ -1198,7 +1199,7 @@
Align content
-
+
Back to top
diff --git a/docs/4.0/utilities/float/index.html b/docs/4.0/utilities/float/index.html
index 3ee6e8578f..9051ff34ca 100644
--- a/docs/4.0/utilities/float/index.html
+++ b/docs/4.0/utilities/float/index.html
@@ -401,7 +401,7 @@
-
+
Swap text for background images with the image replacement class.
@@ -433,7 +434,7 @@
Back to top
diff --git a/docs/4.0/utilities/position/index.html b/docs/4.0/utilities/position/index.html
index 8939fa68d6..d89f033d8f 100644
--- a/docs/4.0/utilities/position/index.html
+++ b/docs/4.0/utilities/position/index.html
@@ -401,7 +401,7 @@
-
+
Boosted 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
@@ -583,7 +584,7 @@
Contextual classes
Dapibus ac facilisis in
-
+
A simple primary list group item
A simple secondary list group item
A simple success list group item
@@ -597,7 +598,7 @@
Contextual classes
<ulclass="list-group"><liclass="list-group-item">Dapibus ac facilisis in</li>
-
+
<liclass="list-group-item list-group-item-primary">A simple primary list group item</li><liclass="list-group-item list-group-item-secondary">A simple secondary list group item</li><liclass="list-group-item list-group-item-success">A simple success list group item</li>
@@ -614,7 +615,7 @@
Documentation and examples for Boosted’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Displays a link at the bottom right of the page after scrolling down one page height.
+
Displays a link at the bottom right of the page after scrolling down one page height.
On desktop this link displays the “Back to top” text and an icon. On mobile it only displays the icon.
Adds a link at the end of the page with the o-scroll-up class. The link is made up of 2 elements. The first element is a text with the .o-scroll-up-text class, shown only on desktop display (you can change the breakpoint if needed). The second element is the arrow up icon, with the .o-scroll-up-icon class. For accessibility reasons, add a consistant title to the link, and add aria-hidden='true' to the icon.
@@ -437,7 +438,7 @@
Scroll up auto display
Scroll up static
Displays a link in the page with the arrow up icon.
-
Adds a link in the page with the o-scroll-up and static class.
+
Adds a link in the page with the o-scroll-up and static class.
You can let the text .o-scroll-up-text display on all devices.
Documentation and examples for adding custom Boosted tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
Reboot, a collection of element-specific CSS changes in a single file, kickstart Boosted to provide an elegant, consistent, and simple baseline to build upon.
Learn about the guiding principles, strategies, and techniques used to build and maintain Boosted so you can more easily customize and extend it yourself.
Guidance and suggestions for using external icon libraries with Boosted.
@@ -490,13 +491,13 @@
Download and adapt your project fo
-
Now you have a Download button at the bottom right but WAIT!!!
+
Now you have a Download button at the bottom right but WAIT!!!
We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
On the top menu bar, click onto Preferences.
By default the font-family is named orange-icons, rename it for your project (MYPROJECT-icons or other) and customize the class prefix by adding your project name to create a unique css selector.
-You also can get Stylesheet variables for scss or less and if you want change the version.
+You also can get Stylesheet variables for scss or less and if you want change the version.
And uncheck IE8 support if you rely on Boosted 4!
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
@@ -717,73 +718,73 @@
All colors
All colors available in Boosted 4, are available as Sass variables and a Sass map in our scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.
-
-
+
+
Blue
-
-
-
+
+
+
Indigo
-
-
-
+
+
+
Purple
-
-
-
+
+
+
Pink
-
-
-
+
+
+
Red
-
-
-
+
+
+
Orange
-
-
-
+
+
+
Yellow
-
-
-
+
+
+
Green
-
-
-
+
+
+
Teal
-
-
-
+
+
+
Cyan
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Here’s how you can use these in your Sass:
@@ -805,39 +806,39 @@
Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted’s scss/_variables.scss file.
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
@@ -534,7 +535,7 @@
Grid options
See how aspects of the Boosted grid system work across multiple devices with a handy table.
-
We have include a security margin for container fluid. The goal is to fit exactly the desired content width at the targetted resolution.
+
We have include a security margin for container fluid. The goal is to fit exactly the desired content width at the targetted resolution.
[comment]: # Boosted mod
[comment]: # Orange grid custom BP values
Components and options for laying out your Boosted project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
An overview of the founding team and core contributors to Bootstrap.
@@ -555,70 +556,70 @@
Team
Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
Boosted 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
@@ -721,7 +722,7 @@
Contextual classes
Dapibus ac facilisis in
-
+
A simple primary list group item
A simple secondary list group item
A simple success list group item
@@ -735,7 +736,7 @@
Contextual classes
<ulclass="list-group"><liclass="list-group-item">Dapibus ac facilisis in</li>
-
+
<liclass="list-group-item list-group-item-primary">A simple primary list group item</li><liclass="list-group-item list-group-item-secondary">A simple secondary list group item</li><liclass="list-group-item list-group-item-success">A simple success list group item</li>
@@ -752,7 +753,7 @@
Documentation and examples for Boosted’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Displays a link at the bottom right of the page after scrolling down one page height.
+
Displays a link at the bottom right of the page after scrolling down one page height.
On desktop this link displays the “Back to top” text and an icon. On mobile it only displays the icon.
Adds a link at the end of the page with the o-scroll-up class. The link is made up of 2 elements. The first element is a text with the .o-scroll-up-text class, shown only on desktop display (you can change the breakpoint if needed). The second element is the arrow up icon, with the .o-scroll-up-icon class. For accessibility reasons, add a consistant title to the link, and add aria-hidden='true' to the icon.
@@ -575,7 +576,7 @@
Scroll up auto display
Scroll up static
Displays a link in the page with the arrow up icon.
-
Adds a link in the page with the o-scroll-up and static class.
+
Adds a link in the page with the o-scroll-up and static class.
You can let the text .o-scroll-up-text display on all devices.
Documentation and examples for adding custom Boosted tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
Reboot, a collection of element-specific CSS changes in a single file, kickstart Boosted to provide an elegant, consistent, and simple baseline to build upon.
Learn about the guiding principles, strategies, and techniques used to build and maintain Boosted so you can more easily customize and extend it yourself.
Guidance and suggestions for using external icon libraries with Boosted.
@@ -628,13 +629,13 @@
Download and adapt your project fo
-
Now you have a Download button at the bottom right but WAIT!!!
+
Now you have a Download button at the bottom right but WAIT!!!
We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
On the top menu bar, click onto Preferences.
By default the font-family is named orange-icons, rename it for your project (MYPROJECT-icons or other) and customize the class prefix by adding your project name to create a unique css selector.
-You also can get Stylesheet variables for scss or less and if you want change the version.
+You also can get Stylesheet variables for scss or less and if you want change the version.
And uncheck IE8 support if you rely on Boosted 4!
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
@@ -865,73 +866,73 @@
All colors
All colors available in Boosted 4, are available as Sass variables and a Sass map in our scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.
-
-
+
+
Blue
-
-
-
+
+
+
Indigo
-
-
-
+
+
+
Purple
-
-
-
+
+
+
Pink
-
-
-
+
+
+
Red
-
-
-
+
+
+
Orange
-
-
-
+
+
+
Yellow
-
-
-
+
+
+
Green
-
-
-
+
+
+
Teal
-
-
-
+
+
+
Cyan
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Here’s how you can use these in your Sass:
@@ -953,39 +954,39 @@
Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted’s scss/_variables.scss file.
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
@@ -673,7 +674,7 @@
Grid options
See how aspects of the Boosted grid system work across multiple devices with a handy table.
-
We have include a security margin for container fluid. The goal is to fit exactly the desired content width at the targetted resolution.
+
We have include a security margin for container fluid. The goal is to fit exactly the desired content width at the targetted resolution.
[comment]: # Boosted mod
[comment]: # Orange grid custom BP values
Components and options for laying out your Boosted project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
An overview of the founding team and core contributors to Bootstrap.
@@ -559,70 +560,70 @@
Team
Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.
Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
Boosted 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
Boosted’s cards provide a flexible and extensible content container with multiple variants and options.
@@ -1254,72 +1255,72 @@
Background and color
Header
-
+
-
+
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
-
+
-
+
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
-
+
-
+
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
-
+
-
+
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
-
+
-
+
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
-
+
-
+
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
-
+
-
+
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
-
+
-
+
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
@@ -1327,72 +1328,72 @@
Dark card title
<divclass="card text-white bg-primary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div>
-
+
<divclass="card-body">
-
+
<h5class="card-title">Primary card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><divclass="card text-white bg-secondary mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div>
-
+
<divclass="card-body text-white">
-
+
<h5class="card-title">Secondary card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><divclass="card text-white bg-success mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div>
-
+
<divclass="card-body">
-
+
<h5class="card-title">Success card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><divclass="card text-white bg-danger mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div>
-
+
<divclass="card-body text-white">
-
+
<h5class="card-title">Danger card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><divclass="card text-white bg-warning mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div>
-
+
<divclass="card-body">
-
+
<h5class="card-title">Warning card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><divclass="card text-white bg-info mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div>
-
+
<divclass="card-body">
-
+
<h5class="card-title">Info card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><divclass="card bg-light mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div>
-
+
<divclass="card-body">
-
+
<h5class="card-title">Light card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><divclass="card text-white bg-dark mb-3"style="max-width: 18rem;"><divclass="card-header">Header</div>
-
+
<divclass="card-body text-white">
-
+
<h5class="card-title">Dark card title</h5><pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div>
diff --git a/docs/4.3/components/carousel/index.html b/docs/4.3/components/carousel/index.html
index de867280da..cee79a688c 100644
--- a/docs/4.3/components/carousel/index.html
+++ b/docs/4.3/components/carousel/index.html
@@ -74,7 +74,7 @@
tarteaucitron.user.googletagmanagerId = 'GTM-P6H78BQ';
(tarteaucitron.job = tarteaucitron.job || []).push('googletagmanager');
dataLayer = [{
-'site_name': 'accessibility-boosted',
+'site_name': 'accessibility-boosted',
'phase': 'prod', // dev, qa, prod
'page_type': 'doc', // type de page, optionnel
'page_title': document.title // obligatoire pour pages dynamiques
@@ -548,7 +548,7 @@
-
+
-
+
+ Explore OUDS
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
@@ -810,7 +811,7 @@
Contextual classes
Dapibus ac facilisis in
-
+
A simple primary list group item
A simple secondary list group item
A simple success list group item
@@ -824,7 +825,7 @@
Contextual classes
<ulclass="list-group"><liclass="list-group-item">Dapibus ac facilisis in</li>
-
+
<liclass="list-group-item list-group-item-primary">A simple primary list group item</li><liclass="list-group-item list-group-item-secondary">A simple secondary list group item</li><liclass="list-group-item list-group-item-success">A simple success list group item</li>
@@ -841,7 +842,7 @@
Documentation and examples for Boosted’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Displays a link at the bottom right of the page after scrolling down one page height.
+
Displays a link at the bottom right of the page after scrolling down one page height.
On desktop this link displays the “Back to top” text and an icon. On mobile it only displays the icon.
Adds a link at the end of the page with the o-scroll-up class. The link is made up of 2 elements. The first element is a text with the .o-scroll-up-text class, shown only on desktop display (you can change the breakpoint if needed). The second element is the arrow up icon, with the .o-scroll-up-icon class. For accessibility reasons, add a consistant title to the link, and add aria-hidden='true' to the icon.
@@ -579,7 +580,7 @@
Scroll up auto display
Scroll up static
Displays a link in the page with the arrow up icon.
-
Adds a link in the page with the o-scroll-up and static class.
+
Adds a link in the page with the o-scroll-up and static class.
You can let the text .o-scroll-up-text display on all devices.
Documentation and examples for adding custom Boosted tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
Reboot, a collection of element-specific CSS changes in a single file, kickstart Boosted to provide an elegant, consistent, and simple baseline to build upon.
Learn about the guiding principles, strategies, and techniques used to build and maintain Boosted so you can more easily customize and extend it yourself.
Guidance and suggestions for using external icon libraries with Boosted.
@@ -632,13 +633,13 @@
Download and adapt your project fo
-
Now you have a Download button at the bottom right but WAIT!!!
+
Now you have a Download button at the bottom right but WAIT!!!
We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
On the top menu bar, click onto Preferences.
By default the font-family is named orange-icons, rename it for your project (MYPROJECT-icons or other) and customize the class prefix by adding your project name to create a unique css selector.
-You also can get Stylesheet variables for scss or less and if you want change the version.
+You also can get Stylesheet variables for scss or less and if you want change the version.
And uncheck IE8 support if you rely on Boosted 4!
Get started with Boosted, the world’s most popular framework for building responsive, mobile-first sites, with BoostedCDN and a template starter page. Fork of Bootstrap
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
@@ -884,73 +885,73 @@
All colors
All colors available in Boosted 4, are available as Sass variables and a Sass map in scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.
-
-
+
+
Blue
-
-
-
+
+
+
Indigo
-
-
-
+
+
+
Purple
-
-
-
+
+
+
Pink
-
-
-
+
+
+
Red
-
-
-
+
+
+
Orange
-
-
-
+
+
+
Yellow
-
-
-
+
+
+
Green
-
-
-
+
+
+
Teal
-
-
-
+
+
+
Cyan
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
Here’s how you can use these in your Sass:
@@ -972,39 +973,39 @@
Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted’s scss/_variables.scss file.
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Components and options for laying out your Boosted project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
Have a need for Boosted’s brand resources? We have a few guidelines we follow, and in turn ask you to follow as well.
@@ -725,11 +726,11 @@
Color palette
Please refer to the accessibility’s color contrast section before trying using this, in order to ensure sufficient contrasts,
and prefer using .text-* and .bg-* utilities to set colors, since they lock color and background-color altogether to ensure sufficient contrasts.
Boosted 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
@@ -644,7 +645,7 @@
Changing the separator
Accessibility
-
Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <p class="sr-only" id="breadcrumb-title">You are here:</p> to describe the type of navigation provided in the <nav aria-labelledby="breadcrumb-title"> element
+
Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as <p class="sr-only" id="breadcrumb-title">You are here:</p> to describe the type of navigation provided in the <nav aria-labelledby="breadcrumb-title"> element
— please notice the id attribute on <p>, then referenced in aria-labelledby on <nav> — as well as applying an aria-current="location" to the last item of the set to indicate the current page.
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
@@ -838,7 +839,7 @@
Contextual classes
Dapibus ac facilisis in
-
+
A simple primary list group item
A simple secondary list group item
A simple success list group item
@@ -851,7 +852,7 @@
Contextual classes
<ulclass="list-group"><liclass="list-group-item">Dapibus ac facilisis in</li>
-
+
<liclass="list-group-item list-group-item-primary">A simple primary list group item</li><liclass="list-group-item list-group-item-secondary">A simple secondary list group item</li><liclass="list-group-item list-group-item-success">A simple success list group item</li>
@@ -867,7 +868,7 @@
Documentation and examples for Boosted’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
@@ -640,7 +641,7 @@
Accessibility
Multiple navigations
-
The nav component should either have an aria-label or aria-labelledy attribute when there is more than one nav in the page. Full Orange’s navbar is a good example, adding the Supra bar above the main navigation.
+
The nav component should either have an aria-label or aria-labelledy attribute when there is more than one nav in the page. Full Orange’s navbar is a good example, adding the Supra bar above the main navigation.
If there’s only one, you can leave as-is.
Displays a link at the bottom right of the page after scrolling down one page height.
-
Adds a link at the end of the page with the o-scroll-up class. The “Back to top” text is only shown on desktop display — but you can change the breakpoint in the d-{breakpoint}-inline-block utility. The arrow up icon is added via CSS.
+
Adds a link at the end of the page with the o-scroll-up class. The “Back to top” text is only shown on desktop display — but you can change the breakpoint in the d-{breakpoint}-inline-block utility. The arrow up icon is added via CSS.
For accessibility reasons, add a title to the link that’s consistent with text content.
Documentation and examples for adding custom Boosted tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
Reboot, a collection of element-specific CSS changes in a single file, kickstart Boosted to provide an elegant, consistent, and simple baseline to build upon.
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Boosted.
@@ -1401,7 +1402,7 @@
Breakpoint specific
Rich content tables
-
Boosted tables may contain icons, thumbnails and checkboxes. To ensure proper layout, avoid using sizes variants in that case: rows’ height should automatically match .table-lg ones.
+
Boosted tables may contain icons, thumbnails and checkboxes. To ensure proper layout, avoid using sizes variants in that case: rows’ height should automatically match .table-lg ones.
Also, when using checkboxes in the first column, add .has-checkbox class to the <table> element to get correct spacing on the first column.
Learn about the guiding principles, strategies, and techniques used to build and maintain Boosted so you can more easily customize and extend it yourself.
Guidance and suggestions for using external icon libraries with Boosted.
-
+
Boosted doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
Preferred
@@ -660,13 +661,13 @@
Download and adapt your project fo
-
Now you have a Download button at the bottom right but WAIT!!!
+
Now you have a Download button at the bottom right but WAIT!!!
We know, you want to download your font but first you need to make some change into preferences to name your font with a name dedicated to YOUR project.
On the top menu bar, click onto Preferences.
By default the font-family is named orange-icons, rename it for your project (MYPROJECT-icons or other) and customize the class prefix by adding your project name to create a unique css selector.
-You also can get Stylesheet variables for scss or less and if you want change the version.
+You also can get Stylesheet variables for scss or less and if you want change the version.
And uncheck IE8 support if you rely on Boosted 4!
Get started with Boosted, a Bootstrap fork — the world’s most popular framework for building responsive, mobile-first sites, with Boosted CDN and a template starter page.
@@ -702,7 +703,7 @@
Starter template
<linkrel="preconnect"href="https://code.jquery.com"crossorigin="anonymous"><linkrel="preconnect"href="https://cdnjs.cloudflare.com"crossorigin="anonymous"><linkrel="preconnect"href="https://cdn.jsdelivr.net"crossorigin="anonymous">
-
+
<!--
Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
Patent and Trademark Office and may be registered in certain other jurisdictions.
diff --git a/docs/4.5/getting-started/javascript/index.html b/docs/4.5/getting-started/javascript/index.html
index 770aa0150b..7fe5ed8c3c 100644
--- a/docs/4.5/getting-started/javascript/index.html
+++ b/docs/4.5/getting-started/javascript/index.html
@@ -34,12 +34,12 @@
-
+
-
-
+
+
-
+
@@ -574,7 +574,7 @@
-
+
Using Boosted for right-to-left website presentation
@@ -620,7 +621,7 @@
Starter template
<linkrel="preconnect"href="https://code.jquery.com"crossorigin="anonymous"><linkrel="preconnect"href="https://cdnjs.cloudflare.com"crossorigin="anonymous"><linkrel="preconnect"href="https://cdn.jsdelivr.net"crossorigin="anonymous">
-
+
<!--
Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
Patent and Trademark Office and may be registered in certain other jurisdictions.
@@ -650,7 +651,7 @@
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
@@ -960,73 +961,73 @@
All colors
All colors available in Boosted 4, are available as Sass variables and a Sass map in scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.
-
-
+
+
Blue
-
-
-
+
+
+
Purple
-
-
-
+
+
+
Pink
-
-
-
+
+
+
Red
-
-
-
+
+
+
Orange
-
-
-
+
+
+
Yellow
-
-
-
+
+
+
Green
-
-
-
+
+
+
Teal
-
-
-
+
+
+
Cyan
-
-
-
-
-
+
+
+
+
+
Orange-2
-
-
-
-
-
-
+
+
+
+
+
+
Here’s how you can use these in your Sass:
@@ -1048,35 +1049,35 @@
Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted’s scss/_variables.scss file.
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Components and options for laying out your Boosted project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
There are several features specified in Web standards which would allow us to make Boosted more robust, elegant, or performant, but aren’t yet implemented in certain browsers, thus preventing us from taking advantage of them.
We publicly list these “most wanted” feature requests here, in the hopes of expediting the process of getting them implemented.
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
-
+
Examples
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts jQuery plugin.
Boosted’s cards provide a flexible and extensible content container with multiple variants and options.
-
+
About
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Boosted 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.
A slideshow component for cycling through elements—images or slides of text—like a carousel.
-
+
How it works
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
Toggle the visibility of content across your project with a few classes and our JavaScript plugins.
-
+
How it works
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.
Toggle contextual overlays for displaying lists of links and more with the Boosted dropdown plugin.
-
+
Overview
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Boosted dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision..
Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Boosted’s JavaScript or use boosted.bundle.min.js / boosted.bundle.js which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
-
+
Overview
Boosted’s form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices.
Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
-
+
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.
-
+
Basic example
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
Local navigation is used as a secondary level navigation.
-
+
Default local navigation
Use <ul> element with the .container (or .container-fluid) class, wrapped in a <nav> tag with .o-nav-local class.
You also need to choose a color scheme by setting .navbar-light or .navbar-dark on your <nav> element.
Documentation and examples for Bootstrap’s media object to construct highly repetitive components like blog comments, tweets, and the like.
-
+
Example
The media object helps build complex and repetitive components where some media is positioned alongside content that doesn’t wrap around said media. Plus, it does this with only two required classes thanks to flexbox.
Below is an example of a single media object. Only two classes are required—the wrapping .media and the .media-body around your content. Optional padding and margin can be controlled through spacing utilities.
Documentation and examples for Boosted’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, collapse plugin, and more.
-
+
How it works
Here’s what you need to know before getting started with the navbar:
Documentation and examples for how to use Boosted’s included navigation components.
-
+
Base nav
Navigation available in Boosted share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.
The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.
Footer can be divided in three parts using .o-footer-top, .o-footer-body and .o-footer-bottom classes.
Each footer part must use a .container-fluid or .container depending on page layout.
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.
-
+
Overview
We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping <nav> element to identify it as a navigation section to screen readers and other assistive technologies.
In addition, as pages likely have more than one such navigation section, it’s advisable to provide a descriptive aria-label for the <nav> to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".
Documentation and examples for using Boosted custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
-
+
How it works
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 <progress> element, ensuring you can stack progress bars, animate them, and place text labels over them.
Displays a link at the bottom right of the page after scrolling down one page height.
Adds a link at the end of the page with the o-scroll-up class. The “Back to top” text is only shown on desktop display — but you can change the breakpoint in the d-{breakpoint}-inline-block utility. The arrow up icon is added via CSS.
@@ -401,7 +402,7 @@
Indicate the loading state of a component or page with Boosted spinners, built entirely with HTML, CSS, and no JavaScript.
-
+
About
Boosted “spinners” can be used to show the loading state in your projects. They’re built only with HTML and CSS, meaning you don’t need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, alignment, and sizing can be easily customized with our amazing utility classes.
For accessibility purposes, each loader here includes role="status" and a nested <span class="sr-only">Loading...</span>.
Stepped process bar used for multiple steps forms process
-
+
How to use
Use a nav element with .o-stepbar class, containing an ordered list <ol> with .stepbar-item class on list items.
Be careful to choose short labels when using multiple steps process, otherwise label will be cut to preserve inline layout. More information can be carried on the title attribute of the .stepbar-link.
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
-
+
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They’re built with flexbox, so they’re easy to align and position.
Documentation and examples for adding custom Boosted tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Documentation and examples for displaying related images and text with the figure component in Boosted.
-
+
Anytime you need to display a piece of content—like an image with an optional caption, consider using a <figure>.
Use the included .figure , .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your <img> to make it responsive.
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
-
+
Responsive images
Images in Boosted are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Reboot, a collection of element-specific CSS changes in a single file, kickstart Boosted to provide an elegant, consistent, and simple baseline to build upon.
-
+
Approach
Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more.
Here are our guidelines and reasons for choosing what to override in Reboot:
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Boosted.
-
+
Examples
Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any <table>, then extend with custom styles or our various included modifier classes.
Using the most basic table markup, here’s how .table-based tables look in Boosted. All table styles are inherited in Boosted 4, meaning any nested tables will be styled in the same manner as the parent.
Learn about the guiding principles, strategies, and techniques used to build and maintain Boosted so you can more easily customize and extend it yourself.
-
+
While the getting started pages provide an introductory tour of the project and what it offers, this document focuses on why we do the things we do in Boosted. It explains our philosophy to building on the web so that others can learn from us, contribute with us, and help us improve.
See something that doesn’t sound right, or perhaps could be done better? Open an issue—we’d love to discuss it with you.
A brief overview of Boosted’s features and limitations for the creation of accessible content.
-
+
Boosted provides an easy-to-use framework of ready-made styles, layout tools, and interactive components, allowing developers to create websites and applications that are visually appealing, functionally rich, and accessible out of the box.
Overview and Limitations
The overall accessibility of any project built with Boosted depends in large part on the author’s markup, additional styling, and scripting they’ve included. However, provided that these have been implemented correctly, it should be perfectly possible to create websites and applications with Boosted that fulfill WCAG 2.1 (A/AA/AAA), Section 508 and similar accessibility standards and requirements.
Learn about some of the best practices we’ve gathered from years of working on and using Boosted.
-
+
We’ve designed and developed Boosted 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.
Heads up! This copy is a work in progress.
@@ -301,7 +302,7 @@
Learn about the browsers and devices, from modern to old, that are supported by Boosted, including known quirks and bugs for each.
-
+
Supported browsers
Boosted supports the latest, stable releases of all major browsers and platforms. On Windows, we support Internet Explorer 11 / Microsoft Edge.
Alternative browsers which use the latest version of WebKit, Blink, or Gecko, whether directly or via the platform’s web view API, are not explicitly supported. However, Boosted should (in most cases) display and function correctly in these browsers as well. More specific support information is provided below.
Learn how to use Boosted’s included npm scripts to build our documentation, compile source code, run tests, and more.
-
+
Tooling setup
Boosted uses npm scripts for its build system. Our package.json includes convenient methods for working with the framework, including compiling code, running tests, and more.
To use our build system and run our documentation locally, you’ll need a copy of Boosted’s source files and Node. Follow these steps and you should be ready to rock:
Get started with Boosted, a Bootstrap fork — the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
-
+
Quick start
Looking to quickly add Boosted to your project? Use jsDelivr, a free open source CDN. Using a package manager or need to download the source files? Head to the downloads page.
CSS
@@ -381,7 +382,7 @@
Starter template
<!-- Preconnect to CDNs: remove if not needed --><linkrel="preconnect"href="https://code.jquery.com"crossorigin="anonymous"><linkrel="preconnect"href="https://cdn.jsdelivr.net"crossorigin="anonymous">
-
+<!--
Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
Patent and Trademark Office and may be registered in certain other jurisdictions.
@@ -480,7 +481,7 @@
Bring Boosted to life with our optional JavaScript plugins built on jQuery. Learn about each plugin, our data and programmatic API options, and more.
-
+
Individual or compiled
Plugins can be included individually (using Boosted’s individual js/dist/*.js), or all at once using boosted.js or the minified boosted.min.js (don’t include both).
If you use a bundler (Webpack, Rollup…), you can use /js/dist/*.js files which are UMD ready.
Using Boosted for right-to-left website presentation
-
+
Every release of Boosted ships with a dedicated right-to-left (RTL) version.
Usage
To get a RTL version of a boosted webpage you only need to replace the regular boosted.css file with the RTL counterpart boosted-rtl.css.
@@ -316,7 +317,7 @@
Starter template
<linkrel="preconnect"href="https://code.jquery.com"crossorigin="anonymous"><linkrel="preconnect"href="https://cdn.jsdelivr.net"crossorigin="anonymous">
-
+<!--
Neue Helvetica is a trademark of Monotype Imaging Inc. registered in the U.S.
Patent and Trademark Office and may be registered in certain other jurisdictions.
@@ -354,11 +355,11 @@
Starter template
</main><!-- Optional JavaScript; choose one of the two! -->
-
+<!-- Option 1: jQuery and Boosted Bundle (includes Popper) --><scriptsrc="https://code.jquery.com/jquery-3.5.1.slim.min.js"integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"crossorigin="anonymous"></script><scriptsrc="https://cdn.jsdelivr.net/npm/boosted@4.6.2/dist/js/boosted.bundle.min.js"integrity="sha384-HkgWGiFvphHyETaofVWXX2SP64Dbtv237puflDWHKGBrQg9mSRWItJIt2JkJrPlL"crossorigin="anonymous"></script>
-
+<!-- Option 2: jQuery, Popper, and Boosted JS --><!--
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
@@ -378,7 +379,7 @@
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
-
+
Introduction
In Boosted 3, theming was largely driven by variable overrides in LESS, custom CSS, and a separate theme stylesheet that we included in our dist files. With some effort, one could completely redesign the look of Boosted 3 without touching the core files. Boosted 4 provides a familiar, but slightly different approach.
Now, theming is accomplished by Sass variables, Sass maps, and custom CSS. There’s no more dedicated theme stylesheet; instead, you can enable the built-in theme to add gradients, shadows, and more.
@@ -613,77 +614,77 @@
Color
All colors
All colors available in Boosted 4, are available as Sass variables and a Sass map in scss/_variables.scss file. This will be expanded upon in subsequent minor releases to add additional shades, much like the grayscale palette we already include.
-
+
$Blue#527edb
-
+
$Purple#882ae0
-
+
$Pink#f14095
-
+
$Red#cd3c14
-
+
$Orange#ff7900
-
+
$Yellow#ffd200
-
+
$Green#32c832
-
+
$Teal#1dde8e
-
+
$Cyan#527edb
-
+
$Orange-2#f16e00
-
+
Here’s how you can use these in your Sass:
// With variable
@@ -699,107 +700,107 @@
All colors
Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Boosted’s scss/_variables.scss file.
-
+
$Primary#f16e00
-
+
$Secondary#000
-
+
$Success#32c832
-
+
$Danger#cd3c14
-
+
$Warning#fc0
-
+
$Info#527edb
-
+
$Light#ddd
-
+
Grays
An expansive set of gray variables and a Sass map in scss/_variables.scss for consistent shades of gray across your project. Note that these are “cool grays”, which tend towards a subtle blue tone, rather than neutral grays.
-
+
$gray-100#fafafa
-
+
$gray-200#f6f6f6
-
+
$gray-300#eee
-
+
$gray-400#ddd
-
+
$gray-500#ccc
-
+
$gray-600#999
-
+
$gray-700#666
-
+
$gray-800#595959
-
+
$gray-900#333
-
+
Within scss/_variables.scss, you’ll find Boosted’s color variables and Sass map. Here’s an example of the $colors Sass map:
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
-
+
How it works
Boosted’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
Components and options for laying out your Boosted project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
-
+
Containers
Containers are the most basic layout element in Boosted and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
For faster mobile-friendly and responsive development, Boosted includes dozens of utility classes for showing, hiding, aligning, and spacing content.
-
+
Changing display
Use our display utilities for responsively toggling common values of the display property. Mix it with our grid system, content, or components to show or hide them across specific viewports.
Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.
-
+
Stable changes
Moving from Beta 3 to our stable v4.x release, there are no breaking changes, but there are some notable changes.
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
-
+
Accessibility
When using .text-* and .bg-* utilities, contrasts are locked to ensure they’re sufficient by defining color and background-color altogether.
@@ -410,7 +411,7 @@
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.
-
+
How it works
Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.
Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
-
+
About
Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.
Pro-Tip! You don’t need to include frameborder="0" in your <iframe>s as we override that for you.
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
-
+
Enable flex behaviors
Apply display utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
-
+
Overview
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.
Utility classes that change how users interact with the contents of a website.
-
+
Text selection
Change how the content is selected when the user interacts with it. Note that Internet Explorer and Legacy Edge have no support for the all value for user-select, and as such, .user-select-all is not supported by either browser.
Use screen reader utilities to hide elements on all devices except screen readers.
-
+
Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.
Add or remove shadows to elements with box-shadow utilities.
-
+
Examples
While shadows on components are disabled by default in Boosted and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).
Easily make an element as wide or as tall with our width and height utilities.
-
+
Relative to the parent
Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.
Boosted includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.
-
+
How it works
Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.
Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.
-
+
Add .stretched-link to a link to make its containing block clickable via a ::after pseudo element. In most cases, this means that an element with position: relative; that contains a link with the .stretched-link class is clickable. Please note given how CSS position works, .stretched-link cannot be mixed with most table elements.
Cards have position: relative by default in Bootstrap, so in this case you can safely add the .stretched-link class to a link in the card without any other HTML changes.
Multiple links and tap targets are not recommended with stretched links. However, some position and z-index styles can help should this be required.
Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
-
+
Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.
Control the visibility, without modifying the display, of elements with visibility utilities.
-
+
Set the visibility of elements with our visibility utilities. These utility classes do not modify the display value at all and do not affect layout – .invisible elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.
Boosted is based on Bootstrap — maintained by its founding team and a small group of invaluable core contributors, with the massive support and involvement of their community, including some proud Boosted maintainers and contributors.
Documentation and examples for Boosted’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Documentation and examples for adding custom Boosted tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.