Giter VIP home page Giter VIP logo

bootstrap-css's Introduction

npm version

A css module compatible version of bootstrap. You will need to use react-css-modules to make use of the class names as bootstrap classes are not camelCase.

It would be possible to make a version compatible to just css modules in the future.

Version

Every attempt will be made to keep the versions in sync with bootstrap.

3.3.7 uses latest bootstrap 3 v3.3.7

4.0.0-alpha.5 uses latest bootstrap 4 4.0.0-alpha.6

NOTE: Apologies I made a mistake publishing 4.0.0-alpha.6 as there was a bug importing the images module in index.js. I unpublished the package, not realizing that you can never republish the same version of a module.

So use 4.0.0-alpha.5... but it actually imports bootstrap 4.0.0-alpha.6. Remember this is just importing bootstrap. Beta is coming out very soon then we can publish that and forget that I made this mistake... sorry.

Installation

npm install [email protected] --save-dev

Usage

Simply import your bootstrap css modules

import { alert, buttons, jumbotron } from 'bootstrap-css'

Then use it for styling your elements.

<div styleName='jumbotron'>
  <h1>Hello, world!</h1>
  <a styleName='btn btn-primary btn-lg'>Learn more</a>
  <div styleName='alert alert-info'>...</div>
</div>

Example

Check out the full working example here

cd example
npm start

Development

npm install
npm run build

Bootstrap modules

The sass modules from bootstrap have each been installed from bootstrap and compiled to plain css versions, so will need no preprocessing or autoprefixing.

The following modules are available to be imported and used, just as in the bootstrap docs: css & components

Note: glyphicons are currently not implemented, this is a bit tricky to do with css modules. An idea could be to use svg loader to load the fonts, any help on this appreciated, however currently these should be loaded as a seperate glyphicon.css module, most likely global, pointing to your font paths.

  • alert
  • badge
  • breadcrumb
  • buttonGroup
  • buttons
  • card
  • carousel
  • close
  • code
  • customForms
  • custom
  • dropdown
  • forms
  • grid
  • images
  • inputGroup
  • jumbotron
  • listGroup
  • media
  • modal
  • nav
  • navbar
  • normalize
  • pagination
  • popover
  • print
  • progress
  • reboot
  • responsiveEmbed
  • tables
  • tooltip
  • transitions
  • type
  • utilities

License

MIT

bootstrap-css's People

Contributors

fdiskas avatar jameszmartin avatar snyk-bot avatar svnm avatar terencechow avatar

Watchers

 avatar  avatar  avatar

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.