Column 1 inner
			
			

				
Column 2 inner
			
		
	

		

			
Column inner text
		
	

		

			
You can put any element inside this container.
		
	

		
My heading text
	

		
Some text 
 with multiple lines in it.
	

		
You can put any custom code here - HTML, CSS, JS.
	

		Open modal
		

			

				

					

						
Modal heading
						
					
					

						

							
This is your modal content
							

								This modal is already centered. That means that it will always be applied to the center of your screen.
							
							

								You can customize the maximum width of this modal. To do that, make the following:

								Switch to the "Modal dialog" container;

								Open the "Advanced" tab and add one of the following classes:

								modal-sm to set maximum width less than 300px;

								modal-lg to set maximum width less than 800px;

								modal-xl to set maximum width less than 1140px;

								The default maximum with is 500px.
							
							

								You can also make the modal fullscreen sized. These classes will do that:

								modal-fullscreen - the modal is always fullscreen sized;

								modal-fullscreen-sm-down - the modal is in fullscreen mode only if the screen size is below the "SM" breakpoint (less than 576px);

								modal-fullscreen-md-down - the modal is in fullscreen mode only if the screen size is below the "MD" breakpoint (less than 768px);

								modal-fullscreen-lg-down - the modal is in fullscreen mode only if the screen size is below the "LG" breakpoint (less than 992px);

								modal-fullscreen-xl-down - the modal is in fullscreen mode only if the screen size is below the "XL" breakpoint (less than 1200px);

								modal-fullscreen-xxl-down - the modal is in fullscreen mode only if the screen size is below the "XXL" breakpoint (less than 1400px).
							
							

								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.
							
							

								The modal "header" and "footer" are always visible. You can add some important information here.
							
							

								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:

								Move the "close" button to the "Modal content" container;

								Go to the "Display" tab, set the "Position" to "Absolute";

								Set the "Position from top" and "Position from right" both to "0%";

								Go to the "Margins" tab, add new "Top" and "Right" margins for the "XS" breakpoint;

								Set these margins to "1 rem" (16px);

								Delete the "Modal header" container.
							
							

								Hope you\'ll enjoy working with the Bootstrap Modal windows 😉
							
						
					
					

						

							

								
Some text that always visible for a user (not hidden by scroll).
							
							

								Close
							
						
					
				
			
		
	

		

			

				
				
				
				
				
				
			
			

				

					

					

						
Tips & tricks
						

							Here are some tips on how to customize this carousel. 

							Please, read if you working with the carousel for the first time.
						
						
Active slide
						

							You must mark some of your slides as active. Otherwise, the carousel will not work (because it shows only the active slide).
						
						

							To do that, choose Slide-X in the left panel, go to the Advanced tab in the right column and add an active class to the chosen slide. If you\'re using indicators, you should also add an active class to one of the indicators. e.g. Slide 2 and Indicator for slide 2 should have an active class
						
						
Height of the carousel
						

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

							To change this minimal height, choose the most top-level Carousel element in the left panel, open the Advanced tab and change the 40rem value for the style attribute.
						
						

							If you want to make the height of a carousel equal to the height of the screen, change the 40rem value to 100vh. The vh units are relative to the screen size. So 100vh is 100% of a screen height, 80vh is 80% of a screen height.
						
						

							You can also move the carousel outside the Bootstrap Container element to make it screen-wide.
						
						
Dark/light controls
						

							You can switch between light or dark controls. 
						
						

							Choose the most top-level Carousel element in the left panel, open the Advanced tab and add or remove the carousel-dark class.
						
						

							You can also toggle on/off circles under the Previous/Next buttons by adding/removing the carousel-arrows-circled class for the Carousel element.
						
						

							You can simply remove the Control - Previous and Control - Next elements if you don\'t need to use them.
						
						
