Giter Site home page Giter Site logo

twbs / bootstrap Goto Github PK

View Code? Open in Web Editor NEW
167.2K 6.8K 78.3K 254.87 MB

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Home Page: https://getbootstrap.com

License: MIT License

JavaScript 38.26% HTML 32.34% CSS 13.23% PowerShell 0.04% SCSS 16.13%
css bootstrap javascript html scss css-framework sass

bootstrap's Introduction

Bootstrap logo

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.
Explore Bootstrap docs »

Report bug · Request feature · Themes · Blog

Bootstrap 5

Our default branch is for development of our Bootstrap 5 release. Head to the v4-dev branch to view the readme, documentation, and source code for Bootstrap 4.

Table of contents

Quick start

Several quick start options are available:

Read the Getting started page for information on the framework contents, templates, examples, and more.

Status

Build Status npm version Gem version Meteor Atmosphere Packagist Prerelease NuGet Coverage Status CSS gzip size CSS Brotli size JS gzip size JS Brotli size Backers on Open Collective Sponsors on Open Collective

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

Download contents
bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-grid.rtl.css
│   ├── bootstrap-grid.rtl.css.map
│   ├── bootstrap-grid.rtl.min.css
│   ├── bootstrap-grid.rtl.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap-reboot.rtl.css
│   ├── bootstrap-reboot.rtl.css.map
│   ├── bootstrap-reboot.rtl.min.css
│   ├── bootstrap-reboot.rtl.min.css.map
│   ├── bootstrap-utilities.css
│   ├── bootstrap-utilities.css.map
│   ├── bootstrap-utilities.min.css
│   ├── bootstrap-utilities.min.css.map
│   ├── bootstrap-utilities.rtl.css
│   ├── bootstrap-utilities.rtl.css.map
│   ├── bootstrap-utilities.rtl.min.css
│   ├── bootstrap-utilities.rtl.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.esm.js
    ├── bootstrap.esm.js.map
    ├── bootstrap.esm.min.js
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

We provide compiled CSS and JS (bootstrap.*), as well as compiled and minified CSS and JS (bootstrap.min.*). Source maps (bootstrap.*.map) are available for use with certain browsers' developer tools. Bundled JS files (bootstrap.bundle.js and minified bootstrap.bundle.min.js) include Popper.

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Documentation

Bootstrap's documentation, included in this repo in the root directory, is built with Hugo and publicly hosted on GitHub Pages at https://getbootstrap.com/. The docs may also be run locally.

Documentation search is powered by Algolia's DocSearch.

Running documentation locally

  1. Run npm install to install the Node.js dependencies, including Hugo (the site builder).
  2. Run npm run test (or a specific npm script) to rebuild distributed CSS and JavaScript files, as well as our docs assets.
  3. From the root /bootstrap directory, run npm run docs-serve in the command line.
  4. Open http://localhost:9001/ in your browser, and voilà.

Learn more about using Hugo by reading its documentation.

Documentation for previous releases

You can find all our previous releases docs on https://getbootstrap.com/docs/versions/.

Previous releases and their documentation are also available for download.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. All HTML and CSS should conform to the Code Guide, maintained by Mark Otto.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Community

Get updates on Bootstrap's development and chat with the project maintainers and community members.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, Bootstrap is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we adhere to those rules whenever possible.

See the Releases section of our GitHub project for changelogs for each release version of Bootstrap. Release announcement posts on the official Bootstrap blog contain summaries of the most noteworthy changes made in each release.

Creators

Mark Otto

Jacob Thornton

Thanks

BrowserStack

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!

Netlify

Thanks to Netlify for providing us with Deploy Previews!

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

OC sponsor 0 OC sponsor 1 OC sponsor 2 OC sponsor 3 OC sponsor 4 OC sponsor 5 OC sponsor 6 OC sponsor 7 OC sponsor 8 OC sponsor 9

Backers

Thank you to all our backers! 🙏 [Become a backer]

Backers

Copyright and license

Code and documentation copyright 2011–2024 the Bootstrap Authors. Code released under the MIT License. Docs released under Creative Commons.

bootstrap's People

Contributors

andresgalante avatar bardiharborow avatar coliff avatar cvrebert avatar dependabot-preview[bot] avatar dependabot[bot] avatar fat avatar ffoodd avatar geosot avatar gijsbotje avatar glebm avatar hnrch02 avatar johann-s avatar julien-deramond avatar juthilo avatar kkirsche avatar louismaximepiton avatar martijncuppens avatar mdo avatar pat270 avatar patrickhlauke avatar pvdlg avatar rohit2sharma95 avatar stevenblack avatar twbs-grunt avatar vsn4ik avatar xhmikosr avatar ysds avatar zalog avatar zlatanvasovic avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bootstrap's Issues

Alternative approach to the grid (less code and IE6 support)

Hey. You might be interested in an alternative approach to creating the grid that uses negative margins. Removes the need for all those :first-child margin overrides. It shouldn't be problematic, especially since people should be using the grid classes in isolation, but you might want to kick the tyres a bit. I dropped the !important because I didn't think it was needed, but I might have overlooked something.

Edit: And if you consistently use the column class (replace columns), the CSS could be further simplified.

.row {
    margin: 0 -20px;
    *zoom: 1;
}

.row:after {
    display: table;
    clear: both;
    content: "";
}

/* replace with .row .column */
.row .span1,
.row .span2,
.row .span3,
.row .span4,
.row .span5,
.row .span6,
.row .span7,
.row .span8,
.row .span9,
.row .span10,
.row .span11,
.row .span12,
.row .span13,
.row .span14,
.row .span15,
.row .span16 {
    float: left;
    margin-left: 20px;
    display: inline; /* IE6 double margin bug fix. Harmless, but could be sandboxed with * or _ hack */
}

.row .span1 { width: 40px; }
.row .span2 { width: 100px; }
.row .span3 { width: 160px; }
.row .span4 { width: 220px; }
.row .span5 { width: 280px; }
.row .span6 { width: 340px; }
.row .span7 { width: 400px; }
.row .span8 { width: 460px; }
.row .span9 { width: 520px; }
.row .span10 { width: 580px; }
.row .span11 { width: 640px; }
.row .span12 { width: 700px; }
.row .span13 { width: 760px; }
.row .span14 { width: 820px; }
.row .span15 { width: 880px; }
.row .span16 { width: 940px; }

.row .offset1 { margin-left: 80px; }
.row .offset2 { margin-left: 140px; }
.row .offset3 { margin-left: 200px; }
.row .offset4 { margin-left: 260px; }
.row .offset5 { margin-left: 320px; }
.row .offset6 { margin-left: 380px; }
.row .offset7 { margin-left: 440px; }
.row .offset8 { margin-left: 500px; }
.row .offset9 { margin-left: 500px; }
.row .offset10 { margin-left: 620px; }
.row .offset11 { margin-left: 680px; }
.row .offset12 { margin-left: 740px; }

A side-effect is that it also opens up the ability to accidentally support IE6 (for layout at least). Even the topbar, under certain conditions, could be absolutely positioned at the top of the page in IE6. Probably not something you want to roll in, but any developer who uses Bootstrap as a starting point will have the option to include a few easy IE6 tweaks/accommodations if they need to support that browser, because at least the layout would "just work".

Text area resizing issue in Firefox 5 on Linux

If I resize any of the 2 top text areas (the ones with class "copy-code") and release the mouse, the resizing doesn't stop, so whenever the pointer nears that resize handle again, the text area resizes again.

Fix for .btn borders in IE7/8

Not sure if you've rolled this into your fixes branch yet, but I found a way to have the bottom-border-color fallback set in IE7 without getting a black border:

.btn {
    ...
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

And to save you some potential head-scratching, I just spent 30 minutes trying to work out why one set of button elements under "Example buttons" had a black border in IE7 once you set fallback borders...it's because they aren't wrapped in a form!

Lacking support for HTML5 input types

Hi.

Missing support for HTML5 input types (ex. email, phone)

<div class="input">
    <div class="input-prepend">
        <span class="add-on">@</span>
        <input id="xlInput3" class="medium" type="email" size="30" name="xlInput3" />
    </div>
</div>

Append checkbox to password input

When I write, for example

<label for="user[password]">Password</label>
  <div class="input">
    <div class="input-append">
      <input class="xlarge" id="user[password]" name="user[password]" type="password">
      <label class="add-on">
        <input type="checkbox">
      </label>
  </div>
</div>

Why checkbox is not appended to input field?
http://d.pr/FvnD+
I need it to use only one password field on sign up, when checkbox is checked, password is shown.

Incorrect background-clip values

Hey. The background-clip value should be padding-box rather than padding.

It's fine to keep -moz|-webkit-background-clip: padding though, because this value was used in earlier implementations.

Give some love to IE7-8

A lot of things doesn't work in these browsers, mainly "Alerts & Erros", "Pagination" loose the borders, "Dropdown" doesn't work properly and so on.

Simplification for table header generated-content arrow

The existing code contains some unnecessary styles and you can't include HTML entities (i.e. &darr;) as values of the content property. The block below will do the same thing. You should probably consider dropping the tags from the selectors too.

.zebra-striped .header:after {
  content: "";
  float: right;
  margin-top: 7px;
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #000 transparent;
  visibility: hidden;
  -webkit-box-shadow: 0 1px 0 #fff;
  -moz-box-shadow: 0 1px 0 #fff;
  box-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=30);
  -khtml-opacity: 0.3;
  -moz-opacity: 0.3;
  opacity: 0.3;
}

Thanks

Bold links aren't bold

Because there's an explicit setting of font-weight: normal for most elements, doing this:

<p>This is a <strong>very <a href="#">important</a> section</strong>.</p>

Results in "very" and "section" being bold, but not "important".

<address /> is used incorrectly.

The address element is used for contact information and not for addresses. From the HTML5 Spec:

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole. ... The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information.

Zebra-striped table not working

Zebra-striped table doesn't work here, it's the same normal table, not even in the docs page online.

Tried with Firefox 6, Chrome 13 and IE 9.

Compass

Do you have have any interest/plans to include bootstrap as a compass mixin? I would love to use some of these elements but using less seems redundant for projects that are already using compass to manage their css variables.

Actual detailed documentation

Unless Im just missing it where is the proper docs to explain all that there is to use, and how? Or are people supposed to wade through the CSS and try to figure it all out?

documentation error: small versus cite

The typography documentation about blockquote says:

Be sure to wrap your blockquote around paragraph and small tags. When citing a source, use the small element. The CSS will automatically preface a name with an em dash (—).

But what is actually styled in the CSS is the <cite> tag:

blockquote cite { ... }
blockquote cite:before { ... }

Also the (&mdash;). part renders literally instead of being html-interpreted.

Sass Counterpart

I believe this framework is very well put together and I know its based on LESS but are you thinking about adding an option for the people that use SASS.

Firefox doesn't apply .btn line-height to submit `input`

Unfortunately, Firefox sets the line-height of these elements to line-height:normal !important in the UA stylesheet. That makes it impossible to modify the line-height, so the .btn component should use line-height:normal and rely on changing the padding instead.

Dropdown: fix for IE7/8 dropdown & modified JS

