53

http://twitter.github.com/bootstrap/base-css.html

See all the example elements, like h1, h2, h3, inputs, etc?

I'm looking for a simple webpage that has every single Bootstrap inputs/forms/elements/etc on it, and nothing else.

Then I can get our designer to modify the base CSS file with his own styles, and can refresh the asset page to see all of his changes and how the entire style guide is shaping up.

It'd be very helpful for our team to refer to, and for our client, so he can see our entire 'look and feel' on one consolidated page.

Does such a page exist anywhere??

Aliaksandr Sushkevich
  • 11,550
  • 7
  • 37
  • 44
user72245
  • 777
  • 1
  • 7
  • 9
  • 18
    People don't seem to be understanding the question here. What the op is asking for would be incredibly useful, a single page you can have on your site (maybe an admin page) that shows every bootstrap element. We're basically talking about the pages at http://twitter.github.io/bootstrap/ but with your styling applied. Think an automatic style guide. – opsb Apr 16 '13 at 16:34

7 Answers7

43

At time of writing, this is a good one for BS3 http://bootply.com/render/71500

Update Decembre 2013: Bootswatch has a page that is updated regularly http://bootswatch.com/default/

Update March 2018: Bootswatch has been updated for BS4.

David De Sloovere
  • 3,415
  • 2
  • 24
  • 27
  • 2
    This one used version 3-rc1, it looks bad rendered with version 3.0.0,. Here's a similar document that renders nicely with 3.0.0: https://github.com/divshot/bootstrap-theme-white-plum/blob/master/examples/kitchen-sink.html – Thor Sep 02 '13 at 14:11
  • 4
    Here's a demo of the above source: http://code.divshot.com/bootstrap-theme-white-plum/examples/kitchen-sink.html – Thor Sep 02 '13 at 14:19
  • 1
    This one is based on 3.0.0 - http://bootply.com/65566 – Carol Skelly Nov 04 '13 at 20:51
  • 1
    **Updated** for the latest **Bootstrap 4**: https://www.codeply.com/go/fZsVG07ACV – Carol Skelly May 24 '18 at 15:57
  • I am working on one here [bootstrapononepage](https://bootstrapononepage.github.io) –  Jul 17 '20 at 19:03
  • @Peter: your link is broken :( – Prid Feb 04 '22 at 17:52
13

Bootstrap TLDR contains all components in one page: https://anvoz.github.io/bootstrap-tldr/

It's on Github as well: https://github.com/anvoz/bootstrap-tldr

Jan Beck
  • 1,000
  • 7
  • 13
7

I have been looking for a similar thing. The best I've found is this website, which also allows you to edit the css on it.

http://pikock.github.io/bootstrap-magic/app/index.html#!/editor

alexjj
  • 79
  • 1
  • 4
2

I had the exact same need, bootstrap has this ready for you:

1) go to http://twitter.github.io/bootstrap/getting-started.html and download Bootstrap Source

2) unzip and navigate to "less\tests"

3) there you'll find, as bootstrap puts it "One stop shop for quick debugging and edge-case tests of CSS"

gfilippou
  • 129
  • 2
  • 4
2

I couldn't find one, so I created my own. I basically combined all the example pages of the documentation and stripped out all the descriptions and codes. I also removed some duplicates.

Based on Bootstrap v4.0.0-alpha.6

https://github.com/gavsiu/bootstrap-demo

gavsiu
  • 757
  • 5
  • 9
  • 27
1

What you could do is customise the bootstrap docs site to use your stylesheet. It's included in the bootstrap repo at (on github at https://github.com/twitter/bootstrap/blob/master/docs/index.html).

To use a different stylesheet you'll need to update https://github.com/twitter/bootstrap/blob/master/docs/templates/layout.mustache to point to your stylesheet:

<!-- Le styles -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
<link href="assets/css/docs.css" rel="stylesheet">
<link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">
<!-- add your stylesheet here to override -->

and then build using:

$ node docs/build production
opsb
  • 29,325
  • 19
  • 89
  • 99
1

take a look here, a full list of CSS and components, with some explanation and code snipets:

http://codepen.io/letanure/full/WxwaZP/

Some days ago I need the same thing, dont find anything as I need, so I created this one.

randon piece of code, because stackoverflow require if post a link to codepen 

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Bootstrap all elements</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</head>

<body>
Luiz Tanure
  • 11
  • 1
  • 1