Bootstrap 4 Modals
The first thing you need to do is to create the modal on your page. Right click App in the App Structure tree and open the modals category: Then select Modal: In order to be able to see the moda…
Bootstrap 4 Forms
You 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 …
Bootstrap 4 Cards
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. We will show…
Creating a Navbar
There are two ways of setting up a Bootstrap 4 Navbar on your page. Using the predefined navbar templates. Click the add button in Design View: Open the Headers category: You will find the dif…
Bootstrap 4 Layout Basics
Open your HTML file, and add App Connect and Bootstrap 4 frameworks to your page. Please check the How To Guide of the documentation to see how to include them. First, let’s add a container. Containe…
Navigation Align Options
You 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, bu…
Using Bootstrap Source Files
Creating a project with Bootstrap source files Update: Although the following will work, this video will show a much easier way to do the same: https://www.youtube.com/watch?v=85tt7KwUMLo We will as…
Theme Manager
With the help of the Theme Manager you can fully customize Bootstrap 4 design as per to your needs. We have integrated a high speed Sass compiler in Wappler so fully theme compilation and generatio…
Theme Manager - Advanced Options
You 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 si…
Using Bootstrap with Custom Paths
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 availab…
Converting Bootstrap 4 pages to Bootstrap 5
With 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 B…
Using the Theme Manager with Bootstrap 5
Intro 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 …
Using Bootstrap Icons
Bootstrap Icons Bootstrap Icons is a free, high quality, open source icon library with over 1,300 icons. You can use them in any of your projects. Include Bootstrap Icons Framework In order to use …
Creating a Bootstrap 5 Navbar
Intro 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 the…
Using Bootstrap 5 Placeholders
Intro 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…
Bootstrap Cards
About 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. Ca…
Bootstrap Layout
Core 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 …
Bootstrap Typography and Text
Global 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-fam…