Components

Alert

The default Bootstrap alert elements are available with contextual coloring.

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it's not super important.

<div>
	<div class="alert alert-dismissible alert-warning">
		<button type="button" class="close text-muted" data-dismiss="alert">×</button>
		<h4 class="alert-heading">Warning!</h4>
		<p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit libero, a
			pharetra augue.
			Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque nisl
				consectetur et</a>.</p>
	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<div>
			<div class="alert alert-dismissible alert-danger">
				<button type="button" class="close text-muted" data-dismiss="alert">×</button>
				<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a>
				and try submitting
				again.
			</div>
		</div>
	</div>
	<div class="col-sm-12">
		<div>
			<div class="alert alert-dismissible alert-success">
				<button type="button" class="close" data-dismiss="alert">×</button>
				<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this
					important alert
					message</a>.
			</div>
		</div>
	</div>
	<div class="col-sm-12">
		<div>
			<div class="alert alert-dismissible alert-info">
				<button type="button" class="close text-muted" data-dismiss="alert">×</button>
				<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your
					attention</a>, but it's not
				super important.
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<div>
			<div class="alert alert-dismissible alert-primary">
				<button type="button" class="close" data-dismiss="alert">×</button>
				<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a>
				and try submitting
				again.
			</div>
		</div>
	</div>
	<div class="col-sm-12">
		<div>
			<div class="alert alert-dismissible alert-secondary">
				<button type="button" class="close" data-dismiss="alert">×</button>
				<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this
					important alert
					message</a>.
			</div>
		</div>
	</div>
	<div class="col-sm-12">
		<div>
			<div class="alert alert-dismissible alert-light">
				<button type="button" class="close" data-dismiss="alert">×</button>
				<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your
					attention</a>, but it's not
				super important.
			</div>
		</div>
	</div>
</div>

Badge

The default Bootstrap badges are available with contextual coloring.

Badge

Add a badge class to an element to make it look like a badge. Contextual colors can be added with additional badge-{color} classes.

Primary Secondary Success Danger Warning Info Light Dark

Pill badge

Add a btn-round-sm class to a button to make it a smaller version of round.

Primary Secondary Success Danger Warning Info Light Dark

<h5>Badge</h5>
<p>Add a <code>badge</code> class to an element to make it look like a badge. Contextual colors can be added with
	additional <code>badge-{color}</code> classes.</p>

<div>
	<span class="badge badge-primary">Primary</span>
	<span class="badge badge-secondary">Secondary</span>
	<span class="badge badge-success">Success</span>
	<span class="badge badge-danger">Danger</span>
	<span class="badge badge-warning">Warning</span>
	<span class="badge badge-info">Info</span>
	<span class="badge badge-light">Light</span>
	<span class="badge badge-dark">Dark</span>
</div>

<h5 class="mt-5">Pill badge</h5>
<p>Add a <code>btn-round-sm</code> class to a button to make it a smaller version of round.</p>


<div>
	<span class="badge badge-pill badge-primary">Primary</span>
	<span class="badge badge-pill badge-secondary">Secondary</span>
	<span class="badge badge-pill badge-success">Success</span>
	<span class="badge badge-pill badge-danger">Danger</span>
	<span class="badge badge-pill badge-warning">Warning</span>
	<span class="badge badge-pill badge-info">Info</span>
	<span class="badge badge-pill badge-light">Light</span>
	<span class="badge badge-pill badge-dark">Dark</span>
</div>

Button

Default

Bootstrap's basic rectangular buttons are available in all contextual colors with active and disabled states. By default the buttons are filled, but the outlined versions are also available.

Active

Contextual coloring of the buttons can be added by the default Bootstrap classes: .btn-{color}

Disabled

Just add a disabled class to the buttons.

Outlined

Contextual coloring is available for outlined buttons using the default Bootstrap classes: .btn-outline-{color}

Color variations

For each color three versions of buttons are available: .btn-{color}, .btn-{color}-lighter and .btn-{color}-darker.

Size variations

There are three sizes of default buttons available. Just add btn-lg or btn-sm class to the buttons.

<h5>Active</h5>
<p>Contextual coloring of the buttons can be added by the default Bootstrap classes: <code>.btn-{color}</code></p>
<p>
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-secondary">Secondary</button>
	<button type="button" class="btn btn-success">Success</button>
	<button type="button" class="btn btn-info">Info</button>
	<button type="button" class="btn btn-warning">Warning</button>
	<button type="button" class="btn btn-danger">Danger</button>
	<button type="button" class="btn btn-light">Light</button>
	<button type="button" class="btn btn-dark">Dark</button>
	<button type="button" class="btn btn-link">Link</button>
</p>

