Loading...
Select any of the samples below to insert them into your HTML webpage. They can be added under the <body> tag. Note: In some cases, a custom CSS styling may also be included which may lead to changes across the entire webpage.
An accordion expands and pushes content other content to display an item. It is different from a drop-down since a drop-down overlays/floats over other content.
An accordion expands and pushes content other content to display an item. It is different from a drop-down since a drop-down overlays/floats over other content.
An accordion expands and pushes content other content to display an item. It is different from a drop-down since a drop-down overlays/floats over other content.
A circular button with the color blue (by use of 'w3-blue' css class). On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class). Feel free to customize it by using both CSS and class attributes using the HTML Editor.
A button with the color blue (by use of 'w3-blue' css class). On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class). 'w3-round' class attribute is added to make it have rounded corners. Feel free to customize it by using both CSS and class attributes using the HTML Editor.
A button with the color blue (by use of 'w3-blue' css class). On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class). 'w3-round' class attribute is added to make it have rounded corners. Feel free to customize it by using both CSS and class attributes using the HTML Editor.
A button with the color blue (by use of 'w3-blue' css class). On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class). 'w3-round' class attribute is added to make it have rounded corners. Feel free to customize it by using both CSS and class attributes using the HTML Editor.
A simple button with the color blue (by use of 'w3-blue' css class). On hover (mouse-over) it changes to a color of indigo ('w3-indigo' css class). Feel free to customize it by using both CSS and class attributes using the HTML Editor.
Display a drop-down menu on (mouse-over) hover. The menu will retain color blue on hover
Navigation bar that can be placed at the top of a page. This one contains three (3) link spaces suitable for three (3) category navigations
Navigation bar that can be placed at the top of a page. This one contains three (3) link spaces suitable for three (3) category navigations
Navigation bar that can be placed at the top of a page. This one contains three (3) link spaces suitable for three (3) category navigations
Navigation bar that can be placed at the top of a page. This nav-bar includes an accordion (drop-down like) menu making it suitable for various screen-sizes (responsive) especially with mobile devices.
Navigation bar that can be placed at the top of a page. This nav-bar includes an accordion (drop-down like) menu making it suitable for various screen-sizes (responsive) especially with mobile devices.
Navigation bar that can be placed at the top of a page. This nav-bar includes an accordion (drop-down like) menu making it suitable for various screen-sizes (responsive) especially with mobile devices.
Navigation bar that can be placed at the top of a page
Navigation bar that can be placed at the top of a page
Navigation bar that can be placed at the top of a page
A basic side-bar menu that expands from the left side of the page. For proper use, this item will require the entire HTML page's layout to be arranged in a left-right manner. Ensure that the expanded side-bar is not mixed with the actual page content.
This tab corresponds to the button 1 in the tabs
This tab corresponds to the button 2 in the tabs
This tab corresponds to the button 3 in the tabs
Tabbed content with usable tabs. For example, Tab-1 will target Div-1. This will require you have an equal number of tab buttons and tab divs respectively.
This tab corresponds to the button 1 in the tabs
This tab corresponds to the button 2 in the tabs
This tab corresponds to the button 3 in the tabs
Tabbed content with usable tabs. For example, Tab-1 will target Div-1. This will require you have an equal number of tab buttons and tab divs respectively.
Beta Version: This is still a work in progress. Feel free to make suggestions or ask for any new (missing) HTML elements
Block Templates -Planned Feature ::: Add HTML templates e.g. image gallery, tabbed-container, auto-fit-window, etc
Provided below is a web link to view the saved project
https://www.pagesection.com/Copy and share the link below to view the project
https://view.pagesection.com/0-_bootstrap-3-hero-1-1
Access & edit using the same web link : https://www.pagesection.com/editor/0-_bootstrap-3-hero-1-1
Use the toggle setting above to enable or disable public access to this editor project (web url link).
Private projects cannot be accessed by other users, the owner must be required to log-in to get access.
Public projects can be accessed, edited and or copied by other users of the editor using the same web url link.
HTML Editor projects are private by default. You can enable public access to allow other users edit this (HTML Editor) project using the same url web link. However, if the project is made public, changes you make to it will also be public. Other users cannot make public changes to a project (that they do not own) unless they save a personal clone/copy which they can also make private or public. You have the option to enable/disable public access to this project at any other time, as long as you are signed-in and authenticated as the owner of the project.
This is important if you want to view/share a link to this project with updated changes.
Would you like to save & update changes?