layoutit Layoutit!

Help

To change the column configuration you can edit the different values in the input (they should add 12). If you need more info please visit: Grid System

Help

Drag & Drop the elements inside the columns where you want to insert it. And from there, you can configure the style of that component. If you need more info please visit: Bootstrap Docs
Title

h3. Lorem ipsum dolor sit amet.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui. Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.

Address
Acme Corp.
1234 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Blockquote

A well-known quote, contained in a blockquote element. Someone famous in Source Title

Someone famous in Source Title
Unordered list
  • Todo
  • Todo
Ordered list
  1. Todo
  2. Todo
Description list
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Table
Table header 0Table header 1Table header 2Table header 3
Example 0Example 1Example 2Example 3
Example 0Example 1Example 2Example 3
Example 0Example 1Example 2Example 3
Example 0Example 1Example 2Example 3
Form
Input group
@
Form select
Form check
Form range
Form floating
Button
Anchor button
Button
Image
Bike

Help

Drag & Drop the elements inside the columns where you want to insert it. And from there, you can configure the style of that component. If you need more info please visit: Bootstrap Docs
Button group
Dropdown
  • Action
  • Another action
  • Some else here
Nav
  • Active
  • Link
  • link
  • Disabled
Breadcrumb
  1. Home
  2. Library
  3. Data
Pagination
  • Previous
  • 1
  • 2
  • 3
  • Next
Badge
Text

Heading

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »
Progress bar
Placeholder
List group
Home
List header
List group item heading

...

14
14
Card
Card title

Card content

Card footer

Help

Drag & Drop the elements inside the columns where you want to insert it. And from there, you can configure the style of that component. If you need more info please visit: Bootstrap Docs
Modal
Modal title
...
Navbar
Brand
  • Link
  • Link
  • Dropdown link
    • Action
    • Another action
    • Something else here
    • Separated link
  • Link
  • Dropdown link
    • Action
    • Another action
    • Something else here
    • Separated link
Tabs
I'm in Section 1.
Howdy, I'm in Section 2.
Alert

Alert!

Warning! Best check yo self, you're not looking so good. Alert link
Accordion

Anim pariatur cliche...

Anim pariatur cliche...
Carousel
Carousel image
First Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Carousel image
Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Carousel image
Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Help

Deprecated Bootstrap components with BS5-friendly approximations.BS5 Migration
Jumbotron

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

Label
Label
Page header

Interface Builder for Bootstrap

Media object
Image
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.

Image
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.

Thumbnails
Card image
Card title

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ActionAction
Card image
Card title

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ActionAction
Card image
Card title

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

ActionAction
Using Bootstrap 5.3.8
ZW5kZW5yYWhheXU5QGdtYWlsLmNvbQ==