<h5>Disabled</h5>
<p>Just add a <code>disabled</code> class to the buttons.</p>
<p>
	<button type="button" class="btn btn-primary disabled">Primary</button>
	<button type="button" class="btn btn-secondary disabled">Secondary</button>
	<button type="button" class="btn btn-success disabled">Success</button>
	<button type="button" class="btn btn-info disabled">Info</button>
	<button type="button" class="btn btn-warning disabled">Warning</button>
	<button type="button" class="btn btn-danger disabled">Danger</button>
	<button type="button" class="btn btn-light disabled">Light</button>
	<button type="button" class="btn btn-dark disabled">Dark</button>
	<button type="button" class="btn btn-link disabled">Link</button>
</p>

<h5>Outlined</h5>
<p>Contextual coloring is available for outlined buttons using the default Bootstrap classes:
	<code>.btn-outline-{color}</code></p>
<p>
	<button type="button" class="btn btn-outline-primary">Primary</button>
	<button type="button" class="btn btn-outline-secondary">Secondary</button>
	<button type="button" class="btn btn-outline-success">Success</button>
	<button type="button" class="btn btn-outline-info">Info</button>
	<button type="button" class="btn btn-outline-warning">Warning</button>
	<button type="button" class="btn btn-outline-danger">Danger</button>
	<button type="button" class="btn btn-outline-light">Light</button>
	<button type="button" class="btn btn-outline-dark">Dark</button>
	<button type="button" class="btn btn-link">Link</button>
</p>

<h5 class="mt-5">Color variations</h5>
<p>For each color three versions of buttons are available: <code>.btn-{color}</code>, <code>.btn-{color}-lighter</code>
	and <code>.btn-{color}-darker</code>.</p>

<p>
	<button type="button" class="btn btn-primary">Button</button>
	<button type="button" class="btn btn-primary-lighter">Lighter Button</button>
	<button type="button" class="btn btn-primary-darker">Darker Button</button>
</p>
<p>
	<button type="button" class="btn btn-secondary">Button</button>
	<button type="button" class="btn btn-secondary-lighter">Lighter Button</button>
	<button type="button" class="btn btn-secondary-darker">Darker Button</button>
</p>
<p>
	<button type="button" class="btn btn-success">Button</button>
	<button type="button" class="btn btn-success-lighter">Lighter Button</button>
	<button type="button" class="btn btn-success-darker">Darker Button</button>
</p>
<p>
	<button type="button" class="btn btn-danger">Button</button>
	<button type="button" class="btn btn-danger-lighter">Lighter Button</button>
	<button type="button" class="btn btn-danger-darker">Darker Button</button>
</p>
<p>
	<button type="button" class="btn btn-warning">Button</button>
	<button type="button" class="btn btn-warning-lighter">Lighter Button</button>
	<button type="button" class="btn btn-warning-darker">Darker Button</button>
</p>
<p>
	<button type="button" class="btn btn-info">Button</button>
	<button type="button" class="btn btn-info-lighter">Lighter Button</button>
	<button type="button" class="btn btn-info-darker">Darker Button</button>
</p>
<p>
	<button type="button" class="btn btn-light">Button</button>
	<button type="button" class="btn btn-light-lighter">Lighter Button</button>
	<button type="button" class="btn btn-light-darker">Darker Button</button>
</p>
<p>
	<button type="button" class="btn btn-dark">Button</button>
	<button type="button" class="btn btn-dark-lighter">Lighter Button</button>
	<button type="button" class="btn btn-dark-darker">Darker Button</button>
</p>


<h5 class="mt-5">Size variations</h5>
<p>There are three sizes of default buttons available. Just add
	<code>btn-lg</code>
	or <code>btn-sm</code> class to the buttons.
</p>
<p>
	<button type="button" class="btn btn-primary btn-lg">Large button</button>
	<button type="button" class="btn btn-primary">Default button</button>
	<button type="button" class="btn btn-primary btn-sm">Small button</button>
</p>

Round

Mappr UI adds two versions of round buttons: big and small. All the colors and outlined versions are also available for them.

Big

Add a btn-round class to a button to make it round.

Small

Add a btn-round-sm class to a button to make it a smaller version of round.

<h5>Big</h5>
<p>Add a <code>btn-round</code> class to a button to make it round.</p>
<p>
	<button type="button" class="btn btn-round btn-primary">P</button>
	<button type="button" class="btn btn-round btn-secondary">S</button>
	<button type="button" class="btn btn-round btn-warning">W</button>
	<button type="button" class="btn btn-round btn-outline-success">OS</button>
	<button type="button" class="btn btn-round btn-outline-warning">OW</button>
	<button type="button" class="btn btn-round btn-outline-info">OI</button>
	<button type="button" class="btn btn-round btn-light">L</button>
	<button type="button" class="btn btn-round btn-dark">D</button>
</p>

