# Bootstrap 4 Page Builder
Create page with Bootstrap
Keywords: Create page with Bootstrap

- ### 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 BOOTSTRAP GRID SYSTEM
  GRID SYSTEM
- Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag
  Remove Drag

- BASE CSS

  ### Help

  DRAG & DROP THE ELEMENTS INSIDE THE COLUMNS WHERE YOU WANT TO INSERT IT. AND FROM THERE, YOU CAN CONFIGURE THE STYLE OF THAT ELEMENT. IF YOU NEED MORE INFO PLEASE VISIT BASE CSS.
- Remove Drag
  Align
  - Default
  - Left
  - Center
  - Right
  Emphasis
  - Default
  - Emphasized
  - Emphasized 2
  - Emphasized 3
  - Emphasized 4
  - Emphasized orange
  Title

  ### h3. Lorem ipsum dolor sit amet.

  Remove Drag
  Align
  - Default
  - Left
  - Center
  - Right
  Emphasis
  - Default
  - Muted
  - Warning
  - Error
  - Info
  - Success
  Lead
  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.

  Remove Drag
  Address
  Remove Drag Blockquote Reverse
  Blockquote

  > Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

  > Someone famous Source Title

  Remove Drag
  Bullets
  - Default
  - list-unstyled
  - list-rrows
  - .list-arrows.small
  Inline
  Unordered List
  - Lorem ipsum dolor sit amet
  - Consectetur adipiscing elit
  - Integer molestie lorem at massa
  - Facilisis in pretium nisl aliquet
  - Nulla volutpat aliquam velit
  - Faucibus porta lacus fringilla vel
  - Aenean sit amet erat nunc
  - Eget porttitor lorem
  Remove Drag
  Unstyled Inline
  Ordered List
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
  Remove Drag
  Horizontal
  Description
  Rolex
    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.
  Truncated term is truncated
    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
  Remove Drag Styles
  - Default
  - Responsive
  - Rounded
  - Circle
  Image
  Remove Drag
  Styles
  - Responsive
  - Rounded
  - Circle
  Text
  - Right
  - Justify
  - Center
  Figure
  A caption for the above image.
  Remove Drag
  Inline code

  For example, `<section>` should be wrapped as inline.

  Remove Drag
  Block code

                              <p>Sample text here...</p>
                               <p>And another line of sample text here...</p>

  Remove Drag
  Variables
  y = mx + b
  Remove Drag
  User input

  To switch directories, type `cd` followed by the name of the directory.
  To edit settings, press ``ctrl` + `,``

  Remove Drag
  Sample Output
  `This text is meant to be treated as sample output from a computer program.`
  Remove Drag
  Dashboard

  # Dashboard

  #### Label

  Something else

  #### Label

  Something else

  #### Label

  Something else

  #### Label

  Something else

  ## Section title

  # | Header | Header | Header | Header
  --- | --- | --- | --- | ---
  1,001 | Lorem | ipsum | dolor | sit
  1,002 | amet | consectetur | adipiscing | elit
  1,003 | Integer | nec | odio | Praesent
  1,003 | libero | Sed | cursus | ante
  1,004 | dapibus | diam | Sed | nisi
  1,005 | Nulla | quis | sem | at
  1,006 | nibh | elementum | imperdiet | Duis
  1,007 | sagittis | ipsum | Praesent | mauris
  1,008 | Fusce | nec | tellus | sed
  1,009 | augue | semper | porta | Mauris
  1,010 | massa | Vestibulum | lacinia | arcu
  1,011 | eget | nulla | Class | aptent
  1,012 | taciti | sociosqu | ad | litora
  1,013 | torquent | per | conubia | nostra
  1,014 | per | inceptos | himenaeos | Curabitur
  1,015 | sodales | ligula | in | libero

  Remove Drag
  Color
  Remove Drag
  Styles
  - Large
  - Big
  - Medium
  - Normal
  - Small
  - Tiny
  All the Icon
  Font Awesome

