Navbars

Breadcrumbs

Typography

Skip to Grid

Headline 1 My Cool Headline

BootSand Framework is based on BootStrap,it adopts the advantages of bootstrap, gumby, foundation, ionicons, fontawesome, entypo, and streamline and makes it as easy to distribute as possible. Also, it works on Android and iOS platforms with icons this framework provided, and unified user experience. The base font-size to this framework is 14px. For detailed usage, BootStrap website is preferred.

BootSand is based on BootStrap, which means, if BootStrap works, BootSand will work also.

This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!

This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!

Headline 2 My Cool Headline

This is my awesome paragraph text, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. HTML is short for HyperText Markup Language. HTML is short for HyperText Markup Language. Enjoy!

Headline 3 My Cool Third Level Headline

It is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. This is my underlined paragraph text. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!

Headline 4 My Cool Fourth Level Headline

Awesome paragraph text, it is the base style/size for paragraph text. We love bold 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!

Headline 5 My Cool Fifth Level Headline

This is hilighted text example, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design. We also love the golden ratio, all of the type set here is based off of that deliciously elegant ratio. Enjoy!

Headline 6 My Cool Sixth Level Headline

This is my deleted text example, it is the base style/size for paragraph text. We love 16px for body copy as it provides for a more consistent cross browser experience. It is also digitally equivalent to to 12pt standard set in print design.

This is a small text example. All of the type set here is based off of that deliciously elegant ratio. All of the type set here is based off of that deliciously elegant ratio. Enjoy!

Style is the dress of thoughts; and a well-dressed thought, like a well-dressed man, appears to great advantage.

Letters to His Son, by Philip Dormer Stanhope

Life would be too smooth if it had no rubs in it.

Bad times make a good man.

The greatest test of courage on earth is to bear defeat without losing heart.

Life is a great big canvas, and you should throw all the paint on it you can.

Suffering is the most powerful teacher of life.

Suffering is the most powerful teacher of life.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Alerts

Default

Metro

Panels

Panel title

Panel body

Panel title

Panel body

Panel title

Panel body

Panel title

Panel body

Panel title

Panel body

Panel title

Panel body

Panel title

Panel body

Flat Panel title

Panel body

dl, ul, ol

Defination list

Defination 1
A description list is perfect for defining terms.
Defination 2
Vestibulum id ligula semper eget lacinia odio sem nec elit.
Defination 3
Semper eget lacinia odio sem nec elit.

Horizontal definations

Field 1
A description list is perfect for defining terms.
Field 2
Vestibulum id ligula eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Field 3
Etiam porta sem malesuada magna mollis euismod.
Field 4
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

ul, ol

ul.disc

  • List item
  • List item
    • Nested item
    • Nested item
  • List item
  • List item

ul.circle

  • List item
  • List item
    • Nested item
    • Nested item
  • List item
  • List item

ul.square

  • List item
  • List item
    • Nested item
    • Nested item
  • List item
  • List item

ol

  1. List item
  2. List item
    • Nested item
    • Nested item
  3. List item
  4. List item

List Groups

Form

Inputs

Input groups

  • @
  • @
  • $ .00
  • $ Go

Input sizes

Fieldset with Legend

Legend inside Fieldset

Inline Form

Radio Buttons

Radio Segment

Segment Squared:
Segment Oval:

Check Box

Select

Buttons

Works on tags <a>, <input>, <button>

Indicators

Badge

3 3 3 3 3 3

Label

Label Label Label Label Label Label

Tooltip

For performance reasons, initialize them yourself where needed. For more >> Bootstrap

 

 

Tooltip
<a role="button"
  title="Sed posuere consectetur est at <i>lobortis</i>. <br/>Aenean eu leo quam."
  data-toggle="tooltip"
  data-placement="bottom"
  data-html="true"
>HTML tooltip</a>

Popover

For performance reasons, initialize them yourself where needed. For more >> Bootstrap

Popover top

Sed posuere consectetur est at lobortis.

 

<a role="button"
  title="Popover top"
  data-content="hello, world."
  data-toggle="popover"
  data-placement="bottom"
>Popover</a>

Model

Toggle

Tag A

Style is the dress of thoughts; and a well-dressed thought, like a well-dressed man, appears to great advantage.

Parallax

Skip Link

Tabs

Basic Tab

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Pill Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

My Button

 

Side Tabs

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Pill Tabs, Outline (nav-pills outline)

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

My button

Table

Title1 Title2 Title3
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
6783 records, 453 pages
Title1 Title2 Title3
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
Lorem ipsum 。。。。 More
6783 records, 453 pages
Title1 Title2 Title3
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. More
6783 records, 453 pages

Images

Images and text aligned center vertically

Jumbotron

Hello, Moto!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

A simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Carousel

Grid

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-4
col-md-8
col-md-4
col-md-4
col-md-4
col-md-3
col-md-9
col-md-3
col-md-3
col-md-3
col-md-3
col-md-6
col-md-6
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
col-md-6, col-md-offset-3
col-md-5, col-center

Icon Map

Check SanIcon for Android/iOS usage.

Works with tag <i>: <i class="si si-xxxx"></i>