<h5>Small</h5>
<p>Add a <code>btn-round-sm</code> class to a button to make it a smaller version of round.</p>
<p>
	<button type="button" class="btn btn-round-sm btn-primary">P</button>
	<button type="button" class="btn btn-round-sm btn-secondary">S</button>
	<button type="button" class="btn btn-round-sm btn-success">SU</button>
	<button type="button" class="btn btn-round-sm btn-warning">W</button>
	<button type="button" class="btn btn-round-sm btn-dark">D</button>
</p>

Square

Mappr UI adds two versions of square buttons: big and small. All the colors and outlined versions are also available for them.

Big

Add a btn-square class to a button to make it perfect square with round corners.

Small

Add a btn-square-sm class to a button to make it a smaller version of square.

<h5>Big</h5>
<p>Add a <code>btn-square</code> class to a button to make it perfect square with round corners.</p>
<p>
	<button type="button" class="btn btn-square btn-primary">P</button>
	<button type="button" class="btn btn-square btn-secondary">S</button>
	<button type="button" class="btn btn-square btn-success">SU</button>
	<button type="button" class="btn btn-square btn-outline-info">OI</button>
	<button type="button" class="btn btn-square btn-outline-danger">OD</button>
	<button type="button" class="btn btn-square btn-light">L</button>
	<button type="button" class="btn btn-square btn-dark">D</button>
</p>

<h5>Small</h5>
<p>Add a <code>btn-square-sm</code> class to a button to make it a smaller version of square.</p>
<p>
	<button type="button" class="btn btn-square-sm btn-primary">P</button>
	<button type="button" class="btn btn-square-sm btn-secondary">S</button>
	<button type="button" class="btn btn-square-sm btn-success">SU</button>
	<button type="button" class="btn btn-square-sm btn-outline-info">OI</button>
	<button type="button" class="btn btn-square-sm btn-outline-danger">OD</button>
	<button type="button" class="btn btn-square-sm btn-light">L</button>
	<button type="button" class="btn btn-square-sm btn-dark">D</button>
</p>

Card

In addition to the default Bootstrap cards, Mappr UI provides a custom card style that helps to build UI elements containing large image, a title and a subtitle.
By default, the title/subtitle lines allow maximum 2 lines of text each. But it is possible to limit this to only 1 line by using the text-truncate class.

La Seine Musicale

Île Seguin, 92100 Boulogne-Billancourt

La U Arena Paris La Défense (Long title here)

99 Jardins de l'Arche, 92000 Nanterre (long address line here)

Monfort Théâtre

99 Jardins de l'Arche, 92000 Nanterre. Address line

La U Arena has a very long title

99 Jardins de l'Arche, 92000 Nanterre

<div class="row">
	<div class="col-sm-12 col-md-6">
		<div class="card">
			<img src="/assets/toolkit/images/demonstration-2482170_1280.jpg" class="card-img-top" alt="...">
			<div class="card-body">
				<h5 class="card-title mb-3 text-truncate"><img src="/assets/toolkit/images/olimpics-games.svg" class="icon">La Seine Musicale</h5>
				<p class="card-text text-truncate">Île Seguin, 92100 Boulogne-Billancourt</p>
			</div>
		</div>
	</div>
	<div class="col-sm-12 col-md-6">
		<div class="card">
			<img src="/assets/toolkit/images/book-2020460_1280.jpg" class="card-img-top" alt="...">
			<div class="card-body">
				<h5 class="card-title mb-3 text-truncate"><img src="/assets/toolkit/images/trees.svg" class="icon">La U Arena Paris La
					Défense (Long title here)</h5>
				<p class="card-text text-truncate">99 Jardins de l'Arche, 92000 Nanterre (long
					address line here)</p>
			</div>
		</div>
	</div>
</div>
<div class="row mt-5">
	<div class="col-sm-12 col-md-6">
		<div class="card">
			<img src="/assets/toolkit/images/fu-3624167_1280.jpg" class="card-img-top" alt="...">
			<div class="card-body">
				<h5 class="card-title mb-3 text-truncate"><img src="/assets/toolkit/images/location_city.svg" class="icon">Monfort Théâtre</h5>
				<p class="card-text text-truncate">99 Jardins de l'Arche, 92000 Nanterre. Address
					line</p>
			</div>
		</div>
	</div>
	<div class="col-sm-12 col-md-6">
		<div class="card">
			<img src="/assets/toolkit/images/demonstration-2482170_1280.jpg" class="card-img-top" alt="...">
			<div class="card-body">
				<h5 class="card-title mb-3 text-truncate"><img src="/assets/toolkit/images/trees.svg" class="icon">La U Arena has a very
					long title</h5>
				<p class="card-text text-truncate">99 Jardins de l'Arche, 92000 Nanterre</p>
			</div>
		</div>
	</div>
