Apply Preset
MinimalClassicTechFriendlyHeroic
Fonts Latin
Headings font
DM Sans
Bold
Body font
DM Sans
Regular
Colors
Action
Dark Text
Light Text
Background
Animation Test
Speed
Style
Fade down

		<div class="row" sf-type="container" sf-label="Row">
			<div class="col-6" sf-type="container" sf-label="Column">
				<div class="p-4 text-center bg-bg-2 text-dark-1" sf-type="text" sf-label="Text">Column 1 inner</div>
			</div>
			<div class="col-6" sf-type="container" sf-label="Column">
				<div class="p-4 text-center bg-bg-2 text-dark-1" sf-type="text" sf-label="Text">Column 2 inner</div>
			</div>
		</div>	

		<div class="col-12" sf-type="container" sf-label="Column">
			<div class="p-4 text-center bg-bg-2 text-dark-1" sf-type="text" sf-label="Text">Put this column inside the "Row" element</div>
		</div>	

		<div sf-type="container" sf-label="Container"></div>	

		<h2 sf-type="text" sf-label="Heading">My heading text</h2>	

		<p sf-type="text" sf-label="Paragraph">Some text <br> with multiple lines in it.</p>	

		<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-dark-1" sf-type="svg" sf-label="SVG icon">
			<path d="M17.394 13.046L7.8495 18.584C7.0395 19.0535 6 18.485 6 17.5385V6.46252C6 5.51752 7.038 4.94752 7.8495 5.41852L17.394 10.9565C17.5783 11.0617 17.7314 11.2138 17.8379 11.3972C17.9445 11.5807 18.0006 11.7891 18.0006 12.0013C18.0006 12.2134 17.9445 12.4218 17.8379 12.6053C17.7314 12.7888 17.5783 12.9408 17.394 13.046Z"/>
		</svg>	

		<img src="i/editor-demo-img.png" srcset="i/editor-demo-img@2x.png 2x" alt="" class="img-fluid" sf-type="img" sf-label="Image" />	

		<div sf-type="container" sf-label="Video" class="position-relative">
			<img src="i/editor-demo-video-poster.png" srcset="i/editor-demo-video-poster@2x.png 2x" alt="" sf-type="img" sf-label="Video poster" class="img-fluid">
			<a href="#" sf-type="link-container" sf-label="Play Button" class="btn btn-width-equal-height btn-action-1 position-absolute translate-middle top-50 start-50 rounded-circle" data-bs-toggle="modal" data-bs-target="#_random_id_">
				<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="fill-light-1" sf-type="svg" sf-label="Play icon">
					<path d="M17.394 13.046L7.8495 18.584C7.0395 19.0535 6 18.485 6 17.5385V6.46252C6 5.51752 7.038 4.94752 7.8495 5.41852L17.394 10.9565C17.5783 11.0617 17.7314 11.2138 17.8379 11.3972C17.9445 11.5807 18.0006 11.7891 18.0006 12.0013C18.0006 12.2134 17.9445 12.4218 17.8379 12.6053C17.7314 12.7888 17.5783 12.9408 17.394 13.046Z">
					</path>
				</svg>
			</a>
			<div sf-type="container" sf-label="Modal with video" class="modal fade" id="_random_id_" tabindex="-1">
				<a href="#" sf-type="link-container" sf-label="Close Modal" class="btn btn-sm btn-width-equal-height position-fixed top-0 end-0 zi-5 rounded-circle btn-bg-3 mt-4 me-4" data-bs-dismiss="modal">
					<svg width="24" height="24" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="fill-dark-1" sf-label="Close icon" sf-type="svg">
						<path d="M8.9398 8L13.1398 3.80667C13.2653 3.68113 13.3359 3.51087 13.3359 3.33333C13.3359 3.1558 13.2653 2.98554 13.1398 2.86C13.0143 2.73447 12.844 2.66394 12.6665 2.66394C12.4889 2.66394 12.3187 2.73447 12.1931 2.86L7.9998 7.06L3.80646 2.86C3.68093 2.73447 3.51066 2.66394 3.33313 2.66394C3.1556 2.66394 2.98533 2.73447 2.8598 2.86C2.73426 2.98554 2.66374 3.1558 2.66374 3.33333C2.66374 3.51087 2.73426 3.68113 2.8598 3.80667L7.0598 8L2.8598 12.1933C2.79731 12.2553 2.74771 12.329 2.71387 12.4103C2.68002 12.4915 2.6626 12.5787 2.6626 12.6667C2.6626 12.7547 2.68002 12.8418 2.71387 12.9231C2.74771 13.0043 2.79731 13.078 2.8598 13.14C2.92177 13.2025 2.99551 13.2521 3.07675 13.2859C3.15798 13.3198 3.24512 13.3372 3.33313 13.3372C3.42114 13.3372 3.50827 13.3198 3.58951 13.2859C3.67075 13.2521 3.74449 13.2025 3.80646 13.14L7.9998 8.94L12.1931 13.14C12.2551 13.2025 12.3288 13.2521 12.4101 13.2859C12.4913 13.3198 12.5785 13.3372 12.6665 13.3372C12.7545 13.3372 12.8416 13.3198 12.9228 13.2859C13.0041 13.2521 13.0778 13.2025 13.1398 13.14C13.2023 13.078 13.2519 13.0043 13.2857 12.9231C13.3196 12.8418 13.337 12.7547 13.337 12.6667C13.337 12.5787 13.3196 12.4915 13.2857 12.4103C13.2519 12.329 13.2023 12.2553 13.1398 12.1933L8.9398 8Z">
						</path>
					</svg>
				</a>
				<div sf-type="container" sf-label="Modal dialog" class="modal-dialog modal-fullscreen">
					<div sf-type="container" sf-label="Modal content" class="modal-content bg-transparent">
						<div sf-type="container" sf-label="Modal body" class="modal-body d-flex align-items-center justify-content-center">
							<div sf-type="container" sf-label="container" class="container d-flex justify-content-center align-items-center">
								<div sf-type="container" sf-label="Video wrapper" class="ratio ratio-16x9">
									<iframe sf-type="container" sf-label="YouTube video" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen="">
									</iframe>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>	

		<a href="#" sf-type="btn" sf-label="Button" class="btn btn-action-1" data-bs-toggle="modal" data-bs-target="#_random_id_">Open modal</a>
		<div sf-type="container" sf-label="Modal" class="modal fade" id="_random_id_" tabindex="-1">
			<div sf-type="container" sf-label="Modal dialog" class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
				<div sf-type="container" sf-label="Modal content" class="modal-content">
					<div sf-type="container" sf-label="Modal header" class="py-4 modal-header">
						<h5 sf-type="text" sf-label="Heading" class="mb-0 text-dark-1">Modal heading</h5>
						<button sf-type="btn" sf-label="Close button" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div sf-type="container" sf-label="Modal body" class="text-start modal-body">
						<div sf-type="container" sf-label="Demo content">
							<h5 sf-type="text" sf-label="Heading" class="mb-4 text-dark-1">This is your modal content</h5>
							<p sf-type="text" sf-label="Paragraph">
								This modal is already centered. That means that it will always be applied to the center of your screen.
							</p>
							<p sf-type="text" sf-label="Paragraph">
								You can customize the maximum width of this modal. To do that, make the following:<br>
								Switch to the "Modal dialog" container;<br>
								Open the "Advanced" tab and add one of the following classes:<br>
								<code>modal-sm</code> to set maximum width less than 300px;<br>
								<code>modal-lg</code> to set maximum width less than 800px;<br>
								<code>modal-xl</code> to set maximum width less than 1140px;<br>
								The default maximum with is 500px.
							</p>
							<p sf-type="text" sf-label="Paragraph">
								You can also make the modal fullscreen sized. These classes will do that:<br>
								<code>modal-fullscreen</code> - the modal is always fullscreen sized;<br>
								<code>modal-fullscreen-sm-down</code> - the modal is in fullscreen mode only if the screen size is below the "SM" breakpoint (less than 576px);<br>
								<code>modal-fullscreen-md-down</code> - the modal is in fullscreen mode only if the screen size is below the "MD" breakpoint (less than 768px);<br>
								<code>modal-fullscreen-lg-down</code> - the modal is in fullscreen mode only if the screen size is below the "LG" breakpoint (less than 992px);<br>
								<code>modal-fullscreen-xl-down</code> - the modal is in fullscreen mode only if the screen size is below the "XL" breakpoint (less than 1200px);<br>
								<code>modal-fullscreen-xxl-down</code> - the modal is in fullscreen mode only if the screen size is below the "XXL" breakpoint (less than 1400px).
							</p>
							<p sf-type="text" sf-label="Paragraph">
								The container that contains this text is the "body" of your modal. If the content height will be larger than this area, the scroll will be applied automatically.
							</p>
							<p sf-type="text" sf-label="Paragraph">
								The modal "header" and "footer" are always visible. You can add some important information here.
							</p>
							<p sf-type="text" sf-label="Paragraph">
								The "close" buttons in the modal "header" and "footer" can be moved to any container of this modal - they will work as they should. If you want to delete the "header", but save the "cross" close button and make it always visible, do the following:<br>
								Move the "close" button to the "Modal content" container;<br>
								Go to the "Display" tab, set the "Position" to "Absolute";<br>
								Set the "Position from top" and "Position from right" both to "0%";<br>
								Go to the "Margins" tab, add new "Top" and "Right" margins for the "XS" breakpoint;<br>
								Set these margins to "1 rem" (16px);<br>
								Delete the "Modal header" container.
							</p>
							<p sf-type="text" sf-label="Paragraph">
								Hope you'll enjoy working with the Bootstrap Modal windows &#x1F609;
							</p>
						</div>
					</div>
					<div sf-type="container" sf-label="Modal footer" class="py-2 modal-footer">
						<div class="row g-0 align-items-center justify-content-between w-100" sf-type="container" sf-label="Row">
							<div class="col" sf-type="container" sf-label="Column">
								<p sf-type="text" sf-label="Paragraph" class="text-start fs-6 mb-0">Some text that always visible for a user (not hidden by scroll).</p>
							</div>
							<div class="col-auto" sf-type="container" sf-label="Column">
								<button sf-type="btn" sf-label="Close button" type="button" class="btn btn-sm btn-action-5" data-bs-dismiss="modal">Close</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>	

		<div id="_random_id_" class="carousel carousel-dark carousel-arrows-circled slide" data-bs-interval="false" sf-type="container" sf-label="Carousel">
			<div class="carousel-indicators carousel-indicators-dots" sf-type="container" sf-label="Indicators">
				<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="0" class="active" sf-type="btn" sf-label="Indicator for slide 1"></button>
				<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="1" sf-type="btn" sf-label="Indicator for slide 2"></button>
				<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="2" sf-type="btn" sf-label="Indicator for slide 3"></button>
				<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="3" sf-type="btn" sf-label="Indicator for slide 4"></button>
				<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="4" sf-type="btn" sf-label="Indicator for slide 5"></button>
				<button type="button" data-bs-target="#_random_id_" data-bs-slide-to="5" sf-type="btn" sf-label="Indicator for slide 6"></button>
			</div>
			<div class="d-flex align-items-stretch carousel-inner" style="min-height:40rem;" sf-type="container" sf-label="Slides">
				<div class="float-none carousel-item active" sf-type="container" sf-label="Slide 1">
					<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-bg-3" sf-type="container" sf-label="Background"></div>
					<div class="top-0 bottom-0 overflow-auto text-dark-1 fs-3 text-start carousel-caption" sf-type="container" sf-label="Caption">
						<h2 class="mb-4 display-6 text-dark-1" sf-type="text" sf-label="Heading">Tips & tricks</h2>
						<p class="fs-1" sf-type="text" sf-label="Text">
							Here are some tips on how to customize this carousel. <br>
							Please, read if you working with the carousel for the first time.
						</p>
						<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Active slide</h4>
						<p sf-type="text" sf-label="Text">
							You must mark some of your slides as active. Otherwise, the carousel will not work (because it shows only the active slide).
						</p>
						<p sf-type="text" sf-label="Text">
							To do that, choose <strong>Slide-X</strong> in the left panel, go to the <strong>Advanced</strong> tab in the right column and add an <code>active</code> class to the chosen slide. If you're using indicators, you should also add an <code>active</code> class to one of the indicators. e.g. <strong>Slide 2</strong> and <strong>Indicator for slide 2</strong> should have an <code>active</code> class
						</p>
						<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Height of the carousel</h4>
						<p sf-type="text" sf-label="Text">
							We've set the minimal height of the carousel equals to 40rem (640px). The minimal height is set to make all slides have an equal height which prevents page height from squeezing/leaping while changing the slides (if they have a different height). <br>
							To change this minimal height, choose the most top-level <strong>Carousel</strong> element in the left panel, open the <strong>Advanced</strong> tab and change the <code>40rem</code> value for the <code>style</code> attribute.
						</p>
						<p sf-type="text" sf-label="Text">
							If you want to make the height of a carousel equal to the height of the screen, change the <code>40rem</code> value to <code>100vh</code>. The <strong>vh</strong> units are relative to the screen size. So <code>100vh</code> is 100% of a screen height, <code>80vh</code> is 80% of a screen height.
						</p>
						<p sf-type="text" sf-label="Text">
							You can also move the carousel outside the <strong>Bootstrap Container</strong> element to make it screen-wide.
						</p>
						<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Dark/light controls</h4>
						<p sf-type="text" sf-label="Text">
							You can switch between light or dark controls. 
						</p>
						<p sf-type="text" sf-label="Text">
							Choose the most top-level <strong>Carousel</strong> element in the left panel, open the <strong>Advanced</strong> tab and add or remove the <code>carousel-dark</code> class.
						</p>
						<p sf-type="text" sf-label="Text">
							You can also toggle on/off circles under the <strong>Previous</strong>/<strong>Next</strong> buttons by adding/removing the <code>carousel-arrows-circled</code> class for the <strong>Carousel</strong> element.
						</p>
						<p sf-type="text" sf-label="Text">
							You can simply remove the <strong>Control - Previous</strong> and <strong>Control - Next</strong> elements if you don't need to use them.
						</p>
						<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Carousel indicators</h4>
						<p sf-type="text" sf-label="Text">
							The number  of indicators must be the same as the number of slides. That means that if you're adding a new slide, you should also add an indicator for it.
						</p>
						<p sf-type="text" sf-label="Text">
							Each indicator points to the slide it's connected with via the <code>data-bs-slide-to</code> attribute. The enumeration <strong>starts from 0</strong>. That means that the indicator pointing to the first slide has a<code>data-bs-slide-to</code> attribute with the <strong>0</strong> value and the indicator pointing to the third slide has a<code>data-bs-slide-to</code> attribute with the <strong>2</strong> value.
						</p>
						<p sf-type="text" sf-label="Text">
							So, the regular workflow of adding the new slide is:<br>
							Choose the last slide in the left panel and clone it;<br>
							Choose the last indicator in the left panel and clone it;<br>
							Choose the newly created indicator, go to the <strong>Advanced</strong> tab, and increase the value of the <code>data-bs-slide-to</code> attribute on 1.
						</p>
						<p sf-type="text" sf-label="Text">
							You can simply remove the <strong>Indicators</strong> container if you don't need to use them.
						</p>
						<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Fade/Slide effect</h4>
						<p sf-type="text" sf-label="Text">
							You can switch between fade or slide effects. 
						</p>
						<p sf-type="text" sf-label="Text">
							Choose the most top-level <strong>Carousel</strong> element in the left panel, open the <strong>Advanced</strong> tab and add or remove the <code>carousel-fade</code> class.
						</p>
						<h4 class="mb-4 text-dark-1" sf-type="text" sf-label="Heading">Autoplay</h4>
						<p sf-type="text" sf-label="Text">
							You can make carousel cycle slides automatically.
						</p>
						<p sf-type="text" sf-label="Text">
							To enable autoplay, choose the most top-level <strong>Carousel</strong> element in the left panel, open the <strong>Advanced</strong> tab and set the <code>data-bs-interval</code> attribute value to <code>5000</code>. The 5000 is the 5000ms = 5s. That means that the carousel will change slides every 5 seconds. You can change this value as you want. Set the value to <code>false</code> to disable autoplay.
						</p>
						<p sf-type="text" sf-label="Text">
							Then add the <code>data-bs-ride</code> attribute with value <code>carousel</code>. It will start cycling slides after the page load.
						</p>
						<p sf-type="text" sf-label="Text">
							Then press <strong>Save & Close</strong> button and refresh the page to apply changes.
						</p>
						<p sf-type="text" sf-label="Text">
							You can find some more useful options here: https://getbootstrap.com/docs/5.0/components/carousel/#options
						</p>
					</div>
				</div>
				<div class="float-none carousel-item" sf-type="container" sf-label="Slide 2">
					<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-action-7" sf-type="container" sf-label="Background"></div>
					<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-repeat-none bg-position-center bg-size-contain" sf-type="container" sf-label="Background" data-bg-src="i/ecommerce-10.png" data-bg-src-2x="i/ecommerce-10@2x.png" style="background-color:#f4f5f6;"></div>
					<div class="carousel-caption" sf-type="container" sf-label="Caption">
						<h4 class="text-dark-1" sf-type="text" sf-label="Heading">Image - fit</h4>
						<p class="mb-0 fs-4 text-dark-1" sf-type="text" sf-label="Text">
							This image will always fit to the height / width of a slide.<br> Use it if you want to show some item or person.
						</p>
					</div>
				</div>
				<div class="float-none carousel-item" sf-type="container" sf-label="Slide 3">
					<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-action-7" sf-type="container" sf-label="Background"></div>
					<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-bg-3 bg-repeat-none bg-position-center bg-size-cover" sf-type="container" sf-label="Background" data-bg-src="i/editor-demo-slide-bg.jpg" data-bg-src-2x="i/editor-demo-slide-bg@2x.jpg"></div>
					<div class="carousel-caption" sf-type="container" sf-label="Caption">
						<h4 class="text-dark-1" sf-type="text" sf-label="Heading">Image - cover</h4>
						<p class="mb-0 fs-4 text-dark-1" sf-type="text" sf-label="Text">
							This image will always cover the slide. <br>That means that it will be stretched to fill the slide.
						</p>
					</div>
				</div>
				<div class="float-none carousel-item" sf-type="container" sf-label="Slide 4">
					<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-action-7" sf-type="container" sf-label="Background"></div>
					<div class="carousel-caption" sf-type="container" sf-label="Caption">
						<h2 class="mb-4 display-4 text-dark-1" sf-type="text" sf-label="Heading">Orange</h2>
						<p class="mb-0 text-dark-1 fs-1" sf-type="text" sf-label="Text">
							This slide has an "action-7" background color which is close to the "Orange" color. <br>
							You can change the color of a background or set some image to it.
						</p>
					</div>
				</div>
				<div class="float-none carousel-item" sf-type="container" sf-label="Slide 5">
					<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-action-8" sf-type="container" sf-label="Background"></div>
					<div class="carousel-caption" sf-type="container" sf-label="Caption">
						<h2 class="mb-4 display-4 text-dark-1" sf-type="text" sf-label="Heading">Lime</h2>
						<p class="mb-0 text-dark-1 fs-1" sf-type="text" sf-label="Text">
							This slide has an "action-8" background color which is close to the "Lime" color. <br>
							You can change the color of a background or set some image to it.
						</p>
					</div>
				</div>
				<div class="float-none carousel-item" sf-type="container" sf-label="Slide 6">
					<div class="position-absolute top-0 start-0 bottom-0 end-0 bg-bg-1" sf-type="container" sf-label="Background"></div>
					<div class="top-0 bottom-0 d-flex align-items-center justify-content-center carousel-caption" sf-type="container" sf-label="Caption">
						<div sf-type="container" sf-label="Container">
							<h2 class="mb-4 display-5 text-light-1" sf-type="text" sf-label="Heading">Dark slide. <br>Vertically-centered text.</h2>
							<p class="mb-0 text-light-1 fs-2" sf-type="text" sf-label="Text">
								This slide caption is also centered verticaly. <br>
								Please, remove the bottom margin for the last element in the caption for correct positioning.
							</p>
						</div>
					</div>
				</div>
			</div>
			<button class="carousel-control-prev" type="button" data-bs-target="#_random_id_" data-bs-slide="prev" sf-type="link-container" sf-label="Control - Previous">
				<span class="carousel-control-prev-icon" aria-hidden="true" sf-type="container" sf-label="Icon"></span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#_random_id_" data-bs-slide="next" sf-type="link-container" sf-label="Control - Next">
				<span class="carousel-control-next-icon" aria-hidden="true" sf-type="container" sf-label="Icon"></span>
			</button>
		</div>	

		<a href="#" class="btn btn-action-1" sf-type="btn" sf-label="Button">Button text</a>	

		<div class="d-inline-block dropdown" sf-type="container" sf-label="Dropdown">
			<button class="btn btn-sm btn-action-1 dropdown-toggle" type="button" id="_random_id_" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false" sf-type="btn" sf-label="Button">Open Dropdown</button>
			<ul class="dropdown-menu" aria-labelledby="_random_id_" sf-type="container" sf-label="Dropdown body">
				<li sf-type="container" sf-label="Item">
					<a class="dropdown-item" href="#" sf-type="link" sf-label="Link">Link</a>
				</li>
				<li sf-type="container" sf-label="Item">
					<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/components/dropdowns/" target="_blank" sf-type="link" sf-label="Link">Documentation</a>
				</li>
				<li sf-type="container" sf-label="Item">
					<a class="dropdown-item" href="https://getbootstrap.com/docs/5.0/components/dropdowns/" target="_blank" sf-type="link" sf-label="Link">All dropdown options</a>
				</li>
				<li sf-type="container" sf-label="Item">
					<hr class="dropdown-divider" sf-type="container" sf-label="Divider">
				</li>
				<li sf-type="container" sf-label="Item">
					<span class="dropdown-item-text" sf-type="text" sf-label="Text">Just a text</span>
				</li>
				<li sf-type="container" sf-label="Item">
					<a class="dropdown-item disabled" href="https://getbootstrap.com/docs/5.0/components/dropdowns/" target="_blank" tabindex="-1" aria-disabled="true" sf-type="link" sf-label="Link">Disabled link</a>
				</li>
			</ul>
		</div>	

		<form action="form-handler.php" method="post" enctype="multipart/form-data" class="js-ajax-form" sf-type="form" sf-label="Form">
			<!-- forms alerts -->
			<div class="alert alert-action-8 fixed-top invisible fade js-ajax-form-result" data-result="success" role="alert"  sf-type="container" sf-label="Submit result - success">
				<span class="js-ajax-form-alert-text" data-default-text="Thanks for your message!" sf-type="text" sf-label="Text">Thanks for your message!</span>
			</div>
			<div class="alert alert-action-5 fixed-top invisible fade js-ajax-form-result" data-result="error" role="alert" sf-type="container" sf-label="Submit result - error">
				<span class="js-ajax-form-alert-text" sf-type="text" sf-label="Text">Error!</span>
			</div>
			<!-- forms alerts end -->
			<div class="row justify-content-center text-start" sf-type="container" sf-label="Row">									
				<div sf-type="container" sf-label="Column" class="mb-4 col-xl-4 col-lg-6 col-md-8 col-sm-10">
					<input type="text" name="name" placeholder="Your name" class="form-control" sf-type="input" sf-label="Input" />
				</div>
				<div sf-type="container" sf-label="Divider" class="col-12"></div>
				<div sf-type="container" sf-label="Column" class="mb-4 col-xl-4 col-lg-6 col-md-8 col-sm-10">
					<div sf-type="container" sf-label="Input group" class="input-group">
						<div sf-type="container" sf-label="Input icon" class="input-group-text border-end-0 ps-4 pe-2">
							<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="fill-dark-3" sf-label="SVG icon" sf-type="svg">
								<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5002 3.75H2.5002C2.16868 3.75 1.85074 3.8817 1.61632 4.11612C1.3819 4.35054 1.2502 4.66848 1.2502 5V5.27104L10.0002 10.5213L18.7502 5.27098V5C18.7502 4.66848 18.6185 4.35054 18.3841 4.11612C18.1497 3.8817 17.8317 3.75 17.5002 3.75ZM0.000203451 5.64224C-6.77314e-05 5.63161 -6.79025e-05 5.62098 0.000203451 5.61034V5C0.000203451 4.33696 0.263596 3.70107 0.732437 3.23223C1.20128 2.76339 1.83716 2.5 2.5002 2.5H17.5002C18.1632 2.5 18.7991 2.76339 19.268 3.23223C19.7368 3.70107 20.0002 4.33696 20.0002 5V5.61604V5.63397V15C20.0002 15.663 19.7368 16.2989 19.268 16.7678C18.7991 17.2366 18.1632 17.5 17.5002 17.5H2.5002C1.83716 17.5 1.20128 17.2366 0.732437 16.7678C0.263596 16.2989 0.000203451 15.663 0.000203451 15V5.64224ZM18.7502 13.9117V6.72895L12.6801 10.3708L18.7502 13.9117ZM18.7051 15.3329L11.5602 11.165L11.4569 11.1048L10.0002 11.9788L8.54329 11.1049L8.44016 11.165L1.29533 15.3328C1.35239 15.5394 1.46213 15.7297 1.61632 15.8839C1.85074 16.1183 2.16868 16.25 2.5002 16.25H17.5002C17.8317 16.25 18.1497 16.1183 18.3841 15.8839C18.5383 15.7297 18.648 15.5394 18.7051 15.3329ZM1.2502 13.9117V6.73013L7.31989 10.371L1.2502 13.9117Z">
								</path>
							</svg>
						</div>
						<input type="email" name="email" placeholder="Your email" class="form-control border-start-0 ps-2" sf-type="input" sf-label="Input" required="required">
					</div>
				</div>
				<div sf-type="container" sf-label="Divider" class="col-12"></div>
				<div sf-type="container" sf-label="Column" class="mb-4 col-xl-4 col-lg-6 col-md-8 col-sm-10">
					<select name="budget" class="form-select" sf-type="select" sf-label="Select">
						<option value="" disabled selected sf-type="option" sf-label="Option">Your budget</option>
						<option value="<1000" sf-type="option" sf-label="Option">Less than $1000</option>
						<option value=">1000" sf-type="option" sf-label="Option">More than $1000</option>
					</select>
				</div>
				<div sf-type="container" sf-label="Divider" class="col-12"></div>				
				<div sf-type="container" sf-label="Column" class="mb-4 col-xl-2 col-lg-3 col-md-4 col-sm-5">
					<label class="form-check d-inline-block" sf-type="container" sf-label="Radio">
						<input class="form-check-input" type="radio" name="radio" value="radio-value-1" checked sf-type="input" sf-label="Input">
						<span class="form-check-label" sf-type="text" sf-label="Label">Radio option 1</span>
					</label>
				</div>
				<div sf-type="container" sf-label="Column" class="mb-4 col-xl-2 col-lg-3 col-md-4 col-sm-5">
					<label class="form-check d-inline-block" sf-type="container" sf-label="Radio">
						<input class="form-check-input" type="radio" name="radio" value="radio-value-2" sf-type="input" sf-label="Input">
						<span class="form-check-label" sf-type="text" sf-label="Label">Radio option 2</span>
					</label>
				</div>
				<div sf-type="container" sf-label="Divider" class="col-12"></div>
				<div sf-type="container" sf-label="Column" class="mb-4 col-xl-2 col-lg-3 col-md-4 col-sm-5">
					<label class="form-check" sf-type="container" sf-label="Checkbox">
						<input class="form-check-input" type="checkbox" name="checkbox" sf-type="input" sf-label="Input">
						<span class="form-check-label" sf-type="text" sf-label="Text">Checkbox text</span>
					</label>
				</div>
				<div sf-type="container" sf-label="Column" class="mb-4 col-xl-2 col-lg-3 col-md-4 col-sm-5">
					<label class="form-check form-switch" sf-type="container" sf-label="Switch">
						<input class="form-check-input" type="checkbox" name="switch" sf-type="input" sf-label="Input">
						<span class="form-switch-wrapper" sf-type="container" sf-label="Wrapper">
							<div class="form-switch-pin" sf-type="container" sf-label="Pin"></div>
						</span>
						<span class="form-check-label" sf-type="text" sf-label="Text">Switch text</span>
					</label>
				</div>
				<div sf-type="container" sf-label="Divider" class="col-12"></div>
				<div sf-type="container" sf-label="Column" class="mb-4 col-xl-4 col-lg-6 col-md-8 col-sm-10">
					<textarea name="message" placeholder="Your message" class="form-control" rows="3" sf-type="textarea" sf-label="Textarea"></textarea>
				</div>
			</div>
			<button class="btn btn-action-1" sf-type="btn" sf-label="Form submit">Submit</a>
		</form>	

		<input type="text" name="name" placeholder="Your name" class="form-control" sf-type="input" sf-label="Input" />	

		<textarea name="message" placeholder="Your message" class="form-control" rows="3" sf-type="textarea" sf-label="Textarea"></textarea>	

		<select name="budget" class="form-select" sf-type="select" sf-label="Select">
			<option value="" disabled selected sf-type="option" sf-label="Option">Your budget</option>
			<option value="<1000" sf-type="option" sf-label="Option">Less than $1000</option>
			<option value=">1000" sf-type="option" sf-label="Option">More than $1000</option>
		</select>	

		<label class="form-check" sf-type="container" sf-label="Checkbox">
			<input class="form-check-input" type="checkbox" name="checkbox" sf-type="input" sf-label="Input">
			<span class="form-check-label" sf-type="text" sf-label="Text">Checkbox text</span>
		</label>
			

		<label class="form-check" sf-type="container" sf-label="Radio">
			<input class="form-check-input" type="radio" name="radio" value="radio-value-1" checked sf-type="input" sf-label="Input">
			<span class="form-check-label" sf-type="text" sf-label="Label">Radio option 1</span>
		</label>
		<label class="form-check" sf-type="container" sf-label="Radio">
			<input class="form-check-input" type="radio" name="radio" value="radio-value-2" sf-type="input" sf-label="Input">
			<span class="form-check-label" sf-type="text" sf-label="Label">Radio option 2</span>
		</label>
			

		<label class="form-check form-switch" sf-type="container" sf-label="Switch">
			<input class="form-check-input" type="checkbox" name="switch" sf-type="input" sf-label="Input">
			<span class="form-switch-wrapper" sf-type="container" sf-label="Wrapper">
				<div class="form-switch-pin" sf-type="container" sf-label="Pin"></div>
			</span>
			<span class="form-check-label" sf-type="text" sf-label="Text">Switch text</span>
		</label>
			

		<button class="btn btn-action-1" sf-type="btn" sf-label="Form submit">Button text</a>	

