PWA Bootstrap

https://github.com/wisedev0103/pwa-bootstrap
Admin
A Progressive Web App (PWA) template utilizing Bootstrap for a responsive and modern user interface.
Tokens:884,998
Snippets:3,335
Trust Score:5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Bootstrap Pricing Table Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/component-pricing.html

Demonstrates a classic Bootstrap pricing table structure with a one-time payment option, including features like demo file, free install, product guide, and lifetime updates. Includes a purchase button.

```HTML
<h3>$59.99</h3>

One Time Payment
----------------

*   Demo File
*   Free Install
*   Product Guide
*   Lifetime Updates

[Purchase](#)
```

--------------------------------

### Course Listing

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-learning-home-1.html

Displays a list of courses with titles, durations, and 'Get Started' or 'Subscribe' buttons. Includes images for visual representation.

```HTML
<div>
  <img src="images/pictures/faces/1s.png" alt="Course Image">
  <h5>POPULAR</h5>
  <h3>Developing on<br>Small Screens</h3>
  <p>1 Hour, 40 Minutes</p>
  <a href="#">Get Started</a>
</div>

<div>
  <img src="images/pictures/faces/1s.png" alt="Course Image">
  <h5>FRESHLY</h5>
  <h3>The Principles<br>of Photography</h3>
  <p>2 Hours, 25 Minutes</p>
  <a href="#">Get Started</a>
</div>

<div>
  <img src="images/pictures/faces/1s.png" alt="Course Image">
  <h5>PREMIUM</h5>
  <h3>Learn to Create<br>Amazing Mobile<br>PWA Templates</h3>
  <p>3 Hour, 10 Minutes</p>
  <a href="#">Subscribe</a>
</div>
```

--------------------------------

### Device Compatibility Examples

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-learning-course-1.html

Demonstrates how to ensure PWA compatibility across different devices using Bootstrap. Includes image links for visual examples.

```HTML
#### Chapter 5

Device Compatibility
====================

Course Time: 51 Minutes - Video Guide

[![img](images/empty.png)](images/pictures/21.jpg "Your Caption")

[![img](images/empty.png)](images/pictures/14.jpg "Your Caption")

[![img](images/empty.png)](images/pictures/18.jpg "Your Caption")
```

--------------------------------

### Device Compatibility Examples

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-learning-course-1.html

Demonstrates how to ensure PWA compatibility across different devices using Bootstrap. Includes image links for visual examples.

```HTML
#### Chapter 5

Device Compatibility
====================

Course Time: 51 Minutes - Video Guide

[![img](images/empty.png)](images/pictures/21.jpg "Your Caption")

[![img](images/empty.png)](images/pictures/14.jpg "Your Caption")

[![img](images/empty.png)](images/pictures/18.jpg "Your Caption")
```

--------------------------------

### HTML Typography Examples

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/component-typography.html

Demonstrates various HTML heading tags (h1 to h5) and their corresponding styles as provided by the StickyMobile Bootstrap theme. Includes examples with and without badges.

```HTML
<h1>Heading 1</h1>

<h1>Heading - h1</h1>

<h2>Heading 2</h2>

<h2>Heading - h2</h2>

<h3>Heading 3</h3>

<h3>Heading - h3</h3>

<h4>Heading 4</h4>

<h4>Heading - h4</h4>

<h5>Heading 5</h5>

<h5>Heading - h5</h5>
```

--------------------------------

### Featured Course: Year of the PWA

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-learning-home-1.html

Highlights a featured course about the importance of Progressive Web Applications (PWAs), including a description and a 'Get Started' link.

```HTML
<div>
  <h5>The Year<br>Of the PWA</h5>
  <p>A course to teach you about the importance of Progressive Web Applications</p>
  <a href="#">Get Started</a>
</div>
```

--------------------------------

### List Styling Examples

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-settings-1.html