</div>

Checkbox

Checkboxes

Option one is this and that—be sure to include why it's great

Option two is disabled

Custom checkboxes

Check this custom checkbox

Disabled custom checkbox

<fieldset class="form-group">
	<legend>Checkboxes</legend>
	<div class="form-check">
		<label class="form-check-label">
			<input class="form-check-input" type="checkbox" value="" checked="">
			Option one is this and that—be sure to include why it's great
		</label>
	</div>
	<div class="form-check disabled">
		<label class="form-check-label">
			<input class="form-check-input" type="checkbox" value="" disabled="">
			Option two is disabled
		</label>
	</div>

	<br>
	<legend>Custom checkboxes</legend>
	<div class="form-group">
		<div class="custom-control custom-checkbox">
			<input type="checkbox" class="custom-control-input" id="customCheck1" checked="">
			<label class="custom-control-label" for="customCheck1">Check this custom
				checkbox</label>
		</div>
		<div class="custom-control custom-checkbox">
			<input type="checkbox" class="custom-control-input" id="customCheck2" disabled="">
			<label class="custom-control-label" for="customCheck2">Disabled custom
				checkbox</label>
		</div>
	</div>
</fieldset>

Dropdown

Mappr UI overrides the styles of default Bootstrap dropdowns.

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
	<button type="button" class="btn btn-primary">Primary</button>
	<div class="btn-group" role="group">
		<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
		<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
			<a class="dropdown-item" href="#">Dropdown link</a>
			<a class="dropdown-item" href="#">Dropdown link</a>
		</div>
	</div>
</div>

<div class="btn-group dropup" role="group" aria-label="Button with nested dropup">
	<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success
	</button>
	<div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
		<a class="dropdown-item" href="#">Dropdown link</a>
		<a class="dropdown-item" href="#">Dropdown link</a>
	</div>
</div>

<div class="btn-group" role="group" aria-label="Button with nested dropdown">
	<button type="button" class="btn btn-outline-info dropdown-toggle font-weight-normal" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info
	</button>
	<div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
		<a class="dropdown-item" href="#">Dropdown link</a>
		<a class="dropdown-item" href="#">Dropdown link</a>
	</div>
</div>

<div class="btn-group" role="group" aria-label="Button with nested dropup">
	<button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger
	</button>
	<div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
		<a class="dropdown-item" href="#">Dropdown link</a>
		<a class="dropdown-item" href="#">Dropdown link</a>
	</div>
</div>
<div class="btn-group" role="group" aria-label="Button with nested dropdown">
	<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link
	</button>
	<div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
		<a class="dropdown-item" href="#">Dropdown link</a>
		<a class="dropdown-item" href="#">Dropdown link</a>
	</div>
</div>
<div class="btn-group" role="group" aria-label="Button with nested dropdown">
	<button type="button" class="btn btn-link btn-sm text-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link
	</button>
	<div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
		<a class="dropdown-item" href="#">Dropdown link</a>
		<a class="dropdown-item" href="#">Dropdown link</a>
	</div>
</div>

Icon

Mappr UI provides a handy pack of icons that can be used in the UI elements. The icons are provided as a custom icon font, so should include the MapprIcons font mappr-icons.css in the page in order to use the icons.

Usage

The UI provides custom classes that are used to render the icons inside an element. Use the class icon on an element to apply the general icon styles and a specific icon-{name}. As the icons are added as regular characters from a font, they can be easily resized with font-size CSS option.

<div class="icons">
	<i class="icon icon-arrow_right">icon-arrow_right</i>
	<i class="icon icon-arrow_left">icon-arrow_left</i>
	<i class="icon icon-arrow_up">icon-arrow_up</i>
	<i class="icon icon-arrow_down">icon-arrow_down</i>
	<i class="icon icon-slider_arrow_left">icon-slider_arrow_left</i>
	<i class="icon icon-slider_arrow_right">icon-slider_arrow_right</i>
	<i class="icon icon-back_arrow">icon-back_arrow</i>
	<i class="icon icon-arrow">icon-arrow</i>
	<i class="icon icon-search">icon-search</i>
	<i class="icon icon-share">icon-share</i>
	<i class="icon icon-facebook">icon-facebook</i>
	<i class="icon icon-twitter">icon-twitter</i>
	<i class="icon icon-linkedin">icon-linkedin</i>
	<i class="icon icon-linkedin_2">icon-linkedin_2</i>
	<i class="icon icon-email">icon-email</i>
	<i class="icon icon-settings">icon-settings</i>
	<i class="icon icon-settings_2">icon-settings_2</i>
	<i class="icon icon-list">icon-list</i>
	<i class="icon icon-cards">icon-cards</i>
	<i class="icon icon-calendar">icon-calendar</i>
	<i class="icon icon-mobile_filter">icon-mobile_filter</i>
	<i class="icon icon-location_pin">icon-location_pin</i>
	<i class="icon icon-print">icon-print</i>
	<i class="icon icon-message">icon-message</i>
	<i class="icon icon-more">icon-more</i>
	<i class="icon icon-www">icon-www</i>
	<i class="icon icon-three_d">icon-three_d</i>
	<i class="icon icon-photo">icon-photo</i>
	<i class="icon icon-play">icon-play</i>
	<i class="icon icon-close">icon-close</i>
	<i class="icon icon-check">icon-check</i>
	<i class="icon icon-layers">icon-layers</i>