Carousel indicators
						

							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.
						
						

							Each indicator points to the slide it\'s connected with via the data-bs-slide-to attribute. The enumeration starts from 0. That means that the indicator pointing to the first slide has adata-bs-slide-to attribute with the 0 value and the indicator pointing to the third slide has adata-bs-slide-to attribute with the 2 value.
						
						

							So, the regular workflow of adding the new slide is:

							Choose the last slide in the left panel and clone it;

							Choose the last indicator in the left panel and clone it;

							Choose the newly created indicator, go to the Advanced tab, and increase the value of the data-bs-slide-to attribute on 1.
						
						

							You can simply remove the Indicators container if you don\'t need to use them.
						
						
Fade/Slide effect
						

							You can switch between fade or slide effects. 
						
						

							Choose the most top-level Carousel element in the left panel, open the Advanced tab and add or remove the carousel-fade class.
						
						
Autoplay
						

							You can make carousel cycle slides automatically.
						
						

							To enable autoplay, choose the most top-level Carousel element in the left panel, open the Advanced tab and set the data-bs-interval attribute value to 5000. 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 false to disable autoplay.
						
						

							Then add the data-bs-ride attribute with value carousel. It will start cycling slides after the page load.
						
						

							Then press Save & Close button and refresh the page to apply changes.
						
						

							You can find some more useful options here: https://getbootstrap.com/docs/5.0/components/carousel/#options
						
					
				
				

					

					

					

						
Image - fit
						

							This image will always fit to the height / width of a slide.
 Use it if you want to show some item or person.
						
					
				
				

					

					

					

						
Image - cover
						

							This image will always cover the slide. 
That means that it will be stretched to fill the slide.
						
					
				
				

					

					

						
Orange
						

							This slide has an "action-7" background color which is close to the "Orange" color. 

							You can change the color of a background or set some image to it.
						
					
				
				

					

					

						
Lime
						

							This slide has an "action-8" background color which is close to the "Lime" color. 

							You can change the color of a background or set some image to it.
						
					
				
				

					

					

						

							
Dark slide. 
Vertically-centered text.
							

								This slide caption is also centered verticaly. 

								Please, remove the bottom margin for the last element in the caption for correct positioning.
							
						
					
				
			
			
				
			
			
				
			
		
	

		

			

				

					Accordion Item #1
				
				

					

						
Tab 1 text. 
You can open/close any tab of an accordion and save the page - the changes will be saved.
						
Add the accordion-flush class in the "Advanced" tab to remove some borders and some rounded corners to render accordion edge-to-edge with it\'s parent container.
					
				
			
			

				

					Accordion Item #2
				
				

					

						
Tab 2 text.
					
				
			
			

				

					Accordion Item #3
				
				

					

						

							Tab 3 text. 
							
You can put any content in the Tab body. 

							For example, an image:
						
						
					
				
			
		
	

		Show hidden content
		

			

				
This text was hidden but now you can see it.
			
		
	

		Link text
	

		
			
You can put any element inside this link-container except another links/link-containers. Anything inside this container will be clickable.
		
	

		Button text
	

		

			Open Dropdown
			

				

					Link
				
				

					Documentation
				
				

					All dropdown options
				
				

					

				
				

					Just a text
				
				

					Disabled link
				
			
		
	

		

			
			

				Thanks for your message!
			
			

				Error!
			
			
			
									
				

					
				
				

				

					

						

							
						
						
					
				
				

				

					
						Your budget
						Less than $1000
						More than $1000
					
				
				
				
				

					
						
						Radio option 1
					
				
				

					
						
						Radio option 2
					
				
				

				

					
						
						Checkbox text
					
				
				

					
						
						
							

						
						Switch text
					
				
				

				

					
				
			
			Submit
		
	

		
			Your budget
			Less than $1000
			More than $1000
		
	

		
			
			Checkbox text
		
	

		
			
			Radio option 1
		
		
			
			Radio option 2
		
	

		
			
			
				

			
			Switch text
		
	

		Button text