Provides examples of different list styles, including unordered lists with bullet points and ordered lists with numbers. This demonstrates basic HTML list formatting.

```HTML
<!-- Unordered Lists -->
<ul>
    <li>List</li>
    <li>List</li>
    <li>List</li>
</ul>

<ul>
    <li>List</li>
    <li>List</li>
    <li>List</li>
</ul>

<!-- Ordered Lists -->
<ol>
    <li>List</li>
    <li>List</li>
    <li>List</li>
</ol>
```

--------------------------------

### List Styling Examples

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-settings-1.html

Provides examples of different list styles, including unordered lists with bullet points and ordered lists with numbers. This demonstrates basic HTML list formatting.

```HTML
<!-- Unordered Lists -->
<ul>
    <li>List</li>
    <li>List</li>
    <li>List</li>
</ul>

<ul>
    <li>List</li>
    <li>List</li>
    <li>List</li>
</ul>

<!-- Ordered Lists -->
<ol>
    <li>List</li>
    <li>List</li>
    <li>List</li>
</ol>
```

--------------------------------

### Bootstrap Product Card Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-delivery-home-4.html

Displays a food item with an image, name, and price. This is a common pattern for e-commerce or listing UIs.

```HTML
<a href="#">\n\n![img](images/food/500x500/1.png)\n\nFast Food **Hamburger**\n\n##### $9.50\n\n</a>
```

--------------------------------

### Image Gallery Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-content-article-4.html

Demonstrates an image gallery component within the StickyMobile PWA. This section highlights that the website is built with HTML and can be converted to WordPress.

```HTML
<img src="images/empty.png" alt="Image Gallery Item 1">
<img src="images/empty.png" alt="Image Gallery Item 2">
<img src="images/empty.png" alt="Image Gallery Item 3">
```

--------------------------------

### Bootstrap Property Listing Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-listing-landing-3.html

Shows how to display property listings (Houses, Apartments, Warehouses) with counts using Bootstrap. This snippet is for presenting categorized items.

```HTML
<div>
  <h3>Houses</h3>
  <p><strong>8,361</strong> for Rent or Sale</p>
</div>
<div>
  <h3>Apartments</h3>
  <p><strong>8,361</strong> for Rent or Sale</p>
</div>
<div>
  <h3>Warehouses</h3>
  <p><strong>8,361</strong> for Rent or Sale</p>
</div>
```

--------------------------------

### Starter HTML and Documentation

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/new.html

The package includes a simple `_starter.html` file for quick setup and comprehensive documentation for all features. Video documentation is also planned to further assist users.

```HTML
<!-- Includes simple _starter.html -->
```

--------------------------------

### Bootstrap Navigation Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-delivery-profile.html

Demonstrates a typical Bootstrap navigation bar for a PWA, including links to Home, Features, Pages, Search, and Settings. This structure is common for site-wide navigation.

```HTML
<nav>
  <a href="index.html">Home</a>
  <a href="index-components.html">Features</a>
  <a href="index-pages.html">Pages</a>
  <a href="index-search.html">Search</a>
  <a href="#">Settings</a>
</nav>
```

--------------------------------

### Course Section

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-learning-home-1.html

Displays featured courses with titles, durations, and 'Get Started' buttons. This structure is common for e-learning platforms or feature highlights.

```HTML
<h5>POPULAR</h5>

Developing on  
Small Screens  

================================

1 Hour, 40 Minutes

<a href="#">Get Started</a>
```

--------------------------------

### StickyMobile Bootstrap Page and Starter Links

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/delivery.html

Links to view different page styles and starter templates within the StickyMobile Bootstrap project, including 'AppStyled & Classic' pages and 'Designed like Apps' starters.

```HTML
<a href="pages.html">Pages</a>
<a href="splash.html">Starters</a>
```

--------------------------------

### Bootstrap Navigation Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-delivery-profile.html

