Bootstrap Mint

Bootstrap Mint is a fully Responsive, mobile-first Drupal 8 theme built on the powerful Bootstrap 3.x Framework.

Theme Features

* Improved set of contextual body classes (NEW)
* Mobile-first clean & modern design
* HTML5 & CSS3
* Powerful grid system - Bootstrap 3.x
* Retina-ready icons - Font Awesome 4.x
* Google Font - Exo 2
* Responsive multi-level navigation menu
* Bootstrap carousel for slideshow
* Four columns layout
* Intelligent dynamic columns
* Customizable theme setting
and more..

Theme Regions

Bootstrap Mint encapsulates a plethora of 25+ regions that you will ever need for your Drupal 8 project(s).

Diagrammatic Representation

Check out this DEMO

Installation

1. Login to your Drupal 8 site and click on "Appearance" in the top administration menu.
2. Now, click on "+Install new theme" button and choose any of the 2 available options to install the theme.
3. Click on "Install and set as default" next to Bootstrap Mint theme.

Requirements

Bootstrap Mint theme does not require anything beyond Drupal 8 core to work.

Custom Slideshow - 2 easy steps

1. Add Block

• Go to Structure > Block layout > Place block (next to the 'Slideshow' region) > + Add custom block.
• Give a 'Block description'. In the 'Body', click on "Source" button in Full HTML mode and then copy paste below bootstrap carousel code.

<div class="carousel slide" data-ride="carousel" id="mintCarousel"><!-- Indicators -->
<ol class="carousel-indicators">
	<li class="active" data-slide-to="0" data-target="#mintCarousel">&nbsp;</li>
	<li data-slide-to="1" data-target="#mintCarousel">&nbsp;</li>
	<li data-slide-to="2" data-target="#mintCarousel">&nbsp;</li>
</ol>
<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">
<div class="item active"><img alt="Bootstrap Mint Slider 1" src="sites/default/files/images/slide-img1.jpg" />
<div class="carousel-caption">
<h3>Bootstrap Mint - Slider Title</h3>

<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</div>

<div class="item"><img alt="Bootstrap Mint Slider 2" src="sites/default/files/images/slide-img2.jpg" />
<div class="carousel-caption">
<h3>Bootstrap Mint - Slider Title</h3>

<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</div>

<div class="item"><img alt="Bootstrap Mint Slider 3" src="sites/default/files/images/slide-img3.jpg" />
<div class="carousel-caption">
<h3>Bootstrap Mint - Slider Title</h3>

<p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
</div>
</div>
<!-- Place additional slide items here --></div>
</div>

Note: Here, images slide-img1.jpg, slide-img2.jpg, slide-img3.jpg are assumed to be in the sites/default/files/images directory.

2. Save Block

• Click 'Save' button.
• 'Display title' unchecked is fine in most cases.
• Region being the 'Slideshow' region.

Designed & developed by: Binu Varghese

For professional support and development services, contact us @ myndsets.