Bootstrap Visual Designer — Original guides

Wappler documentation

Bootstrap Visual Designer — Original guides

Illustrated bootstrap visual designer guides, with the original steps and examples preserved.

Open in Wappler

Choose a guide. Version notes identify original instructions that use an earlier interface or framework.

Guides (14)

Bootstrap 4 & 5 ModalsIntroduction Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, forms or completely custom content. How it works Before getting started with BootstView guide→Bootstrap 4 FormsYou can quickly design your forms using Bootstrap 4 tools integrated in Wappler. In order to create a form first select where to insert it, in our example this is inside a Bootstrap 4 column: Open theView guide→Bootstrap CardsAbout A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards aView guide→Bootstrap LayoutCore Concept Bootstrap is a mobile first responsive design framework. This means that any styling - like setting the number of columns - in mobile view, will also apply to larger screens. This can be View guide→Bootstrap Typography and TextGlobal Settings Bootstrap sets basic global display, typography, and link styles as follows. 1. body text colour 2. link colour 3. body colour 4. native font stack that selects the best font-family foView guide→Converting Bootstrap 4 pages to Bootstrap 5With the new integration of Bootstrap 5 (beta 1) in Wappler we also created a converter, which you can use to convert your existing Bootstrap 4 pages to Bootstrap 5. What’s changed in Bootstrap 5 BootView guide→Creating a Bootstrap 5 NavbarIntro In this tutorial we will show you how to build a Bootstrap 5 Navbar from scratch. We will build a basic navbar with a logo and the navigation links aligned right. We will also apply a dark themeView guide→Creating Offcanvas Sidebar with Bootstrap 5Intro You can add hidden sidebars for your web sites and apps for navigation, shopping carts, and more which appear from the left, right, or bottom edge of the viewport. You can show and hide them usiView guide→Navigation Align OptionsYou already know HOW TO CREATE A NAVBAR and in this tutorial we will take a look at the align options for the navbar items. This also applies to the Nav element (in case you are not using a navbar, buView guide→Theme ManagerIntro With the help of the Theme Manager you can fully customize Bootstrap 4 and 5 design as per to your needs. We have integrated a high speed Sass compiler in Wappler so fully theme compilation and View guide→Theme Manager - Advanced OptionsYou already know how to customize the basic styles and appearance of your Bootstrap 4 theme, using the Theme Manager. This week we integrated an Advanced Mode, which allows you to customize every singView guide→Using Bootstrap 5 PlaceholdersIntro Placeholders can be used to enhance the experience of your application. You can display an animated placeholder, having a similar layout to your content, while your data is still loading. The apView guide→Using Bootstrap with Custom PathsIntro Often, when using custom Bootstrap 4 templates purchased or downloaded from a template provider you need to use custom include paths for the Bootstrap 4 css and js files. Local and CDN options aView guide→Using the Theme Manager with Bootstrap 5Intro You already know how to use the Theme Manager to customize your Bootstrap 4 sites. With the integration of Bootstrap 5 in Wappler, we also updated the Theme Manager to support Bootstrap 5 as welView guide→