Demonstrates a typical Bootstrap navigation bar for a PWA, including links to Home, Features, Pages, Search, and Settings. This structure is common for site-wide navigation.

```HTML
<nav>
  <a href="index.html">Home</a>
  <a href="index-components.html">Features</a>
  <a href="index-pages.html">Pages</a>
  <a href="index-search.html">Search</a>
  <a href="#">Settings</a>
</nav>
```

--------------------------------

### Featured Course: Year of the PWA

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-learning-home-1.html

Highlights a specific course about the importance of Progressive Web Applications (PWAs), including a description and a 'Get Started' link.

```HTML
<h5>FEATURED</h5>

The Year  
Of the PWA
=====================

A course to teach you about the importance of Progressive Web Applications  
  

<a href="#">Get Started</a>
```

--------------------------------

### Bootstrap Settings UI Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-delivery-home-4.html

Provides UI elements for customizing application settings, including dark mode, page highlights with various colors, and background color options.

```HTML
Settings\n========\n\nFlexible and Easy to Use\n\n[](#)\n\n[Dark Mode\n\n](#)\n\n[Page Highlight **16 Colors Highlights Included** HOT](#) [Background Color **10 Page Gradients Included** NEW](#)
```

--------------------------------

### Switch Gallery Views

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/gallery-views.html

This section allows users to switch between different gallery views. Each view can contain multiple design elements. The provided images are examples of different desk setups and cityscapes.

```HTML
<h4>Select your View</h4>

[![img](images/empty.png)

#### Messy Desk?

Some may consider this to be a very messy desk.



](images/pictures/10t.jpg "Vynil and Typerwritter")[![img](images/empty.png)

#### Designers Desk

With all the gadgets you'd ever wish for.



](images/pictures/11t.jpg "Fruit Cookie Pie")[![img](images/empty.png)

#### Apple Watch

The perfect and small notification device.



](images/pictures/28t.jpg "Plain Cookies and Flour")[![img](images/empty.png)

#### City Landscape

It's absolutely gorgeous, we'd love to see it live.



](images/pictures/18t.jpg "Pots and Stuff")[![img](images/empty.png)

#### Typography and iPhone 5

A beautifully captured snap with great contrast.



](images/pictures/14t.jpg "Delicious Strawberries")[![img](images/empty.png)

#### Feather and Paper?

Going back to days when things were simplere.



](images/pictures/15t.jpg "A Beautiful Camera")
```

--------------------------------

### Switch Gallery Views

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/gallery-views.html

This section allows users to switch between different gallery views. Each view can contain multiple design elements. The provided images are examples of different desk setups and cityscapes.

```HTML
<h4>Select your View</h4>

[![img](images/empty.png)

#### Messy Desk?

Some may consider this to be a very messy desk.



](images/pictures/10t.jpg "Vynil and Typerwritter")[![img](images/empty.png)

#### Designers Desk

With all the gadgets you'd ever wish for.



](images/pictures/11t.jpg "Fruit Cookie Pie")[![img](images/empty.png)

#### Apple Watch

The perfect and small notification device.



](images/pictures/28t.jpg "Plain Cookies and Flour")[![img](images/empty.png)

#### City Landscape

It's absolutely gorgeous, we'd love to see it live.



](images/pictures/18t.jpg "Pots and Stuff")[![img](images/empty.png)

#### Typography and iPhone 5

A beautifully captured snap with great contrast.



](images/pictures/14t.jpg "Delicious Strawberries")[![img](images/empty.png)

#### Feather and Paper?

Going back to days when things were simplere.



](images/pictures/15t.jpg "A Beautiful Camera")
```

--------------------------------

### Bootstrap Navigation Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/grocery.html

Demonstrates a typical Bootstrap navigation structure with links to Home, Features, Pages, Search, and Settings. This is a common pattern for organizing site content.

```HTML
<nav>
  <a href="index.html">Home</a>
  <a href="index-components.html">Features</a>
  <a href="index-pages.html">Pages</a>
  <a href="index-search.html">Search</a>
  <a href="#">Settings</a>
</nav>
```

--------------------------------

### Simulate Add to Home - Banners

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/component-add-to-home.html

This section explains how to use banners to encourage users to install the Progressive Web App (PWA) to their home screen. It provides examples for Android and iPhone, emphasizing the app-like experience.

```HTML
[Android](#)

[iPhone](#)
```

--------------------------------

### Steps to Success Guide

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-fitness-home-2.html

Outlines key steps for achieving fitness goals, such as staying hydrated, eating clean, maintaining a routine, and focusing on form. Each step includes an image and a brief explanation.

```HTML
[<br>  1<br>  ![img](images/fitness/4m.jpg)<br>  #### Stay Hydrated<br><br>  For best results, drink at least 6 glasses of Water daily.<br><br><br>](#)
```

```HTML
[<br>  2<br>  ![img](images/fitness/7m.jpg)<br>  #### Eat Clean<br><br>  Stay away from processed foods. Eat natural and clean.<br><br><br>](#)
```

```HTML
[<br>  3<br>  ![img](images/fitness/6m.jpg)<br>  #### Keep a Routine<br><br>  Make a habbit of working out each day and stick to it!<br><br><br>](#)
```

```HTML
[<br>  4<br>  ![img](images/fitness/8m.jpg)<br>  #### Focus on Form<br><br>  Form follows function. Focus on a great feel, not weights.<br><br><br>](#)
```

--------------------------------

### Bootstrap Basic Pricing Table

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/component-pricing.html

Showcases a basic Bootstrap pricing table design offering essential features and email support. It includes details like free install, product guide, and lifetime updates, with a price of $19.99 and a purchase button.

```HTML
All the essential features  
and email support
----------------------------------------------

*   Free Install
*   Product Guide
*   Lifetime Updates

### $19.99

[Purchase](#)
```

--------------------------------

### Long Vibration Examples

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/component-vibrate.html

Includes examples for longer vibration durations (250ms, 500ms) for significant user feedback. These are useful for more pronounced alerts or confirmations.

```JavaScript
// Example for a long vibration (250ms)
// navigator.vibrate(250);

// Example for a very long vibration (500ms)
// navigator.vibrate(500);
```

--------------------------------

### App Starters Page Link

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/fitness.html

A link to a page demonstrating 'App Starters' which are designed to look like native mobile applications, providing a quick way to start development.

```HTML
[Designed like Apps](splash.html)
```

--------------------------------

### Medium Vibration Examples

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/component-vibrate.html

Offers examples for medium vibration durations (50ms, 100ms) to provide more noticeable feedback. These are suitable for interactions that require a clearer indication of action.

```JavaScript
// Example for a medium vibration (50ms)
// navigator.vibrate(50);

// Example for a longer medium vibration (100ms)
// navigator.vibrate(100);
```

--------------------------------

### StickyMobile Bootstrap Supporting Packages Links

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/learning.html

Links to additional packages that complement the learning-focused content, such as Media, Content, and Components & Elements packages. These help in further enhancing the event pages.

```HTML
<a href="media.html">Media Package</a> <a href="content.html">Content Package</a> <a href="index-components.html">Components & Elements</a>
```

--------------------------------

### Bootstrap Accordion Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/component-tabs.html

Provides an example of Bootstrap accordions, which allow content to be expanded or collapsed. Each accordion section can contain various elements like text, images, and lists.

```HTML
Accordion Title 1

This is the accordion content. You can add any content you want to it. Really, anything! Add images, text, lists, captions or any element you want.
```

--------------------------------

### Course Overview Details

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-learning-actions.html

Presents a comprehensive overview of a course, including the number of courses, total duration, and a summary of content like videos, articles, and guarantees. Includes an option to close the menu.

```HTML
<h1>Course Details</h1>
<p>Full Information About Our Course</p>
<img src="images/pictures/6s.jpg" alt="Course Image">
<h3>Create videos using your smartphone.</h3>
<h5>15 Courses - 2 hours 25 Minutes</h5>
<ul>
  <li>3 Hour Video + 30 PDF Articles</li>
  <li>13 Articles with Downloadable Content</li>
  <li>30 Day Money-Back Guarantee</li>
</ul>
<a href="#">Close Menu</a>
```

--------------------------------

### Short Vibration Examples

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/component-vibrate.html

Provides examples of short vibration durations (5ms, 10ms) for subtle user feedback. These are useful for unobtrusive indications of user interaction, such as a quick tap confirmation.

```JavaScript
// Example for a short vibration (5ms)
// navigator.vibrate(5);

// Example for a slightly longer short vibration (10ms)
// navigator.vibrate(10);
```

--------------------------------

### Sticky UI Learning Pack Updates

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/new50.html

Showcases the enhancements to the Sticky UI Learning Pack, which now comprises 14 pages. This pack is suitable for educational platforms and learning management systems.

```HTML
<h3>Learning Pages</h3>
<p>Added 4 New Pages</p>
<p><a href="learning.html">View Learning Pack - 14 Pages</a></p>
<p>Learning Pack was released in Sticky v3.4 with 10 Pages. With Sticky v5.0 the Learning Pack has 14 Pages.</p>
```

--------------------------------

### Steps to Success Guide

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-fitness-home-2.html

Outlines key steps for achieving fitness goals, such as staying hydrated, eating clean, maintaining a routine, and focusing on form. Each step includes an image and a brief explanation.

```HTML
[<br>  1<br>  ![img](images/fitness/4m.jpg)<br>  #### Stay Hydrated<br><br>  For best results, drink at least 6 glasses of Water daily.<br><br><br>](#)
```

```HTML
[<br>  2<br>  ![img](images/fitness/7m.jpg)<br>  #### Eat Clean<br><br>  Stay away from processed foods. Eat natural and clean.<br><br><br>](#)
```

```HTML
[<br>  3<br>  ![img](images/fitness/6m.jpg)<br>  #### Keep a Routine<br><br>  Make a habbit of working out each day and stick to it!<br><br><br>](#)
```

```HTML
[<br>  4<br>  ![img](images/fitness/8m.jpg)<br>  #### Focus on Form<br><br>  Form follows function. Focus on a great feel, not weights.<br><br><br>](#)
```

--------------------------------

### Backup and Setup Status

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-task-progress.html

Indicates the status of server backup and profile setup. Shows progress percentages for both operations, suggesting a system that provides real-time feedback on background tasks.

```HTML
70% Complete

One thing left.
```

--------------------------------

### Bootstrap Navigation Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-listing-landing-3.html

Demonstrates a typical Bootstrap navigation bar structure with links to Home, Features, Pages, Search, and Settings. This is a common pattern for website navigation.

```HTML
<nav>
  <a href="index.html">Home</a>
  <a href="index-components.html">Features</a>
  <a href="index-pages.html">Pages</a>
  <a href="index-search.html">Search</a>
  <a href="#">Settings</a>
</nav>
```

--------------------------------

### Bootstrap Filter Options Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-delivery-home-4.html

Demonstrates various filter options for a search results page, including delivery type, price range, serving size, sorting, and categories. It utilizes Bootstrap's collapse and input components.

```HTML
Filter Results\n==============\n\nFilter your Search Results\n\n[](#)\n\nFilters can be expanded by default or collapsed. You can use any checkbox or radio style found in [Component Inputs](component-inputs.html). We have plenty of options to make your filters rich and powerful.\n\n##### Delivery Type\n\n Pick Up\n\n \u003e 15 Minutes\n\n \u003e 25 Minutes\n\n \u003e 1 Hour\n\n \u003e 2 Hours\n\n \u003e 3 Hours\n\n##### Price Range\n\nMin Price From $10 $50 $100 $250 $500\n\nMax Price To $15 $25 $100 $250 $500\n\n##### Serving Size\n\nMin Sq Ft. From 1 Person 2 Person 3 Person 5+ Person\n\n[Sort By](#collapse-filter-1)\n\n Featured\n\n Price: Low to High\n\n Price: High to Low\n\n Avg. Customer Review\n\n New Arrivals\n\n[Category](#collapse-filter-1a)\n\n Fast Food\n\n Restaurant\n\n[Delivered By](#collapse-filter-2)\n\n Company Delivery\n\n Delivery Services\n\n[Price](#collapse-filter-2a)\n\n All Prices\n\n $25 +\n\n $50 +\n\n $100 +\n\n Over 100$\n\n[Rating](#collapse-filter-3)\n\n[Apply Filters](#)\n\nUse any element you wish from the [Component Inputs](component-inputs.html). We have plenty of options to make your filters rich and powerful.
```

--------------------------------

### Simulate Add to Home - Banners

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/component-add-to-home.html

Uses banners to more assertively encourage users to install the Progressive Web App (PWA) to their home screen, enhancing user conversion for app installation.

```html
<!-- Example for Android -->
<a href="#">Android</a>

<!-- Example for iPhone -->
<a href="#">iPhone</a>

<!-- General link -->
<a href="#">StickyMobile</a>
```

--------------------------------

### Course Overview Details

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-learning-actions.html

Presents a comprehensive overview of a course, including the number of courses, total duration, and a summary of content like videos, articles, and guarantees. Includes an option to close the menu.

```HTML
<h1>Course Details</h1>
<p>Full Information About Our Course</p>
<img src="images/pictures/6s.jpg" alt="Course Image">
<h3>Create videos using your smartphone.</h3>
<h5>15 Courses - 2 hours 25 Minutes</h5>
<ul>
  <li>3 Hour Video + 30 PDF Articles</li>
  <li>13 Articles with Downloadable Content</li>
  <li>30 Day Money-Back Guarantee</li>
</ul>
<a href="#">Close Menu</a>
```

--------------------------------

### Call to Action: Get Tickets for Envato Summer Sale

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-events-actions.html

This snippet is a call to action for the 'Envato Summer Sale', encouraging users to 'Get Tickets'. It also includes a link to directions and contact information for the event organizer.

```HTML
<a href="#">Get Tickets</a>

<p>Event Organizer</p>

<h4>Enabled Studio</h4>

<a href="#">Follow</a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate ac nunc nec accumsan. Nullam ultricies quis lacus a suscipit. Vivamus efficitur eros quis erat euismod consectetur</p>

<a href="#">Get directions</a>

<p>United States</p>
<p>California, Palo Alto<br>
1st Apple Street, 31515</p>
```

--------------------------------

### Bootstrap Navigation and Layout

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-learning-actions.html

Demonstrates basic Bootstrap navigation links and page structure, including home, features, pages, search, and settings. Also shows how to structure content with headings and links for learning and education sections.

```HTML
<nav>
  <a href="index.html">Home</a>
  <a href="index-components.html">Features</a>
  <a href="index-pages.html">Pages</a>
  <a href="index-search.html">Search</a>
  <a href="#">Settings</a>
</nav>

<h1>Learning & Education Actions</h1>
<p>Interact with your Education and Learning Pages!</p>

<a href="#">Action Sheets</a>
<a href="#">Action Modals</a>

<h2>Table of Contents</h2>
<a href="#">Chapter 1: Introduction</a>
<a href="#">Chapter 2: Ingredients</a>
<a href="#">Chapter 3: Preparation</a>
<a href="#">Chapter 4: Conclusion</a>
<a href="#">Close Menu</a>
```

--------------------------------

