Framework
Using Bootstrap sections
KitFront Bootstrap sections are designed to work with the Bootstrap starter kit. Start with the starter files, then copy sections from the editor into your project.
How it works
Open a Bootstrap section
Browse a category and open the Bootstrap version of the section you want to use.
Preview the section
Use the editor preview to check the section on desktop, tablet, and mobile before copying code.
Copy HTML
Copy the HTML tab and paste it into your page file, such as index.html, about.html, or contact.html.
Copy CSS
Copy the CSS tab and paste it into style.css. Some sections may include a note if no extra CSS is required.
Copy JS if available
If the JS tab is visible, copy that code into custom.js. If there is no JS tab, no extra JavaScript is needed.
Editor tabs
Bootstrap sections can include Preview, HTML, CSS, and JS tabs. The JS tab appears only when that section needs custom JavaScript.
- Preview shows the section layout and responsive views.
- HTML contains the markup you paste into your page.
- CSS contains section-specific styles for
style.css. - JS appears only when extra JavaScript is required.
Where to paste code
- Paste HTML into your page file, such as
index.html. - Paste CSS into
style.css. - Paste JavaScript into
custom.js. - Do not paste section code into
core.cssorcore.js.
Things to remember
- Always use the Bootstrap starter kit before copying Bootstrap sections.
- Copy HTML first, then CSS, then JS only if available.
- Each code tab has its own copy button.
- All sections are designed to be responsive.
- You can customize any section after pasting it into your project.