- FORMS

  ### Help

  DRAG & DROP THE ELEMENTS INSIDE THE COLUMNS WHERE YOU WANT TO INSERT IT. IF YOU NEED MORE INFO PLEASE VISIT FORM.
- Remove Drag
  Horizontal form
  Email
  Password
  Radios
  First radio
  Second radio
  Third disabled radio
  Checkbox
  Example checkbox
  Remove Drag
  Inline Form
  Name Username
  @
  Remember me
  Remove Drag
  Form controls
  Email address
  Example select
  Example multiple select
  Example textarea
  Remove Drag
  Server Form
  First name
  Looks good!
  Last name
  Looks good!
  Username
  @
  Please choose a username.
  City
  Please provide a valid city.
  State
  Please provide a valid state.
  Zip
  Please provide a valid zip.
  Agree to terms and conditions
  You must agree before submitting.
  Remove Drag
  Form group
  Example label
  Another label
  Remove Drag
  Form Grid
  Remove Drag
  Form Row
  Remove Drag
  Complex Form
  Email
  Password
  Address
  Address 2
  City
  State
  Zip
  Check me out
  Remove Drag
  Disabled Form
  Disabled input
  Disabled select menu
  Can't check this
  Remove Drag
  Auto-sizing
  Name
  Username
  @
  Remember me
  Remove Drag
  Fixed-sizing
  Name
  Username
  @
  Remember me
  Remove Drag
  Custom-sizing
  Preference
  Remember my preference
  Remove Drag
  Styles
  - Default
  - Success
  - Warning
  - Important
  - Info
  - Dark
  - Light
  Label
  Label
  Remove Drag
  Input
  Remove Drag
  Password input
  Remove Drag
  Email input
  Remove Drag
  Text Area
  Default text
  Remove Drag
  File Inputs
  Example file input
  Remove Drag
  Help Text
  Password Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
  Remove Drag
  Checkbox Default
  Default checkbox
  Disabled checkbox
  Remove Drag
  Inline Checkbox
  1
  2
  3 (disabled)
  Remove Drag
  Radio Default
  Default radio
  Second default radio
  Disabled radio
  Remove Drag
  Inline Radio
  1
  2
  3 (disabled)
  Remove Drag
  Without Label
  Remove Drag
  Readonly inputs
  Remove Drag
  Readonly plain text
  Email
  Password
  Remove Drag
  Control sizing
  Remove Drag
  Custom checkbox
  Check this custom checkbox
  Example invalid feedback text
  Toggle this custom radio
  Or toggle this other custom radio
  More example invalid feedback text
  Example invalid custom select feedback
  Choose file...
  Example invalid custom file feedback
  Remove Drag
  Custom radio
  Toggle this custom radio
  Or toggle this other custom radio
  Remove Drag
  Intermediate
  Check this custom checkbox
  Remove Drag
  Basic Select
  Remove Drag
  Multiple Select
  Remove Drag
  File Button
  Remove Drag Styles
  - Default
  - Primary
  - Info
  - Success
  - Warning
  - Danger
  - Dark
  - Light
  - Link
  Size
  - Large
  - Default
  - Small
  - Mini
  Block Disabled
  Button
  Remove Drag
  Dropup
  Button Dropdowns
  - Action
  - Another Action
  - Something Else here
  - More Option
    - Action
    - Another Action
    - Something Else here
  Remove Drag
  Button Toolbar
  bla

- COMPONENTS

  ### 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 COMPONENTS.
- Remove Drag
  Alerts
  - Default
  - Success
  - Info
  - Warning
  - Danger
  Alert link Alert Heading
  Alerts
  Well done! You successfully read this important alert message.
  Remove Drag Orientation
  - Vertical
  - Horizontal
  Button Group
  Remove Drag
  Types
  - Default
  - Block
  Align
  - Left
  - Center
  - Right
  Image
  - Responsive
  - Rounded
  - Circle
  Color
  - Default
  - Secondary
  - Success
  - Danger
  - Warning
  - Info
  - Light
  - Dark
  Border
  - Default
  - Secondary
  - Success
  - Danger
  - Warning
  - Info
  - Light
  - Dark
  Card
  Card Header

  #### Card title

  ###### Card subtitle

  Some quick example text to build on the card title and make up the bulk of the card's content.

  Go somewhere
  Card Footer
  Remove Drag
  Colors
  - Default
  - Info
  - Success
  - Warning
  - Danger
  - Dark
  - Light
  Values
  - none
  - Inline
  - Inline-block
  - block
  - table
  - table cell
  - flex
  - Inline-flex
  - sm-none
  - sm-inline
  - sm-inline-block
  - sm block
  - sm-table
  - sm-table-cell
  - sm-table-flex
  - sm-flex
  - sm-inline-flex
  - md-none
  - md-inline
  - md-inline block
  - md-block
  - md-table
  - md table-cell
  - md-flex
  - lg none
  - lg-inline
  - lg-inline-block
  - lg-block
  - lg-table
  - lg table cell
  - lg flex
  - lg-inline-flex
  - xl none
  - xl inline
  - xl inline block
  - xl table
  - xl-table-cell
  - xl-flex
  - xl-inline-flex
  Common Display
  lorem impsum
  Remove Drag
  Align
  - Left
  - Center
  - Right
  Pagination
  Remove Drag
  Styles
  - Default
  - Pills
  Stacked
  Navs
  - Active
  - Dropdown
    Action Another action Something else here
    Separated link
  - Link
  - Disabled
  Remove Drag
  Breadcrumb
  Remove Drag
  Styles
  - Default
  - Success
  - Warning
  - Important
  - Info
  - Dark
  - Light
  Badge
  1
  Remove Drag
  Fluid
  Jumbotron

  # Hello, world!

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

  It uses utility classes for typography and spacing to space content out within the larger container.

  Learn more

  Remove Drag
  Jumbotron Narrow

  ### Project name

  # Jumbotron heading

  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

  Sign up today

  #### Subheading

  Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

  #### Subheading

  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

  #### Subheading

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

  #### Subheading

  Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.

  #### Subheading

  Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.

  #### Subheading

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

  Remove Drag
  Text

  ## Header

  Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.

  View Deatils »

  Remove Drag
  Image
  - Responsive
  - Rounded
  - Circle
  Thumbnails

  - ### Thumbnail label

    Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.

    Action Action

  - ### Thumbnail label

    Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.

    Action Action

  - ### Thumbnail label

    Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.

    Action Action

  Remove Drag Colors
  - Default
  - Info
  - Success
  - Warning
  - Danger
  - Dark
  - Light
  Striped Active
  Progress Bar
  Remove Drag
  Align
  - Left
  - Center
  - Right
  Media Object

  ##### Media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  Remove Drag
  Align
  - Left
  - Center
  - Right
  Nested Media

  ##### Media heading

  Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. 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. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  Remove Drag
  Disable
  List group
  - Cras justo odio
  - Dapibus ac facilisis in
  - Morbi leo risus
  - Porta ac consectetur ac
  - Vestibulum at eros
  - Cras justo odio 14
  - Dapibus ac facilisis in 2
  - Morbi leo risus 1
  Dapibus ac facilisis in Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros
  Remove Drag
  Style
  - Default
  - Striped
  - Bordered
  - Dark
  Hover Condensed
  Table

  # | Product | Payment Taken | Status
  --- | --- | --- | ---
  1 | TB - Monthly | 01/04/2012 | Default
  1 | TB - Monthly | 01/04/2012 | Approved
  2 | TB - Monthly | 02/04/2012 | Declined
  3 | TB - Monthly | 03/04/2012 | Pending
  4 | TB - Monthly | 04/04/2012 | Call in to confirm
  1 | TB - Monthly | 01/04/2012 | Approved
  2 | TB - Monthly | 02/04/2012 | Declined
  3 | TB - Monthly | 03/04/2012 | Pending
  4 | TB - Monthly | 04/04/2012 | Call in to confirm