### Call to Action: Get Tickets for Envato Summer Sale

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-events-actions.html

This snippet is a call to action for the 'Envato Summer Sale', encouraging users to 'Get Tickets'. It also includes a link to directions and contact information for the event organizer.

```HTML
<a href="#">Get Tickets</a>

<p>Event Organizer</p>

<h4>Enabled Studio</h4>

<a href="#">Follow</a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate ac nunc nec accumsan. Nullam ultricies quis lacus a suscipit. Vivamus efficitur eros quis erat euismod consectetur</p>

<a href="#">Get directions</a>

<p>United States</p>
<p>California, Palo Alto<br>
1st Apple Street, 31515</p>
```

--------------------------------

### Subscription and Trial Information

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-learning-chapters.html

Displays information about subscribing to unlimited books and courses, including a free trial offer and monthly subscription cost.

```HTML
Subscribe for
Unlimted
Books and Courses
<a href="#">Start your Trial Now</a>
30 Day Free Trial then 9.99 / month
```

--------------------------------

### Image Gallery Example (HTML)

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-content-article-1.html

Illustrates how to create a simple image gallery using HTML anchor tags and image elements. This is useful for showcasing visual content within the PWA.

```HTML
<a href="images/pictures/21.jpg" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
<a href="images/pictures/14.jpg" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
<a href="images/pictures/18.jpg" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
```

--------------------------------

### Enhanced Button Styling Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/documentation/z_components.html

This example showcases an enhanced button with multiple utility classes applied for styling. It creates a medium-sized, full-width button with rounded corners, a large shadow, a highlight background, and white bolded uppercase text.

```HTML
<a href="#" class="btn btn-m rounded-sm shadow-xl bg-highlight color-white font-900 text-uppercase">Button</a>
```

--------------------------------

### Bootstrap Navigation and Layout

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-learning-home-3.html

Demonstrates basic Bootstrap navigation structure with links to Home, Features, Pages, Search, and Settings. Also shows a common layout pattern for displaying content sections with headings and descriptive text.

```HTML
<nav>
  <a href="index.html">Home</a>
  <a href="index-components.html">Features</a>
  <a href="index-pages.html">Pages</a>
  <a href="index-search.html">Search</a>
  <a href="#">Settings</a>
</nav>
```

--------------------------------

### HTML List Examples

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-health-actions.html

This section provides examples of different list types in HTML: unordered lists (bullet points) and ordered lists (numbered). It also includes introductory text about font weight selection, though the primary content here is list structure.

```HTML
### Lists

Select the thickness of your font with ease. Add a secondary class that will change weights.

*   List
*   List
*   List

*   List
*   List
*   List

1.  List
2.  List
3.  List
```

--------------------------------

### Bootstrap Navigation Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-hotel-detailed-1.html

Demonstrates a typical Bootstrap navigation structure with links to Home, Features, Pages, Search, and Settings. This is a common pattern for organizing site content.

```HTML
<nav>
  <a href="index.html">Home</a>
  <a href="index-components.html">Features</a>
  <a href="index-pages.html">Pages</a>
  <a href="index-search.html">Search</a>
  <a href="#">Settings</a>
</nav>
```

--------------------------------

### StickyMobile Bootstrap - Action Sheet Content Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/component-actions-general.html

Illustrates how Action Sheets can display various content, including multiple boxes and complex information. This example shows an Action Sheet that can be positioned at the top of the page and includes navigation buttons like 'Back' and 'Proceed'.

```HTML
Hi, I'm an Action Sheet
=======================

I can show your users different boxes, or multiple boxes, have different styles, and even complex content. Let me show you.

[Show me more](#)

Top? No problem!
=======================

You can use action sheets here as well, it's really easy to add them wherever you want.

[Back](#)

[Proceed](#)

### Modal Sheets Too

You can use action sheets in any position. Fast, easy and add any content you need. Check out other examples.

[AWESOME](#)
```