Error!

Close

What’s New?

Fade animations
Flip animations
Slide animations
Zoom animations

Upload image

Only the .png, .jpg, .jpeg, .gif, .svg, .webp
Maximum file size is 10Mb.

0 pages

Demo project (current)

1 page
Add new project

null

0 pages
null blocks
Edited null ago

There are no pages in this project.

Generate layout

Please enter a number of blocks.
blocks
Generate
Warning: your page layout will be replaced with the new one!

Clear layout

Are you sure want to clear
the layout of your page?
Cancel Clear layout
Element
Add new
A
Move Up
Move Down
Move In
Clone
C
Delete
X
Page
Save
S
Preview
P
Undo
Z
Apply

Mobile version

Our application is more convenient to use from PC, in mobile version it is not possible to export project, some features can work unstably. We recommend you to use the phone only for preview purposes and simple actions like add/delete/move block, change texts, images.
Got it! Don't show again
Subscribe to continue

Select your plan

Annual Monthly

Business

Save $99
$21 per month
$249 billed annually.
Need to build a few Bootstrap websites? Choose business and get 20 exports per month.
Get started

Agency

Save $119
$29 per month
$349 billed annually.
Frequently generate Bootstrap websites for clients? Pick this plan and get unlimited exports.
Get started
Already purchased? Sign In
Sign in

Login to your account to
unlock the feature

Don't have an account? Sign Up