hub.eb?material_id=46
Login
Back

Bootstrap Lists

Bootstrap uses lists quite a lot, particularly for navigation. The Verj.io Studio makes using these easy with List Panel controls and the Bootstrap 4 presentation template includes some useful property sets for Bootstrap list styling.

In this tutorial we'll create a static navigation menu using a list.

Before you start, download the starting material and open bootstrapLists.

Steps

1

This page needs a navigation menu underneath the header. You'll see in the Outline view that there is already a Nav Panel control on the page, this is where we'll add the menu.

2

Add a List Panel control to the Nav Panel.

You'll notice that the List Panel automatically contains one List Item but you can add as many List Items as you like.

3

Add a hyperlink control to each list item and give it the nav-link class.

Now click test  to see how the menu looks.

If you're interested in data-driven lists, see Dynamic Lists and try the List control.

Related

Introducing Lists
view
List Item Controls
view
Bootstrap Breakpoints
view
Modifying Bootstrap Breakpoints
view
Bootstrap Variables File
view
Bootstrap Responsive Column Ordering
view
Responsive Spacing
view
Static Lists
view
List Panel Controls
view
List Hyperlink Controls
view