--------------------------------

### StickyMobile Bootstrap - Action Sheet Content Example

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/component-actions-general.html

Illustrates how Action Sheets can display various content, including multiple boxes and complex information. This example shows an Action Sheet that can be positioned at the top of the page and includes navigation buttons like 'Back' and 'Proceed'.

```HTML
Hi, I'm an Action Sheet
=======================

I can show your users different boxes, or multiple boxes, have different styles, and even complex content. Let me show you.

[Show me more](#)

Top? No problem!
=======================

You can use action sheets here as well, it's really easy to add them wherever you want.

[Back](#)

[Proceed](#)

### Modal Sheets Too

You can use action sheets in any position. Fast, easy and add any content you need. Check out other examples.

[AWESOME](#)
```

--------------------------------

### Course Pricing and Purchase Options

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-learning-actions.html

Details the pricing for a course, including the discounted price, original price, and a percentage off. Lists course content such as video hours, articles, and guarantees, with options to add to cart or buy now.

```HTML
<h3>Create videos using your smartphone.</h3>
<p>$13.99</p>
<h5>$27.98 - 50% OFF</h5>
<ul>
  <li>3 Hour Video + 30 PDF Articles</li>
  <li>13 Articles with Downloadable Content</li>
  <li>30 Day Money-Back Guarantee</li>
</ul>
<a href="#">Add to Cart</a>
<a href="#">Buy NOW</a>
```

--------------------------------

### List Styling (HTML)

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-content-article-4.html

Provides examples of unordered and ordered lists, demonstrating basic list formatting in HTML. These are fundamental for presenting information in a structured manner.

```HTML
<ul>
  <li>List</li>
  <li>List</li>
  <li>List</li>
</ul>

<ol>
  <li>List</li>
  <li>List</li>
  <li>List</li>
</ol>
```

--------------------------------

### Display Message Card

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-admin-widgets.html

An example of a message card for relaying information to users, highlighting its awesome and simple design.

```HTML
Message Card
============

Use cards to relay messages to your users. These are awesome and simple to use.
```

--------------------------------

### JSON: manifest.json PWA Scope and Start URL Configuration

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/documentation/index.html

This JSON snippet shows the configuration for the `scope` and `start_url` properties within a PWA's `manifest.json` file. These settings are crucial for defining the PWA's operational boundaries and entry point, ensuring it correctly points to your domain and folder structure.

```JSON
"scope": "[https://www.your-domain.com/yourfolder/]",
"display": "fullscreen",
"start_url": "[https://www.your-domain.com/yourfolder/index.html]"
```

--------------------------------

### Display Announcement Card

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code-rtl/page-admin-widgets.html

An example of an announcement card designed to highlight important messages with potential for awesome effects.

```HTML
Important Card
==============

Use awesome effects too. These cards can highlight an important message.
```

--------------------------------

### Image Gallery Example (HTML)

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-content-article-1.html

Illustrates how to create a simple image gallery using HTML anchor tags and image elements. This is useful for showcasing visual content within the PWA.

```HTML
<a href="images/pictures/21.jpg" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
<a href="images/pictures/14.jpg" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
<a href="images/pictures/18.jpg" title="Image Title or Caption"><img src="images/empty.png" alt=""></a>
```

--------------------------------

### User Profile Navigation

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/sidebars.html

Example of user profile navigation links, including profile, messages, settings, and sign out options.

```HTML
<a href="#">Your Profile</a>
<a href="#">Messages</a>
<a href="#">Settings</a>
<a href="#">Sign Out</a>
```

--------------------------------

### Display Message Card

Source: https://github.com/wisedev0103/pwa-bootstrap/blob/master/code/page-admin-widgets.html

An example of a message card for relaying information to users, highlighting its awesome and simple design.

```HTML
Message Card
============

Use cards to relay messages to your users. These are awesome and simple to use.
```
Tokens:
Raw