</div>

Lists

Check List

Mappr UI provides a custom list style that helps to build checklist with items containing checkboxes and badges.

Active checked item
1788
Unchecked item
480
Disabled list item
0

<div class="row">
	<div class="col-sm-12 col-md-6">
		<ul class="list-group list-group-flush border rounded">
			<li class="list-group-item d-flex justify-content-between align-items-center">
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="list-item-check-1" checked>
					<label class="custom-control-label" for="list-item-check-1">
						Active checked item
					</label>
				</div>
				<span class="badge badge-primary badge-pill">1788</span>
			</li>
			<li class="list-group-item d-flex justify-content-between align-items-center">
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="list-item-check-2">
					<label class="custom-control-label" for="list-item-check-2">
						Unchecked item
					</label>
				</div>
				<span class="badge badge-primary badge-pill">480</span>
			</li>
			<li class="list-group-item d-flex justify-content-between align-items-center disabled">
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="list-item-check-3">
					<label class="custom-control-label" for="list-item-check-3">
						Disabled list item
					</label>
				</div>
				<span class="badge badge-primary badge-pill">0</span>
			</li>
		</ul>
	</div>
</div>

Media List

Mappr UI provides a custom list style containing media items containing an image, an icon a title and a text. There are 2 versions of this lists. One that truncates the texts to 1 line each and the other that shows 2 lines at most. Use the class text-truncate in order to have only 1 line of title or subtitle.

La Seine Musicale

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
La U Arena Paris La Défense

99 Jardins de l'Arche, 92000 Nanterre. Address line
Porte de Saint-Cloud

99 Jardins de l'Arche

La Seine Musicale lorem ipsum dolor sitam et

Donec id elit non mi porta gravida at eget metus. Maecen sed diam eget risus varius blandit.
La U Arena Paris La Défense

99 Jardins de l'Arche, 92000 Nanterre. Address line
Porte de Saint-Cloud

99 Jardins de l'Arche, 99 Jardins de l'Arche, 92000 Address line is long
Porte de Saint-Cloud

99 Jardins de l'Arche

<div class="row">
	<div class="col-sm-6">
		<ul class="list-group list-group-flush">
			<li class="list-group-item media text-truncate list-group-item-action active">
				<img src="/assets/toolkit/images/fu-3624167_1280.jpg" class="rounded" alt="...">
				<div class="media-body text-truncate">
					<h5 class="mt-0 mb-1 text-truncate"><img class="icon" src="/assets/toolkit/images/location_city.svg">La
						Seine Musicale</h5>
					<p class="text-truncate">
						Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget
						risus varius blandit.
					</p>
				</div>
			</li>
			<li class="list-group-item media text-truncate list-group-item-action">
				<img src="/assets/toolkit/images/demonstration-2482170_1280.jpg" class="rounded" alt="...">
				<div class="media-body text-truncate">
					<h5 class="mt-0 mb-1 text-truncate"><img class="icon" src="/assets/toolkit/images/olimpics-games.svg">La
						U Arena Paris La Défense</h5>
					<p class="text-truncate">
						99 Jardins de l'Arche, 92000 Nanterre. Address line
					</p>
				</div>
			</li>
			<li class="list-group-item media text-truncate list-group-item-action">
				<img src="/assets/toolkit/images/book-2020460_1280.jpg" class="rounded" alt="...">
				<div class="media-body text-truncate">
					<h5 class="mt-0 mb-1 text-truncate"><img class="icon" src="/assets/toolkit/images/trees.svg">Porte de
						Saint-Cloud</h5>
					<p class="text-truncate">
						99 Jardins de l'Arche
					</p>
				</div>
			</li>
		</ul>
	</div>
	<div class="col-sm-6">
		<ul class="list-group list-group-flush">
			<li class="list-group-item media overflow-hidden list-group-item-action active">
				<img src="/assets/toolkit/images/fu-3624167_1280.jpg" class="rounded" alt="...">
				<div class="media-body overflow-hidden">
					<h5 class="mt-0 mb-3">
						<img class="icon" src="/assets/toolkit/images/location_city.svg">
						La Seine Musicale lorem ipsum dolor sitam et
					</h5>
					<p>
						Donec id elit non mi porta gravida at eget metus. Maecen sed diam eget
						risus varius blandit.
					</p>
				</div>
			</li>
			<li class="list-group-item media overflow-hidden list-group-item-action">
				<img src="/assets/toolkit/images/demonstration-2482170_1280.jpg" class="rounded" alt="...">
				<div class="media-body overflow-hidden">
					<h5 class="mt-0 mb-3">
						<img class="icon" src="/assets/toolkit/images/olimpics-games.svg">
						La U Arena Paris La Défense
					</h5>
					<p>
						99 Jardins de l'Arche, 92000 Nanterre. Address line
					</p>
				</div>
			</li>
			<li class="list-group-item media overflow-hidden list-group-item-action">
				<img src="/assets/toolkit/images/book-2020460_1280.jpg" class="rounded" alt="...">
				<div class="media-body overflow-hidden">
					<h5 class="mt-0 mb-3">
						<img class="icon" src="/assets/toolkit/images/trees.svg">Porte de Saint-Cloud</h5>
					<p>
						99 Jardins de l'Arche, 99 Jardins de l'Arche, 92000 Address line is long
					</p>
				</div>
			</li>
			<li class="list-group-item media overflow-hidden list-group-item-action">
				<img src="/assets/toolkit/images/book-2020460_1280.jpg" class="rounded" alt="...">
				<div class="media-body overflow-hidden">
					<h5 class="mt-0 mb-3">
						<img class="icon" src="/assets/toolkit/images/trees.svg">Porte de Saint-Cloud</h5>
					<p>
						99 Jardins de l'Arche
					</p>
				</div>
			</li>
		</ul>
	</div>
</div>

Navbars

Dark

The customized version of Bootstrap's derk navbar.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarColor02">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active">
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Features</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Pricing</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">About</a>
			</li>
		</ul>
		<form class="form-inline my-2 my-lg-0">
			<input class="form-control mr-sm-2" type="text" placeholder="Search">
			<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
		</form>
	</div>
</nav>

Light

The customized version of Bootstrap's light navbar.

<nav class="navbar navbar-expand-lg navbar-light bg-white">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarColor03">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active">
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Features</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Pricing</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">About</a>
			</li>
		</ul>
		<form class="form-inline my-2 my-lg-0">
			<input class="form-control mr-sm-2" type="text" placeholder="Search">
			<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
		</form>
	</div>
</nav>

Primary

The customized version of Bootstrap's primary navbar.

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
	<a class="navbar-brand" href="#">Navbar</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>

	<div class="collapse navbar-collapse" id="navbarColor01">
		<ul class="navbar-nav mr-auto">
			<li class="nav-item active">
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Features</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">Pricing</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="#">About</a>
			</li>
		</ul>
		<form class="form-inline my-2 my-lg-0">
			<input class="form-control mr-sm-2" type="text" placeholder="Search">
			<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
		</form>
	</div>
</nav>

Pagination

Mappr UI customizes the default Bootstrap pagination elements. It provides 2 versions of pagination components and also different sizes.

Navigation

Page 2 of 5

Pages

«
1
2
3
4
5
»

Larger Pages

«
1
2
3
4
5
»

Smaller Pages

«
1
2
3
4
5
»

<h5 class="mt-5">Navigation</h5>
<div class="btn-group btn-group-sm btn-group-pagination" role="group" aria-label="Pagination">
	<button type="button" class="btn btn-link"><i class="icon icon-arrow_left"></i></button>
	<div class="pagination-content"><strong class="text-primary">Page 2</strong> of 5</div>
	<button type="button" class="btn btn-link"><i class="icon icon-arrow_right"></i>
	</button>
</div>

<h5 class="mt-5">Pages</h5>
<ul class="pagination">
	<li class="page-item disabled">
		<a class="page-link" href="#">«</a>
	</li>
	<li class="page-item active">
		<a class="page-link" href="#">1</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">2</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">3</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">4</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">5</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">»</a>
	</li>
</ul>

<h5 class="mt-5">Larger Pages</h5>
<ul class="pagination pagination-lg">
	<li class="page-item disabled">
		<a class="page-link" href="#">«</a>
	</li>
	<li class="page-item active">
		<a class="page-link" href="#">1</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">2</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">3</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">4</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">5</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">»</a>
	</li>
</ul>

<h5 class="mt-5">Smaller Pages</h5>
<ul class="pagination pagination-sm">
	<li class="page-item disabled">
		<a class="page-link" href="#">«</a>
	</li>
	<li class="page-item active">
		<a class="page-link" href="#">1</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">2</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">3</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">4</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">5</a>
	</li>
	<li class="page-item">
		<a class="page-link" href="#">»</a>
	</li>