Apologies for the lack of a pull request, I don't work with Less but I thought I'd share this (in case you're interested) before I get around to pushing the CSS adaption I'm playing around with.

IE bug

The IE7/8 dropdown "hiding" bug is caused by the combination of z-index and filter on the fixed-position element. Easiest to drop the filter altogether from .topbar but you could, alternatively, use a wrapper element to control the positioning and z-index separately from the background and other styles.

Modified JS

I've modified the JS for the dropdown to be a bit simpler and a bit more flexible.

This should help make it reusable outside of the topbar, allow it to be used with different HTML elements (but the same overall structure: wrapper, child-trigger, child-show/hide), and have contents other than links (e.g. a settings panel that you might want to keep open while clicking and toggling options).

It would involve decoupling the drop-down styles (or at least the ones needed for the general presentation and behaviour) from the .topbar pattern. They're two different patterns and it would be really handy for the purposes of Bootstrap.

var Bootstrap = {};

Bootstrap.dropdown = (function () {
    var $allMenuEls = $('a.menu');

// Hide all open menus and show the target's menu
    $('body').delegate('a.menu', 'click', function (e) {
        e.preventDefault();

        var $this = $(this),
            $parent = $this.parent();

        $parent.toggleClass('open');
        $allMenuEls.not($this).parent().removeClass('open');
    });

    // Hide all menus when clicking outside of them (i.e on the document)
    $(document).click(function (e) {
        var $target = $(e.target);
        if ($target.parents('.open').length === 0) {
            $allMenuEls.parent().removeClass('open');
        }
        e.stopPropagation();
    });
}());

I'm sure someone with proper JS chops can improve it or fix problems I can't see.

Thanks

Alerts don't close on click?

Shouldn't the basic alerts dismiss upon clicking the 'x' in the upper right corner?

I get a pointer cursor on hovering over, but clicking yields no results.

Perhaps there is some JavaScript I'm missing, but I did not notice any in the assets directory.

Dropdown in Topbar

If I add a dropdown menu to a top navigation bar, the dropdown function is not working... Sample:

<div class="topbar">
  <div class="fill">
    <div class="container">
      <h3><a href="#">Bootstrap</a></h3>

      <ul>
        <li class="active"><a href="#masthead">Overview</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#grid-system">Grid</a></li>
        <li><a href="#layouts">Layouts</a></li>
        <li><a href="#typography">Typography</a></li>

        <li><a href="#tables">Tables</a></li>
        <li><a href="#forms">Forms</a></li>
        <li><a href="#navigation">Navigation</a></li>
        <li><a href="#alerts">Alerts</a></li>
        <li><a href="#popovers">Popovers</a></li>
        <li><a href="#less">Less</a></li>
      </ul>

        <ul class="nav secondary-nav">
        <li class="menu">
          <a href="#" class="menu">Dropdown</a>
          <ul class="menu-dropdown">

            <li><a href="#">Secondary link</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Another link</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>
</div>

Is there something wrong in my code?

Add a default style for .btn with harmful actions

First of all, thanks for releasing that lib, perfect timing.

I tried to integrate it to a real project today and I miss a class for potential harmful buttons ("Delete" ones for instance). Maybe a default style (red?) to compete with the primary (blue) can be added to fix that?

Thanks,
David

Padding issue on form-stacked input error

When adding the error class to an input that is a child of a form with class "form-stacked", there is no margin added to the left of the input so that it doesn't share the border of the red error bound box. Additionally, the label (which is above due to form-stacked) requires additional padding to not overlap the red error bound box.

Updated clearfix

There's a better clearfix hack, why not use it?

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix /
.clearfix:before,
.clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.clearfix:after {
clear: both;
}
/
Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix {
zoom: 1;
}

Fix for alert box gradients in IE7/8

I know you ripped them out in your fix branch at some point, but if you want to put them back in, you can mimic the CSS3 transparent gradients with an extended hex syntax (the first 2 digits indicate the opacity level):

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#15000000');

Also noticed the .alert-message rule has the fallback background-color appearing after, rather than before, the rgba background-color.

Grid not showing correctly in ie 9

With the following code, a row doesn't get displayed correctly - putting the second part on a new line instead of on the same one in ie9. Works fine in Chrome, Firefox and Opera.

<html>
<head>
<title>Boostrap test</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.0.min.css">
</head>
<body>
<div class="topbar">
    <div class="fill">
        <div class="container">
            <h3><a href="#">Test Project</a></h3>
            <ul><li class="active"><a href="#">Home</a><li>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
            </ul>
        </div>
    </div>
</div>
<br /><br /><br />
<div class="container">
    <div class="row">
        <div class="span4 columns"><p>Blah</p></div>
        <div class="span12 columns">
                <div class="alert-message error"><a href="#" class="close">x</a>Test error bar</div>
        </div>
    </div>
</div>
</body>
</html>

Firefox - working: http://i.imgur.com/SsFr0.png
IE9 - not working: http://i.imgur.com/YUrgv.png

b/i element text incorrect

It's still okay to use `<b>` and `<i>` tags in HTML5, but they don't come with inherent styles anymore.

They do. Browser style sheets define both elements, and that formatting is the expected default. I think what you mean is something like:

“It's still okay to use <b> and <i> tags in HTML5, and they don't have to be styled bold and italic respectively (although if there’s a more semantic element, use it).”

Current docs page contains incorrect information re. typographic elements

From http://twitter.github.com/bootstrap/#typography:

Emphasis tags (<strong> and <em>) should be used to add visual distinction between a word or phrase and its surrounding copy. Use <strong> for plain old attention and <em> for slick attention and titles.

This is wrong. As per the HTML5 spec (http://dev.w3.org/html5/spec/Overview.html):

The strong element represents strong importance for its contents.
The em element represents stress emphasis of its contents.

These two tags therefore have semantic meaning - they are not simply for adding "visual distinction" to words or phrases, or whatever "slick" attention is.

Note: It’s still okay to use <b> and <i> tags in HTML5, but they don’t come with inherent styles anymore. <b> is meant to convey importance

This is also wrong - again from the spec:

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood

So the actual specification is almost the exact opposite of your documentation's claims.

Fields with errors look ugly in stacked forms

Quick fix:

form.form-stacked div.error {
  margin-top: 0;
}

But I believe it could look better:

form.form-stacked div.error {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  margin-top: 0;
  margin-left: -10px;
}

Any ideas?

How to combine form elements in modal dialog?

I was wondering what you suggest to combine a form and its elements inside a modal dialog / popover?

Currently I am using the following structure...

<div class="modal">
  <form method="POST">
  <div class="modal-header">
    <h3>...</h3>
  </div>
  <div class="modal-body">
    ...
    <div class="clearfix">
      <label for="foo">Bar</label>
      <input id="foo" name="foo" type="text" value=""/>
    </div>
    ...
  </div>
  <div class="modal-footer">
    <button type="submit" name="finish" value="ok" class="btn primary">Ok</button>
    <button type="submit" name="finish" value="cancel" class="btn">Cancel</button>
  </div>
  </form>
</div>

It works quite nicely, the only issue is that there is white stripe at the bottom, due to ...

form {
  margin-bottom: 18px;
}

Form Layout which are not Forms

Is it possible to add support for having the nice css also available for Input Elements which are not wrapped in a form tag?

I thought about frameworks like GWT which are not using forms but need the nice layout.

Add :focus and :active

Mainly an enhancement for keyboard users by including :focus and :active with the :hover styles.

Nav Disappears in Chrome

When at the top of the page, clicking "Grid" causes the nav to disappear until you begin to scroll. Seems to be isolated to Chrome. Fine in FF and Safari.

Dropdown on nav bar doesn't drop down on click

For some reason, I'm not able to replicate the dropdown on the sample nav bar here.

I even copied the html directly from the source, attached the bootstrap css file and ran in chrome in safari. Both show the dropdown but won't drop down on click...

Wondering if this is an issue for others or if I'm just doing something wrong.

address example suggestion

While the text describing address is clear, using a postal address in the example is liable to mislead people into thinking it’s applicable for any postal address. Also, it’d be more common for contact info to be an email address, no?

Include Example JavaScript

Currently, no example Javascript is included to get the drop-down navigation in the top-bar nav working. Also, there is no example JS to make the pills or tabs actually work.

Malformed linear gradients for .btn

The default .btn class includes an incorrect syntax for all the non-old-WebKit linear gradient declarations. So the standard buttons are flat grey color in every browser except Safari/Chrome.

background-image: -webkit-linear-gradient(#ffffff, color-stop(0.25, #ffffff), #e6e6e6);
background-image: -moz-linear-gradient(#ffffff, color-stop(#ffffff, 0.25), #e6e6e6);

The same error is going to occur for the -ms, -o, and standards versions when you update the generated CSS file.

The correct syntax would be:

background-image: -webkit-linear-gradient(#fff, #fff 25%, #e6e6e6);
background-image: -moz-linear-gradient(#fff, #fff 25%, #e6e6e6);
...

Bootstarp ToolTips script

Bootstrap provides beautiful tooltip classes, but what about it's functionality? Should we write the required script or is there a library for that? Now, the tooltip functionality is easy, but positioning it properly (on top, button or else) is beyond my skills.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.