Bootstrap cheat sheet

Columns, order, visibility

visible-xs-block – make an element visible only for the specified break point. Instead of block you can use inline-block, too. Ex.:
<div class=”clearfix visible-sm-block”></div>

hidden-xs – make an element hidden only for the specified break point

col-xs-offset-6 – offset/space a column from the left side. It’s necessary to reset for the higher breakpoints with col-sm-offset-0. This is the same as adding an empty column (you can specify on which breakpoints it can be hidden or visible), except it’s not as readable/semantical as using the offset class.

col-sm-pull-3 and col-sm-push-3 give you a change to switch the placement of elements around or to make them overalp

Text, inline elements

<p class=”lead”> – make the paragraph stend out by having bigger font-size and line-height

class=”text-left|right|center|justify|nowrap|lowercase|uppercase|capitalize – no need of explanation

<blockquote class=”blockquote-reverse”> – text-align: right; and the border line goes on the right side, too

<ul|ol class=”list-unstyled”> – reset the styling of the list elements – removes margin-left and bullets|numbering

<ul|ol class=”list-inline”> – makes the list elements inline, adds a bit of padding and reset the other styling as in “list-unstyled”

sr-only – makes an element|column visible only for screen readers

class=”page-header” – makes a paragraph lookg like a header with underline
Glyphicons – Tons of icons

HTML elements with altered styling

<mark> – slighly different than the default
<code></code>
<kbd>Ctr + Shift</kbd> (keyboard input, inline element)
<pre></pre> – creates a box. Add class=”pre-scrollable” for bigger blocks of text|code

Images (and text)

class=”img-responsive” – makes an image 100% wide withouth restarizing

class=”center-block” – centers the image in the column

class=”center-block” – slighly rounded corners

class=”img-circle” – border-radius: 50%

class=”img-thumbnail” – gives it border

class=”pull-left|right” – align text to the right or left of the image

Forms

class=”form-control” on an input element makes it 100% wide and moves the label above it. It looks very neat on small columns

<div class=”form-group”> – wrap labels and inputs with this div to give extra spacing from bottom. Super neat!

Make a bunch of radio buttons display inline. Notice that it’s not necessary to add for attribute or id to the input tags

<label class="radio-inline">
	<input type="radio" name="toDrink" value="Water">Water
</label>

How to make an easy sidebar or category list:

1. Wrap inline elements (preferable anchro tags) with <div class=”list-group”>
2. Give each element a list-group-item class.
3. Volia!



<div class="list-group">
	<a href="#.#" class="list-group-item">Johny Stieve <span class="badge">12</span></a>
	<a href="#.#" class="list-group-item">Random Name <span class="label label-info">1</span></a>
	<a href="#.#" class="list-group-item">Imm not creative at all <span class="badge">12</span></a>
	<a href="#.#" class="list-group-item">Okay, that's last one <span class="badge">12</span></a>
</div>


4. Spice it up with label or badge span elements.

list group

Panel

It’s just a div with heading, body and footer area that looks nice



<div class="panel panel-primary">

<div class="panel-heading">

<h3 class="panel-title">Lorem ipsum dolor.</h3>

	</div>


<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet distinctio in velit excepturi modi illo illum natus aut nisi. Molestias.
	</div>


<div class="panel-footer">
		<a href="#.#">Random footer stuff in here</a>
	</div>

</div>

panel

Well

Nearly the same result as panel, besides that it doesn’t support the header and footer classes and has a background color. Use well-lg and well-sm to define how much space there should be between the borders and text.


<div class="well well-lg">


<strong>Lorem ipsum dolor</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam dolore, debitis quis suscipit ex voluptatum laborum dignissimos adipisci sed magni?

</div>

well

The rest of Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *