Grid system
Typography
Code
Tables
Forms
Icons
Buttons
Labels and badges
Helpers

Simple use

There is a responsive 12 columns grid.
Add a set of .row inside your div .container, and put a set of .span[1..12] inside your rows.

Example :

.span1

.span2

.span1

.span3

Nesting columns

You can nest your content with the default grid. Simply add an new .row and a set of .span* within an existing .span* column.
Nested rows should include a set of columns that add up to the number of columns of its parent.

Example :

.span9

.span3

.span1

.span2

.span4

.span1

.span2

.span1

.span2

.span1

Would you like to see a complete grid demo ?

Full-width Elements

You can set images and videos as full-width. Nevermind the screen resolution, the object will take all the width of its parent element.

Full-width container

If you want to add a set of rows that takes all the width of the page, include them inside a div .container-full-width instead of the usual .container.

Full-width pictures

For responsive pictures, use the class .img-full-width directly on the image.

Examples :

Full-width videos

For responsive videos, use the class .video-full-width on a parent div.

Example :

<div class="video-full-width">
  <iframe src="http://www.youtube.com/embed/pj-T_LxSCng?wmode=transparent" frameborder="0"></iframe>
</div>

Heading

All HTML headings, <h1> through <h6> are available.

Example :

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Bold & Italics

You can use strong and em tags.

Alignment classes

You can use class="align-left", class="align-center" and class="align-right".

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a .

Examples :

Gummies jelly-o jelly-o danish sugar plum pudding candy canes.

Topping halvah apple pie sugar plum gummies chupa chups. Candy canes wypas icing tiramisu bear claw apple pie cupcake.

Blockquote with source

Add <cite> tag for identifying the source.

Example :

Chocolate cake cookie marzipan cotton candy. Croissant candy oat cake donut cake faworki candy pie chocolate.
The Cupcake Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
The Cupcake Ipsum

Inline

Wrap inline code with <code>.

Block

Use <pre> for multiple lines of code. For syntax highlighting, look at google-code-prettify.

Example :

<div class="row">
	<div class="span12">
		<p>my paragraph</p>
	</div>
</div>

Just create your tables like usually and you will get them in a beautiful way.

Example :

#	First Name	Last Name	Owner
1	Picchu	Thomas	Nico
2	Doda	Maróti	Hajni
3	Kira	Maróti	Hajni

Nothing exceptional here. You can create horizontal and vertical forms with Ministrap.

Examples :

Form 1
Form 2
Form 3
Form 4
Form 5

<form>
	<input type="text" class="span3 input-large" placeholder="Login"/>
	<input type="text" class="span3 input-large" placeholder="Password"/>
	<div class="input-check"><input type="checkbox" id="remember1" name="remember"/> <label for="remember1">Remember me</label></div>
	<input type="submit" class="btn btn-large btn-blue" value="Login"/>
</form>

<form>
	<input type="text" class="span2" placeholder="Login"/>
	<input type="text" class="span2" placeholder="Password"/>
	<div class="input-check"><input type="checkbox" id="remember2" name="remember"/> <label for="remember2">Remember me</label></div>
	<input type="submit" class="btn" value="Login"/>
</form>

First Name:

Last Name:

E-mail address:

Birthdate:

Picture:

Wypas cupcake tart ice cream bear claw gingerbread sugar plum wypas. Oat cake halvah lollipop sweet roll caramels candy canes jelly beans dessert cotton candy. Cake candy apple pie. Lollipop tart gummi bears caramels croissant caramels dragée. Topping faworki lollipop sweet fruitcake sugar plum cheesecake faworki cotton candy. Pudding pie cookie topping chocolate. Muffin chupa chups sweet oat cake chocolate marshmallow sesame snaps marzipan. Croissant chocolate candy danish bonbon dragée biscuit powder tootsie roll. Danish danish chupa chups. Jelly chocolate bar danish chupa chups liquorice topping dragée dragée bear claw. Sweet roll carrot cake wypas candy pie apple pie. Sesame snaps croissant bonbon topping cake sesame snaps lemon drops chocolate cake jujubes.
					Oat cake tootsie roll lollipop gummies danish wypas lollipop macaroon. Caramels donut sweet pie sweet roll jelly beans candy canes lollipop danish. Pie carrot cake pastry danish dragée halvah dragée liquorice. Bear claw tart lemon drops liquorice applicake. Pie oat cake croissant soufflé pie. Tootsie roll pastry chupa chups liquorice. Sweet roll icing soufflé soufflé ice cream marzipan chocolate soufflé. Jelly beans fruitcake bonbon dragée marshmallow. Muffin jujubes applicake faworki biscuit. Cheesecake soufflé ice cream apple pie toffee tiramisu tiramisu. Cake jelly-o marzipan. Cupcake lollipop lemon drops sugar plum chocolate jelly-o lollipop chupa chups liquorice. Wypas pie bear claw jelly beans danish chupa chups muffin chupa chups croissant. Tiramisu marzipan sweet roll marzipan topping candy lollipop danish gingerbread.
					Sweet sweet dragée marshmallow wypas dragée danish tootsie roll topping. Cupcake bonbon sweet dragée tiramisu. Toffee sweet chupa chups icing wafer liquorice wypas gummi bears sweet. Marshmallow chocolate bar chocolate cake faworki cake. Toffee tiramisu tiramisu. Marshmallow pie cupcake tootsie roll. Applicake jelly-o marzipan liquorice chocolate bar bonbon chocolate cake pudding. Oat cake wafer muffin carrot cake tootsie roll cheesecake. Tart dragée caramels cake caramels lollipop powder gingerbread. Cake gummies marshmallow carrot cake. Candy sweet marzipan jelly beans jujubes lollipop jelly beans soufflé. Wafer bear claw gummi bears.
					Icing chocolate cake wypas caramels cupcake icing jelly beans pastry tart. Pastry sesame snaps gummies danish chocolate cake faworki. Chupa chups dessert faworki tiramisu candy canes chupa chups croissant cake toffee. Wafer chupa chups powder marzipan caramels muffin donut. Gummi bears fruitcake liquorice candy. Sweet brownie icing soufflé faworki liquorice. Soufflé carrot cake gummies jelly dragée. Gummi bears sweet jelly beans cotton candy tiramisu dragée. Caramels gummies tootsie roll muffin. Ice cream dragée croissant toffee dragée powder dragée. Candy donut cookie sesame snaps jelly-o brownie muffin caramels. Sweet roll tootsie roll wypas topping toffee apple pie powder halvah.
					Liquorice liquorice gingerbread caramels ice cream powder chocolate bar candy. Cupcake fruitcake halvah ice cream gummi bears tootsie roll cupcake. Cotton candy danish gingerbread donut pastry tootsie roll jujubes. Wypas gummies soufflé croissant cheesecake topping. Chocolate bar carrot cake halvah apple pie carrot cake cookie. Tootsie roll liquorice chocolate cake wypas pie pastry tiramisu toffee. Bear claw macaroon bonbon cake lemon drops. Bear claw jelly-o bear claw. Lemon drops oat cake soufflé. Faworki sesame snaps pastry. Danish sugar plum gingerbread. Wafer sugar plum pastry jelly cotton candy candy canes toffee. Cupcake chocolate bar sweet donut cake wypas. Sweet roll chocolate cake marshmallow bonbon bonbon.

I accept the ToS

I don't accept the ToS

<form class="well span7 form-vertical">
	<div class="row">
		<div class="span2 align-right">
			<label for="firstname">First Name:</label>
		</div>
		<div class="span4">
			<input type="text" name="firstname" id="firstname" placeholder="John"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">
			<label for="lastname">Last Name:</label>
		</div>
		<div class="span4">
			<input type="text" name="lastname" id="lastname" placeholder="Doe"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">
			<label for="email">E-mail address:</label>
		</div>
		<div class="span4">
			<input type="text" disabled="disabled" name="email" id="email" placeholder="john.doe@provider.com"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">
			<label for="birthdate">Birthdate:</label>
		</div>
		<div class="span4">
			<input type="text" name="birthdate" id="birthdate" placeholder="12/25/1978"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">
			<label for="picture">Picture:</label>
		</div>
		<div class="span4">
			<input type="file" name="picture" id="picture" placeholder="jpg"/>
		</div>
	</div>
	<div class="row">
		<div class="span2 align-right">Terms of Service:</div>
		<div class="span4">
			<textarea disabled="disabled" rows="5" class="terms">Wypas cupcake....</textarea>
			<div class="input-check">
				<input type="radio" name="yesno1" id="yes1" value="yes"/> <label for="yes1">I accept the ToS</label>
			</div>
			<div class="input-check">
				<input type="radio" name="yesno1" id="no1" value="no"/> <label class="check" for="no1">I don't accept the ToS</label>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="span2"></div>
		<div class="span4">
			<input type="submit" class="btn btn-large" value="Register"/>
		</div>
	</div>
</form>

First Name:

Last Name:

E-mail address:

Birthdate:

Wypas cupcake tart ice cream bear claw gingerbread sugar plum wypas. Oat cake halvah lollipop sweet roll caramels candy canes jelly beans dessert cotton candy. Cake candy apple pie. Lollipop tart gummi bears caramels croissant caramels dragée. Topping faworki lollipop sweet fruitcake sugar plum cheesecake faworki cotton candy. Pudding pie cookie topping chocolate. Muffin chupa chups sweet oat cake chocolate marshmallow sesame snaps marzipan. Croissant chocolate candy danish bonbon dragée biscuit powder tootsie roll. Danish danish chupa chups. Jelly chocolate bar danish chupa chups liquorice topping dragée dragée bear claw. Sweet roll carrot cake wypas candy pie apple pie. Sesame snaps croissant bonbon topping cake sesame snaps lemon drops chocolate cake jujubes.
Oat cake tootsie roll lollipop gummies danish wypas lollipop macaroon. Caramels donut sweet pie sweet roll jelly beans candy canes lollipop danish. Pie carrot cake pastry danish dragée halvah dragée liquorice. Bear claw tart lemon drops liquorice applicake. Pie oat cake croissant soufflé pie. Tootsie roll pastry chupa chups liquorice. Sweet roll icing soufflé soufflé ice cream marzipan chocolate soufflé. Jelly beans fruitcake bonbon dragée marshmallow. Muffin jujubes applicake faworki biscuit. Cheesecake soufflé ice cream apple pie toffee tiramisu tiramisu. Cake jelly-o marzipan. Cupcake lollipop lemon drops sugar plum chocolate jelly-o lollipop chupa chups liquorice. Wypas pie bear claw jelly beans danish chupa chups muffin chupa chups croissant. Tiramisu marzipan sweet roll marzipan topping candy lollipop danish gingerbread.
Sweet sweet dragée marshmallow wypas dragée danish tootsie roll topping. Cupcake bonbon sweet dragée tiramisu. Toffee sweet chupa chups icing wafer liquorice wypas gummi bears sweet. Marshmallow chocolate bar chocolate cake faworki cake. Toffee tiramisu tiramisu. Marshmallow pie cupcake tootsie roll. Applicake jelly-o marzipan liquorice chocolate bar bonbon chocolate cake pudding. Oat cake wafer muffin carrot cake tootsie roll cheesecake. Tart dragée caramels cake caramels lollipop powder gingerbread. Cake gummies marshmallow carrot cake. Candy sweet marzipan jelly beans jujubes lollipop jelly beans soufflé. Wafer bear claw gummi bears.
Icing chocolate cake wypas caramels cupcake icing jelly beans pastry tart. Pastry sesame snaps gummies danish chocolate cake faworki. Chupa chups dessert faworki tiramisu candy canes chupa chups croissant cake toffee. Wafer chupa chups powder marzipan caramels muffin donut. Gummi bears fruitcake liquorice candy. Sweet brownie icing soufflé faworki liquorice. Soufflé carrot cake gummies jelly dragée. Gummi bears sweet jelly beans cotton candy tiramisu dragée. Caramels gummies tootsie roll muffin. Ice cream dragée croissant toffee dragée powder dragée. Candy donut cookie sesame snaps jelly-o brownie muffin caramels. Sweet roll tootsie roll wypas topping toffee apple pie powder halvah.
Liquorice liquorice gingerbread caramels ice cream powder chocolate bar candy. Cupcake fruitcake halvah ice cream gummi bears tootsie roll cupcake. Cotton candy danish gingerbread donut pastry tootsie roll jujubes. Wypas gummies soufflé croissant cheesecake topping. Chocolate bar carrot cake halvah apple pie carrot cake cookie. Tootsie roll liquorice chocolate cake wypas pie pastry tiramisu toffee. Bear claw macaroon bonbon cake lemon drops. Bear claw jelly-o bear claw. Lemon drops oat cake soufflé. Faworki sesame snaps pastry. Danish sugar plum gingerbread. Wafer sugar plum pastry jelly cotton candy candy canes toffee. Cupcake chocolate bar sweet donut cake wypas. Sweet roll chocolate cake marshmallow bonbon bonbon.

I accept the ToS

I don't accept the ToS

<form class="well span5 form-vertical">
	<div class="row">
		<label for="firstname">First Name:</label>
		<input class="input-large" type="text" name="firstname" id="firstname" placeholder="John"/>
	</div>
	<div class="row">
		<label for="lastname">Last Name:</label>
		<input class="input-large" type="text" name="lastname" id="lastname" placeholder="Doe"/>
	</div>
	<div class="row">
		<label for="email">E-mail address:</label>
		<input class="input-large" type="text" name="email" id="email" placeholder="john.doe@provider.com"/>
	</div>
	<div class="row">
		<label for="birthdate">Birthdate:</label>
		<select name="birthdate_month">
			<option value="1">January</option>
			<option value="2" selected="selected">February</option>
			<option value="3">March</option>
			<option value="4">April</option>
			<option value="5">May</option>
			...
		</select>
		<select name="birthdate_day">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
			<option value="6">6</option>
			<option value="7">7</option>
			<option value="8">8</option>
			...
		</select>
		<select name="birthdate_year">
			<option value="2007">2007</option>
			<option value="2006">2006</option>
			<option value="2005">2005</option>
			<option value="2004">2004</option>
			<option value="2003">2003</option>
			<option value="2002">2002</option>
			<option value="2001">2001</option>
			<option value="2000">2000</option>
			<option value="1999">1999</option>
			<option value="1998">1998</option>
			<option value="1997">1997</option>
			...
		</select>
	</div>
	<div class="row">
		Terms of Service:
		<textarea disabled="disabled" rows="5" class="terms">Wypas cupcake tart ice cream.......</textarea>
		<div class="align-center">
			<div class="input-check">
				<input type="radio" name="yesno2" id="yes2" value="yes"/> <label for="yes2">I accept the ToS</label>
			</div>
			<div class="input-check">
				<input type="radio" name="yesno2" id="no2" value="no"/> <label class="check" for="no2">I don't accept the ToS</label>
			</div>
		</div>
	</div>
	<div class="row">
		<input type="submit" class="btn btn-large btn-blue" value="Register"/>
	</div>
</form>

<form class="well span5 form-vertical">
	<div class="row">
		<label for="birthdate">Dogs:</label>
		<select multiple="multiple" name="nb_dogs">
			<option>Maloo</option>
			<option>Kita</option>
			<option>Valio</option>
			<option>Cikiba</option>
			<option>Reefoo</option>
			<option>Palok</option>
		</select>
	</div>
	<div class="row">
		Description:
		<textarea rows="4" placeholder="Here is my description."></textarea>
		<div class="align-center">
			<div class="input-check">
				<input type="checkbox" name="dog1" id="dog1" value="d1"/> <label for="dog1">Dog 1</label>
			</div>
			<div class="input-check">
				<input type="checkbox" name="dog1" id="dog2" value="d2"/> <label class="check" for="dog2">Dog 2</label>
			</div>
			<div class="input-check">
				<input type="checkbox" name="dog1" id="dog3" value="d3"/> <label class="check" for="dog3">Dog 3</label>
			</div>
		</div>
	</div>
	<div class="row">
		<input type="submit" class="btn btn-large btn-green" value="Adopt"/>
	</div>
</form>

Ministrap includes Open Iconic, a set of 200+ icons very easy to use.

Examples :
:
:
:
:
:
:

Find out all the icons available on the official site : https://useiconic.com/open/

Default buttons

Button styles can be applied to anything with the .btn class applied.

Button	class=""
Default	`btn`
Blue	`btn blue`
Green	`btn green`
Orange	`btn orange`
Red	`btn red`
Violet	`btn violet`
Brown	`btn brown`
Pink	`btn pink`
Dark blue	`btn dark-blue`
Dark green	`btn dark-green`

Button sizes

Do you want larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for additional sizes.

Example :

Large button Large button

Default button Default button

Small button Small button

Mini button Mini button

Button form

Do you want different border-radius? Add .oval or .square.

Example :

Large oval button

Default square button

Disabled state

Large button Large button

Labels	Markup
Default	`<span class="label">Default</span>`
Success	`<span class="label green">Success</span>`
Warning	`<span class="label orange">Warning</span>`
Important	`<span class="label red">Important</span>`
Info	`<span class="label blue">Info</span>`
Violet	`<span class="label violet">Violet</span>`

Badges	Markup
1	`<span class="badge">1</span>`
2	`<span class="badge green">2</span>`
3	`<span class="badge orange">3</span>`
4	`<span class="badge red">4</span>`
5	`<span class="badge blue">5</span>`
6	`<span class="badge pink">6</span>`

Use the following helper classes to add fast effect and position to your elements : .align-left, .align-center, .align-right, .rounded, .circle, .shadow, .oval, .square and .polaroid.

Example :

Rounded + Shadow
Circle
Polaroid
Align-right

<img src="img/3.jpg" width="150" height="150" class="rounded shadow"/>

<img src="img/1.jpg" class="circle"/>

<figure class="polaroid">
	<img src="img/2.jpg"/>
	<figcaption>My cute dog in the garden</figcaption>
</figure>

<div class="align-right">
    <img src="img/1.jpg" class="shadow"/>
</div>

Grid system

Simple use

Nesting columns

Full-width Elements

Full-width container

Full-width pictures

Full-width videos

Typography

Heading

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

h6. Heading 6

Bold & Italics

Alignment classes

Blockquotes

Default blockquote

Blockquote with source

Code

Inline

Block

Tables

Forms

Icons

Buttons

Default buttons

Button sizes

Button form

Disabled state

Labels and badges

Helpers