ArabicUnitag 
Sidebar
Offline page
Praesent quis orci tellus. Proin sed augue ac sapien fermentum luctus ut vitae urna. Sed consectetur semper ligula in auctor. In quis dui condimentum elit vehicula tristique. Quisque fermentum volutpat mi at dignissim. In convallis, metus eu euismod blandit, purus dolor congue justo, eu porta ipsum enim a est. Vivamus nec arcu nulla, vitae lobortis nulla.
Quisque luctus, libero eget rutrum mollis; tellus mi vestibulum nisl, eget imperdiet mi neque at nunc. Etiam leo mauris, eleifend in tincidunt eu, tempor pulvinar nisl. Morbi vitae nulla sed arcu sagittis iaculis lacinia ut felis. Pellentesque aliquam, purus id dignissim fringilla, augue odio tempus augue, in porttitor felis ipsum eget magna. Etiam aliquam sapien non velit pulvinar auctor?
Donec condimentum dui et ipsum sagittis nec feugiat felis tempor. Phasellus nibh turpis, scelerisque vel semper eget, egestas id lorem. Morbi pretium, lorem ut bibendum blandit, lorem mi gravida arcu, eu consectetur justo erat vitae ante. Nunc ornare nunc feugiat metus ultricies eget blandit quam luctus. Duis metus sem, pulvinar a iaculis ac, eleifend et purus. Nunc tempus fringilla mi, eu eleifend tortor placerat eget.
Typography
Core Typography
h1. Heading Secondary text
h2. Heading Secondary text
h3. Heading Secondary text
h4. Heading Secondary text
h5. Heading Secondary text
h6. Heading Secondary text
TIPS: Create lighter, secondary text in any heading with a generic <small> tag or the .small class.
Example body text
This is a lead paragraph. Make a paragraph stand out by adding .lead.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
The following snippet of text is rendered as bold text.
The following snippet of text is rendered as italicized text.
An abbreviation of the word attribute is attr.
Address
Company Name795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890 Full Name
P: (123) 456-7890
This email address is being protected from spambots. You need JavaScript enabled to view it.
Emphasis classes
This is a .mute paragraph.
This is a .text-primary paragraph.
This is a .text-warning paragraph.
This is a .text-danger paragraph.
This is a .text-success paragraph.
This is a .text-info paragraph.
Alignment classes
This is a left aligned text .text-left
This is a center aligned text .text-center
This is a right aligned text .text-right
This is a justify aligned text which is often used in Book Design, Magazine or special Typo Pages.
Create a justify aligned text with .text-justify class.
Blockquotes
This is a
Quote's author in Source Title<blockquote>in a<.well>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote's author in Source Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Quote's author in Source Title
Color Swatches
Brand Colors
- #0077bb
- Brand Primary
- #669900
- Brand Secondary
- #ff8800
- Brand Warning
- #cc0000
- Brand Danger
- #0099cc
- Brand Info
- #669900
- Brand Success
Grayscale Levels
- #222222
- Gray Darker
- #444444
- Gray Dark
- #666666
- Gray
- #999999
- Gray Light
- #eeeeee
- Gray Lighter
- #f7f7f7
- Gray Lightest
Navigations
Forms
Buttons
Inputs
Sample Basic Form
Hero Units
Jumbotron
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Primary Jumbotron
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Masthead
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Primary Masthead
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Thumbnails
Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.
Default example
By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.
Custom content
With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.
Media Object
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.More nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Tables
Basic Tables
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
Bordered Tables
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
Indicators
Alerts and Notifications
Oh snap! Change a few things up and try submitting again.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Best check yo self, you're not looking too good.
Badges
Labels
Default
Primary
Success
Info
Warning
Danger
Other useful components
List groups
- 14 Cras justo odio
- 2 Dapibus ac facilisis in
- Morbi leo risus
- 1 Morbi leo risus
- 2 Dapibus ac facilisis in
Panels
Panel heading
Panel content
Panel primary
Panel content
Panel success
Panel content
Panel warning
Panel content
Panel danger
Panel content
Panel info
Panel content
Wells
Look, I'm in a small well!
Look, I'm in a well!
Look, I'm in a large well!
About Us
Get to know us
Enim neque tortor mattis sed semper lorem tellus Phasellus eu nonummy. Vel Vestibulum leo hendrerit et mauris vitae consequat sem rutrum hac.Quis non leo condimentum lacinia vestibulum justo malesuada Sed non pellentesque. Quis non leo condimentum lacinia vestibulum justo malesuada Sed non pellentesque. lorem tellus Phasellus eu nonummy.
Vel Vestibulum leo hendrerit et mauris vitae consequat sem rutrum hac. Phasellus id cursus malesuada libero dui Morbi senectus diam gravida Vestibulum hendrerit et mauris vitae.
Leadership
Our team
Nicholas Mitchell
Designer.
Sean Thomas
Tester
Bennie Moran
Designer
Nicholas Mitchell
Tester
Nicholas Mitchell
Developer
Sean Thomas
Senior Designer
Bennie Moran
Developer
Nicholas Mitchell
Developer
You
We are hiring!
Terms of Use
Lorem ipsum dolor sit amet consectetuer lacinia nibh ridiculus elit at. Mauris dui Aenean metus urna dui condimentum ante augue tempus Quisque. Nam Curabitur tincidunt Mauris ut turpis amet Sed.
Dui Vivamus netus Suspendisse Lorem Aenean massa elit Vivamus laoreet malesuada. Sed eget id nibh sed lacus quis quam hac Vestibulum Vestibulum. Gravida Curabitur hendrerit lacinia amet Morbi egestas hendrerit consequat Morbi.
Consectetuer sed gravida orci pellentesque Aenean faucibus at Donec amet Vestibulum. Aenean quis porttitor at egestas a est consequat tellus Integer Maecenas. Purus dictum et nibh eros senectus felis porttitor lacus convallis.
Elit amet quis Vivamus a quis egestas Sed libero consequat Nulla. At mus mauris laoreet molestie vel Aliquam vel tincidunt mus congue. Tincidunt Donec orci.
Velit ligula neque faucibus sit a nec semper tempus convallis aliquam. Aenean Cum libero interdum ac est nec pretium lacinia pede lorem. Turpis est eget neque tempor ipsum et enim eget natoque tristique. Pellentesque Pellentesque et id dui.
Dolor at laoreet Nam amet pharetra et interdum et nisl id. Facilisis libero ipsum elit lorem consequat morbi nibh Sed nunc sapien. Sem elit velit Vestibulum condimentum parturient Nam pretium habitasse Aliquam laoreet. Ut.
- Morbi in sem quis dui placerat ornare. Pellentesque odio nisi.
- Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue.
- Donec consectetuer ligula vulputate sem tristique cursus.
Curabitur libero sit semper Nunc nec metus Nam Vivamus ultrices condimentum. Ridiculus non orci quis netus velit Aenean tellus felis nec ut. Ante.
Wisi lacus ut condimentum massa augue malesuada id eu et eget. Sed commodo ac egestas Sed pellentesque dui Quisque laoreet Aenean lobortis. Quisque malesuada In consectetuer Cum augue nascetur Integer accumsan at Aliquam. Condimentum eu eleifend.
Habitant Fusce dictum eros mollis mi tellus pulvinar Curabitur feugiat wisi. Adipiscing metus ac wisi magnis dolor Aliquam iaculis mauris rutrum leo. Pede consequat dictumst nec velit Donec auctor Vestibulum hendrerit Duis.
This is a
Quote's author in Source Title<blockquote>in a<.well>.
Sodales non pellentesque vitae egestas laoreet risus tortor Nam Nam Vestibulum. Sed ut egestas condimentum elit cursus libero elit platea dignissim sem. Aliquet tempor hendrerit tincidunt id justo eu mauris lorem lorem Curabitur. Vel adipiscing libero elit.
Id auctor Pellentesque leo Sed Curabitur consequat leo metus pede convallis. Cum consectetuer tellus vitae ac condimentum laoreet lorem Nulla Sed platea. Tellus porttitor wisi enim pulvinar facilisi diam.
Enim sed nulla id Pellentesque tempus Nunc tortor et id quam. Odio sem lobortis cursus platea hendrerit dolor dolor at risus amet. Aliquam Sed dapibus nisl.
9 Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros
Semper interdum et lacinia Nam sit orci facilisi quis quis dictum. Ante ante urna Nulla orci auctor ligula dictum mattis enim.