- JAVASCRIPT

  ### Help

  DRAG & DROP THE ELEMENTS INSIDE THE COLUMNS WHERE YOU WANT TO INSERT IT. AND FROM THERE, YOU CAN CONFIGURE THE STYLE OF THAT JAVASCRIPT. IF YOU NEED MORE INFO PLEASE VISIT JAVASCRIPT.
- Remove Drag
  Modal

  ##### Modal title

  Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.

  Remove Drag
  Dark Position
  - Default
  - Static to Top
  - Fixed to Top
  - Fixed to Bottom
  Navbar
  Remove Drag
  Position
  - Default
  - Bottom
  - Left
  - Right
  Tabs
  - Section 1
  - Section 2

  Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.

  Sausage jerky hamburger, andouille salami meatloaf ham hock shank pork corned beef. Boudin spare ribs flank pork loin pork kevin chicken rump cow, ribeye ham tongue. Pork loin jowl filet mignon swine bresaola andouille doner tenderloin ball tip pork. Chicken meatball chuck turkey, jowl ham hamburger salami tenderloin jerky kevin capicola cow andouille. Pig tail pork filet mignon hamburger ham hock. Capicola brisket pork belly, doner cow pastrami corned beef.

  Remove Drag
  Position
  - Default
  - Bottom
  - Left
  - Right
  4 tabs
  - Section 1
  - Section 2
  - Section 3
  - Section 4

  Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.

  Sausage jerky hamburger, andouille salami meatloaf ham hock shank pork corned beef. Boudin spare ribs flank pork loin pork kevin chicken rump cow, ribeye ham tongue. Pork loin jowl filet mignon swine bresaola andouille doner tenderloin ball tip pork. Chicken meatball chuck turkey, jowl ham hamburger salami tenderloin jerky kevin capicola cow andouille. Pig tail pork filet mignon hamburger ham hock. Capicola brisket pork belly, doner cow pastrami corned beef.

  Bacon ipsum dolor sit amet doner ham leberkas short loin hamburger, flank drumstick corned beef. Doner meatball venison bresaola biltong chicken. Turkey bacon shoulder strip steak spare ribs tri-tip. Rump ground round strip steak kielbasa short loin t-bone. Biltong capicola corned beef, ribeye chuck andouille sausage ham hock turkey spare ribs beef tail sirloin shank.

  Sausage jerky hamburger, andouille salami meatloaf ham hock shank pork corned beef. Boudin spare ribs flank pork loin pork kevin chicken rump cow, ribeye ham tongue. Pork loin jowl filet mignon swine bresaola andouille doner tenderloin ball tip pork. Chicken meatball chuck turkey, jowl ham hamburger salami tenderloin jerky kevin capicola cow andouille. Pig tail pork filet mignon hamburger ham hock. Capicola brisket pork belly, doner cow pastrami corned beef.

  Remove Drag Styles
  - Default
  - Info
  - Error
  - Success
  Alerts

  #### Alert!

  Warning! Bacon ipsum dolor sit amet ground round culpa elit, irure incididunt short ribs tongue sed.
  Remove Drag
  Collapse

  Link with href

  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  Remove Drag
  Tooltip

  ### Tooltip Example

  Hover over me
  Remove Drag
  Popover
  Remove Drag
  Carousel

  # Example headline.

  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.

  Sign up today

  # Another example headline.

  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.

  Learn more

  # One more for good measure.

  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.

  Browse gallery

  Previous Next

remove drag
9 3
Remove Drag
Fluid
Jumbotron

# Hello, world!

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

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

##### Save your Layout

Choose how to save your layout