Insight includes many custom components that elegantly extend Bootstrap's core functionality, making it even easier to build richly functional websites.
A simple set of classes to format images as rounded avatars
<img src="assets/img/avatar-male-6.jpg" alt="Image" class="avatar avatar-sm">
<img src="assets/img/avatar-male-6.jpg" alt="Image" class="avatar">
<img src="assets/img/avatar-male-6.jpg" alt="Image" class="avatar avatar-lg">.avatar
Added to <img> element to format as an avatar
.avatar-sm
Added to .avatar element to reduce default size
.avatar-lg
Added to .avatar element to increase default size
Format a list of avatars as a distinct group, with each overlapping the last
<ul class="avatars">
<li>
<img src="assets/img/avatar-female-2.jpg" alt="Image" class="avatar">
</li>
<li>
<img src="assets/img/avatar-male-5.jpg" alt="Image" class="avatar">
</li>
<li>
<img src="assets/img/avatar-male-4.jpg" alt="Image" class="avatar">
</li>
<li>
<img src="assets/img/avatar-female-1.jpg" alt="Image" class="avatar">
</li>
</ul>.avatars
Added to <ul> element to format as a list of avatars
A unique arrangement of the default Bootstrap 'Card' element.
<a href="#" class="card hover-effect">
<img class="card-img-top" src="assets/img/card-image-small-1.jpg" alt="Startup" />
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">Startup</h6>
<i class="material-icons text-dark">keyboard_arrow_right</i>
</div>
</div>
</a>.hover-effect
Added to .card to add a hover effect on mouse over
A unique arrangement of the default Bootstrap 'Card' element.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.
<div class="card">
<img class="card-img-top" src="assets/img/card-image-small-1.jpg" alt="Modular Structure" />
<div class="card-body py-3">
<h5>Modular Structure</h5>
<div class="mb-4">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.</p>
</div>
</div>
<div class="card-footer">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Get Started</a>
<i class="material-icons text-dark">keyboard_arrow_right</i>
</div>
</div>
</div>A unique arrangement of the default Bootstrap 'Card' element.
<a href="#" class="card row no-gutters flex-column flex-md-row hover-effect">
<div class="flex-column col-md-4">
<img class="card-img flex-grow-1 h-100" src="assets/img/card-image-background-3.jpg" alt="Experience prompts new actions for reef citizen scientists" />
</div>
<div class="card-body d-flex align-items-center col-md-8 px-3">
<div>
<span class="h5 mb-0">Experience prompts new actions for reef citizen scientists</span>
</div>
</div>
</a>.hover-effect
Added to .card to add a hover effect on mouse over
A unique arrangement of the default Bootstrap 'Card' element.
Work closely to create opportunities and provide marketing support.
Robert Simmons
<div class="card">
<a href="#">
<img class="card-img-top" src="assets/img/insurance-6.jpg" alt="10 Tips for savvy travellers" />
</a>
<div class="card-body py-3">
<a href="#" class="mb-2 d-block">Lifestyle</a>
<a href="#"><h5>10 Tips for savvy travellers</h5></a>
<div class="mb-4">
<p>Work closely to create opportunities and provide marketing support.</p>
</div>
</div>
<div class="card-footer">
<div class="d-flex align-items-center">
<img src="assets/img/avatar-male-1.jpg" alt="Robert Simmons" class="avatar mr-2" />
<span>Robert Simmons</span>
</div>
</div>
</div>A unique arrangement of the default Bootstrap 'Card' element.
<a href="#" class="card text-center hover-effect">
<div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
<img src="assets/img/icons/icon01.svg" class="icon mt-2 mb-3" alt="assets/img/icons/icon01.svg">
<span class="h6 mb-2">Small Business</span>
</div>
</a><a href="#" class="card text-center bg-dark">
<div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
<img src="assets/img/icons/icon01.svg" class="icon mt-2 mb-3 text-white" alt="assets/img/icons/icon01.svg">
<span class="h6 mb-2 text-white">Small Business</span>
</div>
</a>.bg-dark
Added to .card to make background dark
.text-white
Added to elements inside .card to make text light
<a href="#" class="card text-center disabled">
<div class="card-body d-flex flex-column align-items-center justify-content-center py-2">
<img src="assets/img/icons/icon01.svg" class="icon mt-2 mb-3" alt="assets/img/icons/icon01.svg">
<span class="h6 mb-2">Small Business</span>
</div>
</a>.disabled
Add to .card to display card as disabled
A unique arrangement of the default Bootstrap 'Card' element.
<a href="#" class="card bg-dark text-center hover-effect">
<img class="card-img opacity-80" src="assets/img/card-image-background-1.jpg" alt="Small Business" />
<div class="card-img-overlay">
<span class="mb-0 h6 text-white">Small Business</span>
</div>
</a><a href="#" class="card bg-dark ext-center hover-effect justify-content-center align-items-center">
<img class="card-img opacity-80" src="assets/img/card-image-background-1.jpg" alt="Small Business" />
<div class="card-img-overlay">
<span class="mb-0 h5 text-white">Small Business</span>
</div>
</a><a href="#" class="card bg-dark hover-effect justify-content-end">
<img class="card-img opacity-90" src="assets/img/card-image-background-1.jpg" alt="Small Business" />
<div class="card-img-overlay bg-dark w-100">
<span class="mb-0 h4 text-white">Small Business</span>
</div>
</a>A unique arrangement of the default Bootstrap 'Card' element.
<div class="card">
<div class="card-body">
<div class="mb-3 mt-2">
<span class="h6">Start the Journey</span>
</div>
<div class="mb-sm-5">
<span class="h2">Work directly with our dedicated account team.</span>
</div>
</div>
<div class="card-footer">
<div class="d-flex align-items-center justify-content-between">
<a href="#">More Information</a>
<i class="material-icons text-dark">keyboard_arrow_right</i>
</div>
</div>
</div><div class="card bg-dark">
<div class="card-body">
<div class="mb-3 mt-2">
<span class="h6 text-white">Start the Journey</span>
</div>
<div class="mb-sm-5">
<span class="h2 text-white">Work directly with our dedicated account team.</span>
</div>
</div>
<div class="card-footer bg-dark">
<div class="d-flex align-items-center justify-content-between">
<a href="#" class="text-white">More Information</a>
<i class="material-icons text-white">keyboard_arrow_right</i>
</div>
</div>
</div>A unique arrangement of the default Bootstrap 'Card' element.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.
Learn More<div class="text-center">
<img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon">
<div>
<h5 class="mb-1 mt-2">Modular Structure</h5>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.</p>
<a href="#">Learn More</a>
</div>
</div>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.
Learn More<div class="text-center card">
<div class="card-body">
<img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon">
<div>
<h5 class="mb-1 mt-2">Modular Structure</h5>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.</p>
<a href="#">Learn More</a>
</div>
</div>
</div>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.
Learn More<div class="d-flex">
<img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon mr-2 mr-sm-3 flex-shrink-0">
<div>
<h5 class="mb-1">Modular Structure</h5>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.</p>
<a href="#">Learn More</a>
</div>
</div>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.
Learn More<div class="card">
<div class="card-body d-sm-flex">
<img src="assets/img/icons/icon39.svg" alt="Modular Structure" class="icon mr-sm-3 flex-shrink-0">
<div>
<h5 class="mb-1">Modular Structure</h5>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti.</p>
<a href="#">Learn More</a>
</div>
</div>
</div>Use the jQuery Countdown plugin to transform text elements into a date countdown
<span class="h1" data-countdown-date="2023-10-21"></span>.h1,.h2.,.h3
Apply any Bootstrap text utility to the [data-countdown-date] element to adjust the text formatting
Insight includes the Fancybox plugin for image and video galleries. View the full description here
<div class="row">
<div class="col-4">
<a href="assets/img/portfolio-2.jpg" data-fancybox="gallery-1" data-loop="true">
<img src="assets/img/portfolio-2.jpg" alt="Image" class="rounded hover-effect">
</a>
</div>
<div class="col-4">
<a href="assets/img/portfolio-3.jpg" data-fancybox="gallery-1" data-loop="true">
<img src="assets/img/portfolio-3.jpg" alt="Image" class="rounded hover-effect">
</a>
</div>
<div class="col-4">
<a href="assets/img/portfolio-4.jpg" data-fancybox="gallery-1" data-loop="true">
<img src="assets/img/portfolio-4.jpg" alt="Image" class="rounded hover-effect">
</a>
</div>
</div>[data-fancybox=""]
Apply to an <a> element to open the containing <img> in a Fancybox
Insight includes the Fancybox plugin for image and video galleries. View the full description here
<a class="video-play-icon" data-fancybox href="https://www.youtube.com/watch?v=c8aFcHFu8QM"></a>.video-play-icon
Apply to an <a> element to format as a video play icon
.video-play-icon-lg
Apply to .video-play-icon element to increase size
[data-fancybox]
Apply to <a> element to initalize Fancybox plugin
Insight includes 100 premium SVG line icons
<img src="assets/img/icons/icon01.svg" alt="Icon" class="icon text-primary">.icon
Apply to an SVG <img> to convert to an inline SVG
.icon-sm
Apply to .icon to reduce size
.icon-lg
Apply to .icon to increase size
.text-[theme-color]
Use Bootstrap text utilities on .icon to change color
<img src="assets/img/icons/icon01.svg" alt="Icon" class="icon text-primary">Insight includes the Material Design Icon kit. View the full kit here
<i class="material-icons">comment</i><i class="material-icons">icon_code_here</i>A unique arrangement of the default Bootstrap 'List Group' element.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<span class="mb-0 text-primary py-1 font-weight-bold">Media Hub</span>
</div>
<i class="material-icons d-block">keyboard_arrow_right</i>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<span class="mb-0 text-primary py-1 font-weight-bold">Our Commitment</span>
</div>
<i class="material-icons d-block">keyboard_arrow_right</i>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<span class="mb-0 text-primary py-1 font-weight-bold">Partner Program</span>
</div>
<i class="material-icons d-block">keyboard_arrow_right</i>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<span class="mb-0 text-primary py-1 font-weight-bold">Sustainability</span>
</div>
<i class="material-icons d-block">keyboard_arrow_right</i>
</a>
</div><div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon01.svg" alt="assets/img/icons/icon01.svg" class="d-block mr-3 icon">
<span class="mb-0 h6 mb-0">Media Hub</span>
</div>
<i class="material-icons d-block">keyboard_arrow_right</i>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon02.svg" alt="assets/img/icons/icon02.svg" class="d-block mr-3 icon">
<span class="mb-0 h6 mb-0">Our Commitment</span>
</div>
<i class="material-icons d-block">keyboard_arrow_right</i>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon03.svg" alt="assets/img/icons/icon03.svg" class="d-block mr-3 icon">
<span class="mb-0 h6 mb-0">Partner Program</span>
</div>
<i class="material-icons d-block">keyboard_arrow_right</i>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon08.svg" alt="assets/img/icons/icon08.svg" class="d-block mr-3 icon">
<span class="mb-0 h6 mb-0">Sustainability</span>
</div>
<i class="material-icons d-block">keyboard_arrow_right</i>
</a>
</div><div class="list-group">
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-dark">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon01.svg" alt="assets/img/icons/icon01.svg" class="d-block mr-3 icon text-white">
<span class="mb-0 h6 mb-0 text-white">Media Hub</span>
</div>
<i class="material-icons d-block text-white">keyboard_arrow_right</i>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-dark">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon02.svg" alt="assets/img/icons/icon02.svg" class="d-block mr-3 icon text-white">
<span class="mb-0 h6 mb-0 text-white">Our Commitment</span>
</div>
<i class="material-icons d-block text-white">keyboard_arrow_right</i>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-dark">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon03.svg" alt="assets/img/icons/icon03.svg" class="d-block mr-3 icon text-white">
<span class="mb-0 h6 mb-0 text-white">Partner Program</span>
</div>
<i class="material-icons d-block text-white">keyboard_arrow_right</i>
</a>
<a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-dark">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon08.svg" alt="assets/img/icons/icon08.svg" class="d-block mr-3 icon text-white">
<span class="mb-0 h6 mb-0 text-white">Sustainability</span>
</div>
<i class="material-icons d-block text-white">keyboard_arrow_right</i>
</a>
</div>A unique arrangement of the default Bootstrap 'List Group' element.
<ul class="list-group">
<li class="list-group-item bg-transparent px-0">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon09.svg" alt="assets/img/icons/icon09.svg" class="icon d-block mr-3">
<span class="mb-0 h6">Fully Responsive</span>
</div>
</li>
<li class="list-group-item bg-transparent px-0">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon32.svg" alt="assets/img/icons/icon32.svg" class="icon d-block mr-3">
<span class="mb-0 h6">Stellar Support</span>
</div>
</li>
<li class="list-group-item bg-transparent px-0">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon39.svg" alt="assets/img/icons/icon39.svg" class="icon d-block mr-3">
<span class="mb-0 h6">Modular Structure</span>
</div>
</li>
<li class="list-group-item bg-transparent px-0">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon40.svg" alt="assets/img/icons/icon40.svg" class="icon d-block mr-3">
<span class="mb-0 h6">Stylish Design</span>
</div>
</li>
<li class="list-group-item bg-transparent px-0">
<div class="d-flex align-items-center">
<img src="assets/img/icons/icon16.svg" alt="assets/img/icons/icon16.svg" class="icon d-block mr-3">
<span class="mb-0 h6">Thorough Documenation</span>
</div>
</li>
</ul>A unique arrangement of the default Bootstrap 'List Group' element.
<div class="list-group">
<a class="list-group-item list-group-item-action d-flex align-items-center w-100 h6" href="#">
<div class="d-flex align-items-center">
<div class="py-2 px-3 mr-2 text-center">
<span class="d-block h4 mb-0">11</span>
<span class="text-small">April</span>
</div>
<span class="mb-0 h6 text-primary">Health Matters: Nature vs Nurture</span>
</div>
</a>
<a class="list-group-item list-group-item-action d-flex align-items-center w-100 h6" href="#">
<div class="d-flex align-items-center">
<div class="py-2 px-3 mr-2 text-center">
<span class="d-block h4 mb-0">16</span>
<span class="text-small">April</span>
</div>
<span class="mb-0 h6 text-primary">Semester 1 classes recommence after mid-semester break</span>
</div>
</a>
<a class="list-group-item list-group-item-action d-flex align-items-center w-100 h6" href="#">
<div class="d-flex align-items-center">
<div class="py-2 px-3 mr-2 text-center">
<span class="d-block h4 mb-0">18</span>
<span class="text-small">April</span>
</div>
<span class="mb-0 h6 text-primary">Masterclass with Marty Linsky</span>
</div>
</a>
</div>A unique arrangement of the default Bootstrap 'List Group' element coupled with Toggle functionality.
<ul class="list-group">
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<a class="d-flex align-items-center flex-fill" href="#" data-toggle="collapse" data-target="#accordion-panel-1">
<span class="mb-0 text-primary py-1 font-weight-bold">How do I perform check out?</span>
</a>
<i class="material-icons d-block text-dark">keyboard_arrow_right</i>
</div>
<div id="accordion-panel-1" class="collapse">
<div class="py-1">
Answer 1
</div>
</div>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<a class="d-flex align-items-center flex-fill" href="#" data-toggle="collapse" data-target="#accordion-panel-2">
<span class="mb-0 text-primary py-1 font-weight-bold">What if I change my mind?</span>
</a>
<i class="material-icons d-block text-dark">keyboard_arrow_right</i>
</div>
<div id="accordion-panel-2" class="collapse">
<div class="py-1">
Answer 2
</div>
</div>
</li>
<li class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<a class="d-flex align-items-center flex-fill" href="#" data-toggle="collapse" data-target="#accordion-panel-3">
<span class="mb-0 text-primary py-1 font-weight-bold">Are meals provided with accommodation?</span>
</a>
<i class="material-icons d-block text-dark">keyboard_arrow_right</i>
</div>
<div id="accordion-panel-3" class="collapse">
<div class="py-1">
Answer 3
</div>
</div>
</li>
</ul>Display customizable maps using the Google Maps API
<div class="height-30"
data-maps-api-key="AIzaSyCfo_V3gmpPm1WzJEC9p_sRbgvyVbiO83M"
data-address="State Library of Victoria">
</div>
data-maps-api-key
Apply this attribute with a valid API key to any div to initialize your map element. See plugins reference in documentation for more information.
.height-*
The map div requires a height class to be applied. Use height classes as described in CSS class reference in documentation.
data-address
This will be the center point of the map. This human-readable address string can be any place recognised by the Google geocoder service.
data-latlong
Alternatively, you may use longitude and latitude values. This will be the center point of the map. eg. data-latlong="-37.8187,144.9576"
data-map-zoom
Set the zoom value between 1 and 18 where 1 is distant and 18 is closest.
<div class="height-30"
data-maps-api-key="AIzaSyCfo_V3gmpPm1WzJEC9p_sRbgvyVbiO83M"
data-address="Melbourne, Victoria"
data-map-zoom="14"
data-marker-image="assets/img/map-marker-dark.svg">
<div class="map-marker" data-address="State Library of Victoria, Melbourne" data-marker-title="State Library of Victoria"></div>
<div class="map-marker" data-address="Federation Square, Melbourne" data-marker-image="assets/img/map-marker-dark.svg"></div>
<div class="map-marker" data-latlong="-37.8187,144.9576"></div>
</div>div.map-marker
Add map markers by inserting <div class="map-marker"></div> elements inside the map div.
data-address
This will be the position of the map marker. This human-readable address string can be any place recognised by the Google geocoder service.
data-latlong
Alternatively, you may use longitude and latitude values. This will be the position of the map marker eg. data-latlong="-37.8187,144.9576"
data-marker-title
Each marker can display its own title when the user hovers on it. Defaults to empty.
data-marker-image
Each marker can display its own marker image. Provide a URL to the image to be used. Defaults to assets/img/map-marker.png. Images should be square 300x300 pixels.
State Library Victoria is the central library of the state of Victoria, Australia, located in Melbourne. It is on the block bounded by Swanston, La Trobe, Russell, and Little Lonsdale streets, in the northern centre of the central business district.
... More at Wikipedia
Federation Square is a venue for arts, culture and public events on the edge of the CBD of Melbourne. It covers an area of 3.2 ha (7.9 acres) at the intersection of Flinders Street and Swanston Street built above busy railway lines and across the road from Flinders Street station.
... More at Wikipedia
Located on Melbourne's renowned Collins Street, Rialto is at the heart of the city’s emerging mid-town. It is a vibrant and ever- evolving business precinct ideally located between the traditional city centre and the city's waterfront at Docklands. It is the location for many of Melbourne's big names in finance, law, media, investment, consulting and technology.
... More at rialto.com.au<div class="height-40"
data-maps-api-key="AIzaSyCfo_V3gmpPm1WzJEC9p_sRbgvyVbiO83M"
data-address="Melbourne, Victoria"
data-map-zoom="14">
<div class="map-marker" data-address="State Library of Victoria, Melbourne">
<div class="info-window" data-max-width="400">
<div class="container">
<div class="row">
<div class="col-12">
<h5>State Library of Victoria</h5>
</div>
<div class="col-4">
<img alt="Image" class="w-100" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/StateLibraryofVictoria%2C_Oct_2005.jpg/320px-StateLibraryofVictoria%2C_Oct_2005.jpg" />
</div>
<div class="col-8 pb-2">
<p>
State Library Victoria is the central library of the state of Victoria, Australia, located in Melbourne. It is on the block bounded by Swanston, La Trobe, Russell, and Little Lonsdale streets, in the northern centre of the central business district.
</p>
<a target="_blank" href="https://en.wikipedia.org/wiki/State_Library_of_Victoria">... More at Wikipedia</a>
</div>
</div>
</div>
</div>
</div>
<div class="map-marker" data-address="Federation Square, Melbourne">
<div class="info-window" data-max-width="400">
<div class="container">
<div class="row">
<div class="col-12">
<h5>Federation Square</h5>
</div>
<div class="col-4">
<img alt="Image" class="w-100" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Federation_Square_%285399921791%29.jpg/320px-Federation_Square_%285399921791%29.jpg" />
</div>
<div class="col-8 pb-2">
<p>
Federation Square is a venue for arts, culture and public events on the edge of the CBD of Melbourne. It covers an area of 3.2 ha (7.9 acres) at the intersection of Flinders Street and Swanston Street built above busy railway lines and across the road from Flinders Street station.
</p>
<a target="_blank" href="https://en.wikipedia.org/wiki/Federation_Square">... More at Wikipedia</a>
</div>
</div>
</div>
</div>
</div>
<div class="map-marker" data-latlong="-37.8187,144.9576">
<div class="info-window" data-max-width="400">
<div class="container">
<div class="row">
<div class="col-12">
<h5>Rialto Building</h5>
</div>
<div class="col-4">
<img alt="Image" class="w-100" src="http://rialto.com.au/profiles/gp_profile/themes/custom/gp_theme/images/footer.jpg" />
</div>
<div class="col-8 pb-2">
<p>
Located on Melbourne's renowned Collins Street, Rialto is at the heart of the city’s emerging mid-town. It is a vibrant and ever- evolving business precinct ideally located between the traditional city centre and the city's waterfront at Docklands. It is the location for many of Melbourne's big names in finance, law, media, investment, consulting and technology.
</p>
<a target="_blank" href="http://rialto.com.au/">... More at rialto.com.au</a>
</div>
</div>
</div>
</div>
</div>
</div>div.info-window
Add a pop-up info window by adding a <div class="info-window"></div> element inside the div.map-marker element. The window will appear when the marker is clicked. The inner HTML of the div.info-window element is used to populate the pop-up.
data-max-width
This determines the maximum width of the infowindow. Default is 250.
<div class="height-30"
data-maps-api-key="AIzaSyCfo_V3gmpPm1WzJEC9p_sRbgvyVbiO83M"
data-latlong="40.7648,-73.9808"
data-map-zoom="13">
<div class="map-marker" data-latlong="40.7648,-73.9808"></div>
<div class="map-marker" data-address="Central Park Zoo, NYC"></div>
<div class="map-style">
[
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
},
{
"color": "#aee2e0"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#abce83"
}
]
},
{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#769E72"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#7B8758"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#EBF4A4"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"visibility": "simplified"
},
{
"color": "#8dab68"
}
]
},
{
"featureType": "road",
"elementType": "geometry.fill",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#5B5B3F"
}
]
},
{
"featureType": "road",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ABCE83"
}
]
},
{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [
{
"color": "#A4C67D"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{
"color": "#9BBF72"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#EBF4A4"
}
]
},
{
"featureType": "transit",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [
{
"visibility": "on"
},
{
"color": "#87ae79"
}
]
},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#7f2200"
},
{
"visibility": "off"
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#ffffff"
},
{
"visibility": "on"
},
{
"weight": 4.1
}
]
},
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#495421"
}
]
},
{
"featureType": "administrative.neighborhood",
"elementType": "labels",
"stylers": [
{
"visibility": "off"
}
]
}
]
</div>
</div>div.map-style
The colours of the map can be easily changed by adding a <div class="map-style"></div> element inside the map div. The div.map-style element should contain only map style in JSON format which you can obtain from Snazzymaps.
<div class="height-30"
data-maps-api-key="AIzaSyCfo_V3gmpPm1WzJEC9p_sRbgvyVbiO83M"
data-address="Corner A'beckett street and Swanston Street, Melbourne, Victoria"
data-map-zoom="15"
data-zoom-controls="RIGHT_BOTTOM">
<div class="map-marker" data-address="RMIT University, Melbourne Victoria"></div>
<div class="map-marker" data-address="Melbourne Central Shopping Centre, Melbourne Victoria"></div>
</div>data-zoom-controls
Zoom controls are hidden by default. To show zoom controls, place the data-zoom-controls attribute on the map div and provide a position as the value. You must use one of Google's predefined positions eg. data-zoom-controls="RIGHT_BOTTOM". A full list of available control positions can be obtained at the Google Maps docs
Touch-optimised slider elements utilising the premium Flickity slider plugin.
<div data-flickity='{ "cellAlign": "center", "contain": true, "pageDots":true, "wrapAround":true, "autoPlay":5000, "imagesLoaded":true }'>
<div class="carousel-cell w-100 rounded">
<img src="assets/img/portfolio-2.jpg" alt="Image" class="img-fluid rounded" />
</div>
<div class="carousel-cell w-100 rounded">
<img src="assets/img/portfolio-3.jpg" alt="Image" class="img-fluid rounded" />
</div>
<div class="carousel-cell w-100 rounded">
<img src="assets/img/portfolio-4.jpg" alt="Image" class="img-fluid rounded" />
</div>
</div><div class="controls-inside controls-light" data-flickity='{ "cellAlign": "center", "contain": true, "pageDots":true, "wrapAround":true, "autoPlay":5000, "imagesLoaded":true }'>
<div class="carousel-cell w-100 rounded">
<img src="assets/img/portfolio-2.jpg" alt="Image" class="img-fluid rounded" />
</div>
<div class="carousel-cell w-100 rounded">
<img src="assets/img/portfolio-3.jpg" alt="Image" class="img-fluid rounded" />
</div>
<div class="carousel-cell w-100 rounded">
<img src="assets/img/portfolio-4.jpg" alt="Image" class="img-fluid rounded" />
</div>
</div>.controls-inside
Apply to [data-flickity] to place the dot navigation inside the slider, instead of below
.controls-light
Apply to [data-flickity] to make the dot navigation use light colors, instead of dark
Insight uses Google fonts Nunito & Permanent Marker in conjunction with Bootstrap's typographic scale.
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
<h4>Heading Four</h4>
<h5>Heading Five</h5>
<h6>Heading Six</h6>This is a lead paragraph. Use the .lead class when you want to emphasise the text. Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p class="lead">This is a lead paragraph. Use the <strong>.lead</strong> class when you want to emphasise the text. Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p><div class="row">
<div class="col-6">
<ul>
<li>
Unordered List Item 1
</li>
<li>
Unordered List Item 2
<ul>
<li>
Sublist Item
</li>
</ul>
</li>
<li>
Unordered List Item 3
</li>
<li>
Unordered List Item 4
</li>
</ul>
</div>
<div class="col-6">
<ol>
<li>
Ordered List Item 1
</li>
<li>
Ordered List Item 2
<ul>
<li>
Sublist Item
</li>
</ul>
</li>
<li>
Ordered List Item 3
</li>
<li>
Ordered List Item 4
</li>
</ol>
</div>
</div>“Insight is a really simple idea, made possible by technology. If there’s something you need doing” — Anthony Vasquez, CEO
<blockquote class="text-center">
<span class="h4 d-block">
“Insight is a really simple idea, made possible by technology. If there’s something you need doing”
</span>
<span>— Anthony Vasquez, CEO</span>
</blockquote>Use images as covers for embedded media to maintain on-brand presentation.
<div class="video-cover rounded">
<img alt="Image" src="assets/img/lending-1.jpg" class="bg-image" />
<div class="video-play-icon"></div>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" data-src="https://www.youtube.com/embed/DYaq2sWTWAA?rel=0&showinfo=0&autoplay=1" allowfullscreen allow="autoplay; encrypted-media"></iframe>
</div>
</div>Insight includes support for Wizard functionality via the jQuery SmartWizard Plugin
<form class="wizard card">
<ul class="nav nav-tabs card-header text-center bg-light p-0">
<li class="nav-item flex-fill">
<a class="nav-link" href="#first">1. Step One</a>
</li>
<li class="nav-item flex-fill">
<a class="nav-link" href="#second">2. Step Two</a>
</li>
<li class="nav-item flex-fill">
<a class="nav-link" href="#third">3. Step Three</a>
</li>
</ul>
<div class="tab-content">
<div id="first">
<div class="card-body py-4">
<p>
Step One Content Here
</p>
<button class="btn btn-primary sw-btn-next">Next Step</button>
</div>
</div>
<div id="second">
<div class="card-body py-4">
<p>
Step Two Content Here
</p>
<button class="btn btn-primary sw-btn-next">Next Step</button>
</div>
</div>
<div id="third">
<div class="card-body py-4">
<p>
This is the final step
</p>
<button class="btn btn-success" type="submit">Submit</button>
</div>
</div>
</div>
</form>
<div class="card-footer text-center">
<small>Place a notice here to provide support
<a href="#">Contact Support</a>
</small>
</div>