</ul>

Popover And Tooltip

Mappr UI customizes the default Bootstrap popover and Bootstrap tooltip styles.

Popovers

Popovers are displayed when the triggering element is clicked. They can be opened on any of the 4 sides of the trigger element with the data-placement={side} attribute.

Tooltips

Tooltips are displayed when the triggering element is hovered. They can be opened on any of the 4 sides of the trigger element with the data-placement={side} attribute.

<h5>Popovers</h5>
<p>Popovers are displayed when the triggering element is clicked. They can be opened on any of the 4 sides of the
	trigger element with the <code>data-placement={side}</code> attribute.</p>
<div>
	<button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left
	</button>
	<button type="button" class="btn btn-secondary" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
	</button>
	<button type="button" class="btn btn-success" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Bottom
	</button>
	<button type="button" class="btn btn-warning" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right
	</button>
</div>

<h5 class="mt-3">Tooltips</h5>
<p>Tooltips are displayed when the triggering element is hovered. They can be opened on any of the 4 sides of the
	trigger element with the <code>data-placement={side}</code> attribute.</p>
<div>
	<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Left
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Top
	</button>
	<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Bottom
	</button>
	<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Right
	</button>
</div>

Progress Bar

Mappr UI customizes and enhances the defaultBootstrap progress bar styles.

Basic

The default progress bar looks like this:

Contextual alternatives

All the contextual colors are available with the usage of bg-{color} classes:

Gradient

Mappr UI adds a custom version of the progress bar which has a gradient background. The gradient goes from the primary to the secondary colors.

Stacked bars

Several bars can be used in the same progress element:

Striped

Striped versions are also available for all colors with the usage of progress-bar-striped class:

Animated

Striped bars can also be animated with progress-bar-animated class:

Indeterminate

Mappr UI provides a special version of the progress bars that do not require the actual progress tracking. It indefinitely animates the bar size so that it is unclear when the process will be finished. The animation can be used with any color version of the bar by adding a progress-bar-indeterminate class to it.

<h5>Basic</h5>
<p>The default progress bar looks like this:</p>

<div class="progress">
	<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<h5 class="mt-5">Contextual alternatives</h5>
<p>All the contextual colors are available with the usage of <code>bg-{color}</code> classes:</p>

<div class="progress">
	<div class="progress-bar bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
	<div class="progress-bar bg-info" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
	<div class="progress-bar bg-warning" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
	<div class="progress-bar bg-danger" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>


<h5 class="mt-5">Gradient</h5>
<p>Mappr UI adds a custom version of the progress bar which has a gradient background. The gradient goes from the
	primary to the secondary colors.</p>

<div class="progress">
	<div class="progress-bar bg-gradient" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
</div>

<h5 class="mt-5">Stacked bars</h5>
<p>Several bars can be used in the same progress element:</p>
<div>
	<div class="progress">
		<div class="progress-bar" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
		<div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
		<div class="progress-bar bg-info" role="progressbar" style="width: 20%;" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
	</div>
</div>

<h5 class="mt-5">Striped</h5>
<p>Striped versions are also available for all colors with the usage of <code>progress-bar-striped</code> class:</p>

<div class="progress mb-3">
	<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
	<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
	<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
	<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress mb-3">
	<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<h5 class="mt-5">Animated</h5>
<p>Striped bars can also be animated with <code>progress-bar-animated</code> class:</p>

<div class="progress">
	<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
</div>

<h5 class="mt-5">Indeterminate</h5>
<p>Mappr UI provides a special version of the progress bars that do not require the actual progress tracking. It
	indefinitely animates the bar size so that it is unclear when the process will be finished. The animation can be
	used with any color version of the bar by adding a <code>progress-bar-indeterminate</code> class to it.</p>

<div class="progress mb-3">
	<div class="progress-bar bg-success progress-bar-indeterminate" role="progressbar"></div>
</div>

<div class="progress mb-3">
	<div class="progress-bar bg-gradient progress-bar-indeterminate" role="progressbar"></div>
</div>

<div class="progress mb-3">
	<div class="progress-bar bg-warning progress-bar-striped progress-bar-indeterminate" role="progressbar"></div>
</div>

Radio

Radio buttons

Option one is this and that—be sure to include why it's great

Option two can be something else and selecting it will deselect option one

Option three is disabled

Custom radio buttons

Toggle this custom radio

Or toggle this other custom radio

Disabled custom radio

