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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Components
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
-
+
@@ -127,1322 +130,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 +2616,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 +2630,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 +3104,7 @@
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
-
+
@@ -190,7 +193,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 +202,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 +1751,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
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Getting started
An overview of Bootstrap, how to download and use, basic templates and examples, and more.
-
+
@@ -119,7 +122,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 +308,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 +572,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 +599,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 +640,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 +675,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 +794,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 +1070,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Components
Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.
-
+
@@ -137,1322 +140,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 +2626,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 +2640,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 +3114,7 @@
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
-
+
@@ -200,7 +203,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 +212,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 +1791,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
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Getting started
An overview of Bootstrap, how to download and use, basic templates and examples, and more.
-
+
@@ -129,7 +132,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 +318,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 +609,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 +650,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 +685,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 +1080,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
JavaScript
Bring Bootstrap's components to life with over a dozen custom jQuery plugins. Easily include them all, or one by one.
-
+
@@ -285,15 +288,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..900afb4e66 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..359975da07 100644
--- a/docs/4.0/components/card/index.html
+++ b/docs/4.0/components/card/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
List 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.
@@ -588,7 +591,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 +605,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 +622,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 +930,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..5e82a6c27c 100644
--- a/docs/4.0/components/local-navigation/index.html
+++ b/docs/4.0/components/local-navigation/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Navbar
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 +1284,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..bd16f63d0d 100644
--- a/docs/4.0/components/navs/index.html
+++ b/docs/4.0/components/navs/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Scroll up
Back to top component to be used on longer pages
Scroll up auto display
-
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 +435,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 +452,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..4892ee5097 100644
--- a/docs/4.0/components/scrollspy/index.html
+++ b/docs/4.0/components/scrollspy/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Scrollspy
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
@@ -770,7 +773,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..26ce645d7f 100644
--- a/docs/4.0/components/stepbar/index.html
+++ b/docs/4.0/components/stepbar/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Tooltips
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 +782,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..135746d8db 100644
--- a/docs/4.0/content/code/index.html
+++ b/docs/4.0/content/code/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Images
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 +487,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..b20dc165d7 100644
--- a/docs/4.0/content/reboot/index.html
+++ b/docs/4.0/content/reboot/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Reboot
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 +812,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..c3782c2cb0 100644
--- a/docs/4.0/content/tables/index.html
+++ b/docs/4.0/content/tables/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Typography
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
@@ -480,7 +483,7 @@
Headings
Mobile size
-
+
h1. Boosted heading
@@ -521,7 +524,7 @@
Headings
h6. Boosted heading
Bold 1rem (16px)
-
Bold .875rem (14px)
+
Bold .875rem (14px)
@@ -947,7 +950,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..31313132c6 100644
--- a/docs/4.0/extend/approach/index.html
+++ b/docs/4.0/extend/approach/index.html
@@ -401,9 +401,12 @@
-
+
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
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 +488,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..19d2d02852 100644
--- a/docs/4.0/extend/icons/index.html
+++ b/docs/4.0/extend/icons/index.html
@@ -401,9 +401,12 @@
-
+
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Icons
Guidance and suggestions for using external icon libraries with Bootstrap.
@@ -483,13 +486,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 +516,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..97aa637d33 100644
--- a/docs/4.0/extend/index.html
+++ b/docs/4.0/extend/index.html
@@ -401,9 +401,12 @@
-
+
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Extend
@@ -413,7 +416,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..26cdd24081 100644
--- a/docs/4.0/getting-started/accessibility/index.html
+++ b/docs/4.0/getting-started/accessibility/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
JavaScript
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 +533,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..81b53a3606 100644
--- a/docs/4.0/getting-started/rtl/index.html
+++ b/docs/4.0/getting-started/rtl/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Theming Boosted
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
@@ -698,73 +701,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 +789,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 +830,25 @@
Grays
-
+
100
-
+
200
-
+
300
-
+
400
-
+
500
-
+
600
-
+
700
-
+
800
-
+
900
-
+
@@ -973,7 +976,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..1f05d6f3c5 100644
--- a/docs/4.0/getting-started/webpack/index.html
+++ b/docs/4.0/getting-started/webpack/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Grid system
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 +531,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 +1648,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..f132ca6c72 100644
--- a/docs/4.0/layout/media-object/index.html
+++ b/docs/4.0/layout/media-object/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Overview
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 +582,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..cc65e1d116 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 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Utilities for layout
For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.
@@ -438,7 +441,7 @@
Toggle visibility
-
+
Back to top
diff --git a/docs/4.0/migration/index.html b/docs/4.0/migration/index.html
index ed0422f427..5998a97065 100644
--- a/docs/4.0/migration/index.html
+++ b/docs/4.0/migration/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Migrating to v4
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 +926,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..2afa030c55 100644
--- a/docs/4.0/utilities/borders/index.html
+++ b/docs/4.0/utilities/borders/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Display property
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 +573,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..7929c8dc84 100644
--- a/docs/4.0/utilities/embed/index.html
+++ b/docs/4.0/utilities/embed/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Flex
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 +1201,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..f6faca47c7 100644
--- a/docs/4.0/utilities/float/index.html
+++ b/docs/4.0/utilities/float/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Float
Toggle floats on any element, across any breakpoint, using our responsive float utilities.
@@ -489,7 +492,7 @@
Responsive
-
+
Back to top
diff --git a/docs/4.0/utilities/image-replacement/index.html b/docs/4.0/utilities/image-replacement/index.html
index 7a11fe1a7b..608e5cea23 100644
--- a/docs/4.0/utilities/image-replacement/index.html
+++ b/docs/4.0/utilities/image-replacement/index.html
@@ -401,14 +401,17 @@
-
+
-
+
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Image replacement
Swap text for background images with the image replacement class.
@@ -433,7 +436,7 @@
Back to top
diff --git a/docs/4.0/utilities/position/index.html b/docs/4.0/utilities/position/index.html
index 8939fa68d6..c87aa0fe4a 100644
--- a/docs/4.0/utilities/position/index.html
+++ b/docs/4.0/utilities/position/index.html
@@ -401,7 +401,7 @@
-
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Migrating to Boosted v4
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
List 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.
@@ -583,7 +586,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 +600,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 +617,7 @@
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Navbar
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Scroll up
Back to top component to be used on longer pages
Scroll up auto display
-
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 +440,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Tooltips
Documentation and examples for adding custom Boosted tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Images
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Reboot
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Approach
Learn about the guiding principles, strategies, and techniques used to build and maintain Boosted so you can more easily customize and extend it yourself.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Icons
Guidance and suggestions for using external icon libraries with Boosted.
@@ -490,13 +493,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!
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Theming Boosted
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
@@ -717,73 +720,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 +808,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Grid system
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 +537,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
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Overview
Components and options for laying out your Boosted project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Migrating to v4
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Display property
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Flex
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Team
An overview of the founding team and core contributors to Bootstrap.
@@ -555,70 +558,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Migrating to Boosted v4
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
List 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.
@@ -721,7 +724,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 +738,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 +755,7 @@
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Navbar
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Scroll up
Back to top component to be used on longer pages
Scroll up auto display
-
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 +578,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Tooltips
Documentation and examples for adding custom Boosted tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Images
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Reboot
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Approach
Learn about the guiding principles, strategies, and techniques used to build and maintain Boosted so you can more easily customize and extend it yourself.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Icons
Guidance and suggestions for using external icon libraries with Boosted.
@@ -628,13 +631,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!
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Theming Boosted
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
@@ -865,73 +868,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 +956,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Grid system
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 +676,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
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Overview
Components and options for laying out your Boosted project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Migrating to v4
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Display property
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Flex
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Team
An overview of the founding team and core contributors to Bootstrap.
@@ -559,70 +562,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Migrating to Boosted v4
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Cards
Boosted’s cards provide a flexible and extensible content container with multiple variants and options.
@@ -1254,72 +1257,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 +1330,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..262175142c 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 @@
-
+
-
+
+
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
List 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.
@@ -810,7 +813,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 +827,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 +844,7 @@
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Navbar
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Scroll up
Back to top component to be used on longer pages
Scroll up auto display
-
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 +582,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Tooltips
Documentation and examples for adding custom Boosted tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Images
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Reboot
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Approach
Learn about the guiding principles, strategies, and techniques used to build and maintain Boosted so you can more easily customize and extend it yourself.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Icons
Guidance and suggestions for using external icon libraries with Boosted.
@@ -632,13 +635,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!
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Introduction
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
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Theming Boosted
Customize Boosted 4 with our new built-in Sass variables for global style preferences for easy theming and component changes.
@@ -884,73 +887,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 +975,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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Grid system
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Overview
Components and options for laying out your Boosted project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Migrating to v4
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Display property
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.
+ A new Orange Unified Design system is being developed. Explore OUDS Web
+
Flex
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.
A new Orange Unified Design system is being developed. Explore OUDS Web
+
Orange brand guidelines
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 +729,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.
A new Orange Unified Design system is being developed. Explore OUDS Web
+
Migrating to Boosted v4
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.
A new Orange Unified Design system is being developed. Explore OUDS Web
+
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
@@ -644,7 +648,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.
A new Orange Unified Design system is being developed. Explore OUDS Web
+
List 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.
@@ -838,7 +842,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 +855,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 +871,7 @@
-
+
close the menu
-
Mark Otto @mdo
Jacob Thornton @fat
Chris Rebert @cvrebert
XhmikosR @xhmikosr
Patrick H. Lauke @patrickhlauke
Johann-S @johann-s
Andres Galante @andresgalante
Thomas McDonald @thomas-mcdonald
Gleb Mazovetskiy @glebm
Mark Otto @mdo
-
+
Jacob Thornton @fat
-
+
Chris Rebert @cvrebert
-
+
XhmikosR @xhmikosr
-
+
Patrick H. Lauke @patrickhlauke
-
+
Gleb Mazovetskiy @glebm
-
+
Johann-S @johann-s
-
+
Andres Galante @andresgalante
-
+
Martijn Cuppens @martijncuppens
-
+
