Source Less, JavaScript, and font files, along with our docs. Requires a Less compiler and some setup. Download source. Download Sass. Just use these Bootstrap CDN links. The bootstrap module itself does not export anything. Bootstrap's package. Bootstrap uses Autoprefixer to deal with CSS vendor prefixes. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.
Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations. Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower. Once downloaded, unzip the compressed folder to see the structure of the compiled Bootstrap.
You'll see something like this:. This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. CSS source maps bootstrap. Fonts from Glyphicons are included, as is the optional Bootstrap theme.
More specifically, it includes the following and more:. Beyond that, any other included file provides support for packages, license information, and development. Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more. To install Grunt, you must first download and install node. As a Bootstrap user, this is normally the command you want. Watches the Less source files and automatically recompiles them to CSS whenever you save a change.
Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via jekyll serve. Requires Jekyll. Usually only necessary if you're hacking on Bootstrap itself. Then, rerun npm install. Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.
Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs. Create a custom navbar with justified links. Heads up! Not too Safari friendly. It automatically checks for several common HTML mistakes in webpages that are using Bootstrap in a fairly "vanilla" way. Consider adding Bootlint to your Bootstrap web development toolchain so that none of the common mistakes slow down your project's development.
Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.
You can also follow getbootstrap on Twitter for the latest gossip and awesome music videos. Bootstrap automatically adapts your pages for various screen sizes. Here's how to disable this feature so your page works like this non-responsive example.
You'll still need Respond. This disables the "mobile site" aspects of Bootstrap. We've applied these steps to an example. Read its source code to see the specific changes implemented. This is done by escaping the context of the web application; the web application then delivers that data to its users along with other trusted dynamic content, without validating it. Injecting malicious code is the most prevalent manner by which XSS is exploited; for this reason, escaping characters in order to prevent this manipulation is the top method for securing code against this vulnerability.
Escaping means that the application is coded to mark key characters, and particularly key characters included in user input, to prevent those characters from being interpreted in a dangerous context. The most prominent use of XSS is to steal cookies source: OWASP HttpOnly and hijack user sessions, but XSS exploits have been used to expose sensitive information, enable access to privileged services and functionality and deliver malware.
Affected versions of this package are vulnerable to Cross-site Scripting XSS via the tooltip data-viewport attribute. Affected versions of this package are vulnerable to Cross-site Scripting XSS via the affix configuration target property. Affected versions of this package are vulnerable to Cross-site Scripting XSS via the data-target attribute.
Affected versions of this package are vulnerable to Cross-site Scripting XSS via the tooltip , collapse and scrollspy plugins. Test bootstrap 3. In regular button groups, margin-left: -1px is used to stack the borders instead of removing them. However, margin doesn't work with display: table-cell.
As a result, depending on your customizations to Bootstrap, you may wish to remove or re-color the borders. To get around that, wrap each button in another. Use any button to trigger a dropdown menu by placing it within a.
Button dropdowns require the dropdown plugin to be included in your version of Bootstrap. Similarly, create split button dropdowns with the same markup changes, only with a separate button. When using tooltips or popovers on elements within an. Do not mix form groups or grid column classes directly with input groups. Instead, nest the input group inside of the form group or grid-related element.
Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies. The examples in this section provide a few suggested, case-specific approaches. Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple form-controls in a single input group. Add the relative form sizing classes to the. Buttons in input groups are a bit different and require one extra level of nesting. Instead of. This is required due to default browser styles that cannot be overridden. Navs available in Bootstrap have shared markup, starting with the base.
Swap modifier classes to switch between each style. For tabs with tabbable areas, you must use the tabs JavaScript plugin. The markup will also require additional role and ARIA attributes — see the plugin's example markup for further details. Easily make tabs or pills equal widths of their parent at screens wider than px with. On smaller screens, the nav links are stacked.
As of v8. This bug is also shown in the justified nav example. For any nav component tabs or pills , add. Use custom JavaScript to disable links here. Navbars are responsive meta components that serve as navigation headers for your application or site.
They begin collapsed and are toggleable in mobile views and become horizontal as the available viewport width increases. Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row.
To resolve this, you can:. If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the. The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
The navbar collapses into its vertical mobile view when the viewport is narrower than grid-float-breakpoint , and expands into its horizontal non-mobile view when the viewport is at least grid-float-breakpoint in width. The default value is px the smallest "small" or "tablet" screen.
Since the. Place form content within. Use the alignment options to decide where it resides within the navbar content. As a heads up,. Some form controls, like input groups, may require fixed widths to be show up properly within a navbar. There are some caveats regarding using form controls within fixed elements on mobile devices. See our browser support docs for details. For these inline forms, you can hide the labels using the. There are further alternative methods of providing a label for assistive technologies, such as the aria-label , aria-labelledby or title attribute.
If none of these is present, screen readers may resort to using the placeholder attribute, if present, but note that use of placeholder as a replacement for other labelling methods is not advised.
Add the. Like the standard button classes ,. However, neither. Wrap strings of text in an element with. For folks using standard links that are not within the regular navbar navigation component, use the.
Align nav links, forms, buttons, or text, using the. Both classes will add a CSS float in the specified direction. These classes are mixin-ed versions of.
Navbars currently have a limitation with multiple. To properly space content, we use negative margin on the last. When there are multiple elements using that class, these margins don't work as intended. Try out your own values or use our snippet below.
Tip: By default, the navbar is 50px high. Create a full-width navbar that scrolls away with the page by adding. Unlike the. Provide pagination links for your site or app with the multi-page pagination component, or the simpler pager alternative.
Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas. Links are customizable for different circumstances.
Fancy larger or smaller pagination? Quick previous and next links for simple pagination implementations with light markup and styles. It's great for simple sites like blogs or magazines. Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own inline-block element like an icon. The way around this is setting display: inline-block;.
For context and an example, see Showing the top 5 popular GitHub repositories that depend on bootstrap:. We're looking for feedback from developers like you. Take the survey. Skip To Content. Toggle navigation. This package has at least one vulnerability with moderate severity. It may lead to specific problems in your project.
0コメント