<fieldset class="form-group">
	<legend>Radio buttons</legend>
	<div class="form-check">
		<label class="form-check-label">
			<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
			Option one is this and that—be sure to include why it's great
		</label>
	</div>
	<div class="form-check">
		<label class="form-check-label">
			<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
			Option two can be something else and selecting it will deselect
			option one
		</label>
	</div>
	<div class="form-check disabled">
		<label class="form-check-label">
			<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled="">
			Option three is disabled
		</label>
	</div>
	<br>
	<legend>Custom radio buttons</legend>
	<div class="form-group">
		<div class="custom-control custom-radio">
			<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked="">
			<label class="custom-control-label" for="customRadio1">Toggle this custom
				radio</label>
		</div>
		<div class="custom-control custom-radio">
			<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
			<label class="custom-control-label" for="customRadio2">Or toggle this other
				custom radio</label>
		</div>
		<div class="custom-control custom-radio">
			<input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" disabled="">
			<label class="custom-control-label" for="customRadio3">Disabled custom
				radio</label>
		</div>
	</div>
</fieldset>

Select

Example select

Example multiple select

Custom auto complete select

Paris (345)
Paris Region (768)
Paris Area (239)

<div class="form-group">
	<label for="exampleSelect1">Example select</label>
	<select class="form-control" id="exampleSelect1">
		<optgroup label="Option group">
			<option>1</option>
			<option>2</option>
			<option>3</option>
		</optgroup>
		<option>4</option>
		<option>5</option>
	</select>
</div>
<div class="form-group">
	<label for="exampleSelect2">Example multiple select</label>
	<select multiple="" class="form-control" id="exampleSelect2">
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
	</select>
</div>

<div class="form-group form-group-custom-autocomplete row" aria-expanded="true">
	<div class="col-sm-10">
		<label>Custom auto complete select</label>
		<div class="input-group">
			<input type="text" class="form-control focus search" value="Par">
			<div class="input-group-append">
				<span class="input-group-text"><i class="icon icon-search"></i></span>
			</div>
		</div>
		<ul class="custom-autocomplete list-unstyled">
			<li><b>Par</b>is (345)</li>
			<li><b>Par</b>is Region (768)</li>
			<li><b>Par</b>is Area (239)</li>
		</ul>
	</div>
</div>

Switch

Toggle this switch element

Disabled switch element

<div class="form-group">
	<div class="custom-control custom-switch">
		<input type="checkbox" class="custom-control-input" id="customSwitch1" checked="">
		<label class="custom-control-label" for="customSwitch1">Toggle this switch
			element</label>
	</div>
	<div class="custom-control custom-switch">
		<input type="checkbox" class="custom-control-input" disabled="" id="customSwitch2">
		<label class="custom-control-label" for="customSwitch2">Disabled switch
			element</label>
	</div>
</div>

Text Input

Email address We'll never share your email with anyone else.

Password

File input This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.

Readonly input

Valid input

Success! You've done it.

Invalid input

Sorry, that username's taken. Try another?

Large input

Default input

Small input

Input addons

$

.00

<div class="form-group">
	<label for="exampleInputEmail1">Email address</label>
	<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
	<small id="emailHelp" class="form-text text-muted">We'll never share your
		email with anyone else.
	</small>
</div>

<div class="form-group">
	<label for="exampleInputPassword1">Password</label>
	<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>

<div class="form-group">
	<label for="exampleInputFile">File input</label>
	<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
	<small id="fileHelp" class="form-text text-muted">This is some placeholder
		block-level help text for
		the above input. It's a bit lighter and easily wraps to a new line.
	</small>
</div>

<div class="form-group">
	<fieldset>
		<label class="control-label" for="readOnlyInput">Readonly input</label>
		<input class="form-control" id="readOnlyInput" type="text" placeholder="Readonly input here…" readonly="">
	</fieldset>
</div>

<div class="form-group has-success">
	<label class="form-control-label" for="inputValid">Valid input</label>
	<input type="text" value="correct value" class="form-control is-valid" id="inputValid">
	<div class="valid-feedback">Success! You've done it.</div>
</div>

<div class="form-group has-danger">
	<label class="form-control-label" for="inputInvalid">Invalid input</label>
	<input type="text" value="wrong value" class="form-control is-invalid" id="inputInvalid">
	<div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
</div>

<div class="form-group">
	<label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
	<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" id="inputLarge">
</div>

<div class="form-group">
	<label class="col-form-label" for="inputDefault">Default input</label>
	<input type="text" class="form-control" placeholder="Default input" id="inputDefault">
</div>

<div class="form-group">
	<label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
	<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" id="inputSmall">
</div>

<div class="form-group">
	<label class="control-label">Input addons</label>
	<div class="form-group">
		<div class="input-group mb-3">
			<div class="input-group-prepend">
				<span class="input-group-text">$</span>
			</div>
			<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
			<div class="input-group-append">
				<span class="input-group-text">.00</span>
			</div>
		</div>
	</div>
</div>

Textarea

Example textarea

<div class="form-group">
	<label for="exampleTextarea">Example textarea</label>
	<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>