|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>Signal Bootstrap 4 Template 2</title>
|
|
|
<meta name="description" content="Signal is a free Bootstrap 4 theme by Themes.guide" />
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<meta name="generator" content="Themestr.app">
|
|
|
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
|
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" rel="stylesheet" />
|
|
|
<link rel="stylesheet" href="theme.css" />
|
|
|
<link rel="stylesheet" href="template2.css" />
|
|
|
</head>
|
|
|
<body data-spy="scroll" data-target="#navbar1" data-offset="60">
|
|
|
<div class="bg-primary">
|
|
|
<div class="container">
|
|
|
<div class="row align-items-center vh-50 py-5">
|
|
|
<div class="col-xl-5 col-lg-6 ml-auto py-2 text-light order-2 text-center text-lg-left">
|
|
|
<h1 class="mb-0">
|
|
|
<span>Signal</span>
|
|
|
</h1>
|
|
|
<p class="lead mb-3"><span>Like sailing yacht flags in a busy harbor.</span> This font face is Comfortaa. <a class="font-weight-bold text-white" href="http://themestr.app">Themestr.app</a> makes it easy to customize this, and other free Bootstrap 4 themes.</p>
|
|
|
<a class="btn btn-outline-light btn-lg mr-2" href="http://themestr.app" target="_new">Customize</a>
|
|
|
<div class="btn-group">
|
|
|
<a href="theme.css" class="btn btn-outline-light btn-lg">
|
|
|
Download Theme
|
|
|
</a>
|
|
|
<button type="button" class="btn btn-lg btn-outline-light dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
<span class="sr-only">Downloads</span>
|
|
|
</button>
|
|
|
<div class="dropdown-menu">
|
|
|
<a class="dropdown-item" href="theme.css">theme.css</a>
|
|
|
<a class="dropdown-item" href="theme.min.css">theme.min.css</a>
|
|
|
<div class="dropdown-divider"></div>
|
|
|
<a class="dropdown-item" href="theme.scss">theme.scss</a>
|
|
|
<div class="dropdown-divider"></div>
|
|
|
<a class="dropdown-item" target="new" href="https://github.com/ThemesGuide/bootstrap-themes/tree/master/signal">Full template</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-xl-4 col-lg-6 col mr-auto order-1 order-lg-last align-items-center justify-content-center justify-content-lg-end d-flex">
|
|
|
<div class="img-fluid text-white">
|
|
|
<svg class="i-desktop" viewBox="0 0 32 32" width="240" height="240" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5">
|
|
|
<path d="M10 29 C10 29 10 24 16 24 22 24 22 29 22 29 L10 29 Z M2 6 L2 23 30 23 30 6 2 6 Z"></path>
|
|
|
</svg>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-primary" id="navbar1">
|
|
|
<div class="container">
|
|
|
<a class="navbar-brand mr-1 mb-1 mt-0" href="../">Bootstrap 4</a>
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
</button>
|
|
|
<div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
|
|
|
<ul class="navbar-nav">
|
|
|
<li class="nav-item dropdown">
|
|
|
<a class="nav-link dropdown-toggle" href="#" id="themesDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
Themes
|
|
|
</a>
|
|
|
<div class="dropdown-menu" aria-labelledby="themesDd">
|
|
|
|
|
|
|
|
|
<a class="dropdown-item px-2 active" href="../signal">Signal</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../greyson">Greyson</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../fresca">Fresca</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../darkster">Darkster</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../hello_kiddie">Hello Kiddie</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../blue_voltage">Blue Voltage</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../hootstrap">Hootstrap</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../herbie">Herbie</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../boldstrap">Boldstrap</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../lovey">Lovey</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../bootstrap_purple">Bootstrap Purple</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../monotony">Monotony</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../poypull">Poypull</a>
|
|
|
|
|
|
<a class="dropdown-item px-2 " href="../tequila">Tequila</a>
|
|
|
|
|
|
<a class="dropdown-item px-2" href="https://themestr.app" rel="nofollow" target="_new" title="Bootstrap theme builder">Build your own...</a>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<ul class="navbar-nav ml-auto">
|
|
|
<li class="nav-item dropdown">
|
|
|
<a class="nav-link dropdown-toggle" href="#" id="layoutDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
Layouts
|
|
|
</a>
|
|
|
<div class="dropdown-menu" aria-labelledby="layoutDd">
|
|
|
<a class="dropdown-item px-2" href="./">Default</a>
|
|
|
<a class="dropdown-item px-2" href="./template2.html">Layout 2</a>
|
|
|
<a class="dropdown-item px-2" href="./template3.html">Layout 3</a>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#buttons">Buttons</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#navs">Navs</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#cards">Cards</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#modals">Modals</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#typography">Typography</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#forms">Forms</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#grid">Grid</a>
|
|
|
</li>
|
|
|
<li class="nav-item dropdown">
|
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDd" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
More
|
|
|
</a>
|
|
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDd">
|
|
|
<a class="dropdown-item px-2" href="#more">Badges</a>
|
|
|
<a class="dropdown-item px-2" href="#more">Tooltips & Popups</a>
|
|
|
<a class="dropdown-item px-2" href="#more">Progress & Alerts</a>
|
|
|
<div class="dropdown-divider"></div>
|
|
|
<a class="dropdown-item px-2" href="#more">All</a>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</nav>
|
|
|
<main>
|
|
|
<section class="container">
|
|
|
<div class="row py-5">
|
|
|
<div class="col-12 my-auto">
|
|
|
<div class="row text-center">
|
|
|
<div class="col-lg-4 mb-4">
|
|
|
<div class="card h-100">
|
|
|
<div class="card-body d-flex flex-column justify-content-center align-items-center">
|
|
|
<h1 class="display-2 text-primary"><span class="ion ion-ios-snow-outline"></span></h1>
|
|
|
<h4 class="card-title text-primary">Unique</h4>
|
|
|
<p class="card-text">Don't like that typical Bootstrap look? Each theme has a <strong>custom look-and-feel</strong>, while maximizing use of Bootstrap without extensive additional CSS & JS.</p>
|
|
|
<a href="#" class="btn btn-primary mt-auto">Button</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 mb-4">
|
|
|
<div class="card h-100">
|
|
|
<div class="card-body d-flex flex-column justify-content-center align-items-center">
|
|
|
<h1 class="display-2 text-primary"><span class="ion ion-ios-tablet-portrait-outline"></span></h1>
|
|
|
<h4 class="card-title text-primary">Responsive</h4>
|
|
|
<p class="card-text">Based on <strong>mobile-first</strong> Bootstrap 4, all themes are 100% responsive and designed to look great on everything from smartphones to tablets to desktops..</p>
|
|
|
<a href="#" class="btn btn-primary mt-auto">Button</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 mb-4">
|
|
|
<div class="card h-100">
|
|
|
<div class="card-body d-flex flex-column justify-content-center align-items-center">
|
|
|
<h1 class="display-2 text-primary"><span class="ion ion-ios-construct-outline"></span></h1>
|
|
|
<h4 class="card-title text-primary">Consistent</h4>
|
|
|
<p class="card-text">Themes are crafted with care for design and performance. Like Bootstrap, the themes are built on modern HTML5 & CSS3 standards to ensure consistency and <strong>cross-browser</strong> support.</p>
|
|
|
<a href="#" class="btn btn-primary mt-auto">Button</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section id="buttons" class="pb-5">
|
|
|
<div class="container">
|
|
|
<div class="row">
|
|
|
<div class="col-md-9">
|
|
|
<div class="pb-3">
|
|
|
<button type="button" class="btn btn-primary mr-1">Primary #FF304F</button>
|
|
|
<button type="button" class="btn btn-outline-primary">Outline</button>
|
|
|
</div>
|
|
|
<div class="pb-3">
|
|
|
<button type="button" class="btn btn-primary align-bottom btn-lg mr-1">Large</button>
|
|
|
<button type="button" class="btn btn-primary align-bottom mr-1">Normal</button>
|
|
|
<button type="button" class="btn btn-primary align-bottom btn-sm mr-1">Small</button>
|
|
|
<a href="#" class="text-primary">Text</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md d-none d-sm-block">
|
|
|
<h4>Code Explorer</h4>
|
|
|
<p>
|
|
|
Just hover over any of the Bootstrap
|
|
|
components, and click the
|
|
|
<span class="d-inline-block rounded border align-middle pb-1 px-1 small"><small><></small></span>
|
|
|
to view or copy the HTML markup for that element.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row py-2">
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-outline-secondary">Secondary</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-outline-info">Info</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-outline-danger">Danger</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-outline-success">Success</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-outline-warning">Warning</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-outline-light">Light</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-outline-dark">Dark</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row py-2">
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-secondary">Secondary</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-info">Info</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-danger">Danger</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-success">Success</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-warning">Warning</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-light">Light</button>
|
|
|
</div>
|
|
|
<div class="col-md-auto col-3">
|
|
|
<button class="btn btn-dark">Dark</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section id="navs" class="container pb-5">
|
|
|
<div class="row">
|
|
|
<div class="col-xl-9 pb-4">
|
|
|
<nav class="navbar navbar-expand-md navbar-dark bg-primary mb-2">
|
|
|
<a class="navbar-brand" href="#">Light text</a>
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#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 ml-auto">
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#" title="Current breakpoint tier">
|
|
|
Tier
|
|
|
<span class="d-xl-inline d-none">XL</span>
|
|
|
<span class="d-lg-inline d-xl-none d-none">LG</span>
|
|
|
<span class="d-md-inline d-lg-none d-none">MD</span>
|
|
|
<span class="d-sm-inline d-md-none d-none">SM</span>
|
|
|
<span class="d-inline d-sm-none">XS</span>
|
|
|
</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#">About</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</nav>
|
|
|
<nav class="navbar navbar-expand-md navbar-light bg-primary mb-3">
|
|
|
<a class="navbar-brand" href="#">Dark text</a>
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#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 ml-auto">
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#">Link</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#">About</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</nav>
|
|
|
<div class="card border-0">
|
|
|
<ul class="nav nav-tabs">
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link active" href="#tab1" data-toggle="tab">Tab</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#tab2" data-toggle="tab">Tab</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#tab3" data-toggle="tab">Tab</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link disabled" href="#tab4" data-toggle="tab">Disabled</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class="tab-content px-1 pt-3">
|
|
|
<div class="tab-pane active" id="tab1">
|
|
|
Select a palette, change the <span class="text-primary ">primary</span>, <span class="text-secondary ">secondary</span>,
|
|
|
<span class="text-success ">success</span>, <span class="text-danger ">danger</span>,
|
|
|
<span class="text-info ">info</span>, and <span class="text-warning ">warning</span> colors.
|
|
|
Choose from various Google Fonts, and modify most of the Bootstrap SASS variables. Click to generate your completely custom
|
|
|
Bootstrap theme.
|
|
|
</div>
|
|
|
<div class="tab-pane" id="tab2">
|
|
|
The whole idea is to make the Bootstrap customization process easier, and allow you to visualize changes along the way.
|
|
|
For most users it's designed to be point-and-click, while advanced users can delve into the SASS as desired. It's a 4-step process.
|
|
|
</div>
|
|
|
<div class="tab-pane" id="tab3">3. Put some more content in your pane here.</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-xl-3 pb-4">
|
|
|
<ul class="nav nav-pills flex-column mb-3">
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link active" href="#">Active</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#">Link</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#">Link</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link" href="#">Link</a>
|
|
|
</li>
|
|
|
<li class="nav-item">
|
|
|
<a class="nav-link disabled" href="#">Disabled</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class="btn-group mb-3 w-100">
|
|
|
<button type="button" class="btn btn-primary btn-block">Dropdown</button>
|
|
|
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
|
</button>
|
|
|
<div class="dropdown-menu dropdown-menu-right">
|
|
|
<a class="dropdown-item" href="#">Action</a>
|
|
|
<a class="dropdown-item" href="#">Link</a>
|
|
|
<div class="dropdown-divider"></div>
|
|
|
<a class="dropdown-item" href="#">Separated link</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section id="cards" class="container pb-5">
|
|
|
<div class="d-flex my-3">
|
|
|
<div class="jumbotron w-100 py-5 mx-auto">
|
|
|
<h1>Themestr.app</h1>
|
|
|
<h4>Theme Builder for Bootstrap</h4>
|
|
|
<p class="lead">
|
|
|
Rapidy build custom themes for Bootstrap, the world's most
|
|
|
popular front-end component library for mobile-first,
|
|
|
responsive Web apps. <a class="font-weight-bold" href="https://themestr.app">Themestr.app</a> is a customizer and theme creator for Bootstrap.
|
|
|
Choose from a huge collection of color palettes, fonts and SASS variables. Prototype different styles, and
|
|
|
easily generate CSS from SASS to give your projects a unique look-and-feel.
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
<div class="col-lg-4 mb-4">
|
|
|
<div class="card border-primary h-100">
|
|
|
<div class="card-body d-flex flex-column align-items-start">
|
|
|
<h4 class="card-title text-primary">Card Outline</h4>
|
|
|
<p class="card-text">Themestr.app makes it easy to customize this, and other free Bootstrap 4 themes for your downloading pleasure.</p>
|
|
|
<a href="#" class="btn btn-primary mt-auto">Button</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 mb-4">
|
|
|
<div class="card border-primary h-100">
|
|
|
<div class="card-body">
|
|
|
<div class="list-group">
|
|
|
<a href="#" class="list-group-item list-group-item-action active">Dis List Group</a>
|
|
|
<a href="#" class="list-group-item list-group-item-action">Custom Colors</a>
|
|
|
<a href="#" class="list-group-item list-group-item-action">Google Fonts</a>
|
|
|
<a href="#" class="list-group-item list-group-item-action disabled">Ionicons</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-lg-4 mb-4">
|
|
|
<div class="card bg-primary text-white h-100">
|
|
|
<div class="card-body d-flex flex-column align-items-start">
|
|
|
<h4 class="card-title">Scrollspy</h4>
|
|
|
<p class="card-text">The top NavBar utilizes Bootstrap's Scrollspy component. You'll notice when you scroll the page the "active" nav section is highlighted.</p>
|
|
|
<a href="https://getbootstrap.com/docs/4.1/components/scrollspy/" class="btn btn-primary border-white mt-auto">Read More</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section id="modals" class="container pb-5">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div class="container-fluid">
|
|
|
<div class="position-relative" style="z-index:1000">
|
|
|
<div id="myModal" class="modal d-block position-relative" tabindex="-1" role="dialog" aria-hidden="true">
|
|
|
<div class="modal-dialog">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<h3>Modal</h3>
|
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<p>This is a basic Bootstrap 4 modal. The modal also comes in a <a href="#modal-sm" data-toggle="modal">smaller</a> and <a href="#modal-lg" data-toggle="modal">larger</a> sizes.</p>
|
|
|
<p>
|
|
|
What will you put in your modal? Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
|
in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
|
|
|
</p>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button class="btn" data-dismiss="alert" aria-hidden="true">Close</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-9"></div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section id="typography" class="container pb-5">
|
|
|
<div class="row">
|
|
|
<div class="col-12">
|
|
|
<h4><a target="_new" href="https://fonts.google.com/specimen/Comfortaa">Comfortaa</a></h4>
|
|
|
</div>
|
|
|
<div class="col-xl-4">
|
|
|
<h6>Heading 6</h6>
|
|
|
<h5>Heading 5</h5>
|
|
|
<h4>Heading 4</h4>
|
|
|
<h3 class="text-truncate">Heading 3</h3>
|
|
|
<h2 class="text-truncate">Heading 2</h2>
|
|
|
<h1 class="text-truncate">Heading 1</h1>
|
|
|
<p class="lead">Lead</p>
|
|
|
<p>Paragraph</p>
|
|
|
<span class="badge badge-dark">badge</span>
|
|
|
</div>
|
|
|
<div class="col-xl-8 text-right">
|
|
|
<p class="display-4 text-truncate">Display 4</p>
|
|
|
<p class="display-3 text-truncate">Display 3</p>
|
|
|
<p class="display-2 text-truncate">Display 2</p>
|
|
|
<p class="display-1 text-truncate">Display 1</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section id="forms" class="container pb-5">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<form role="form">
|
|
|
<div class="form-group row">
|
|
|
<label class="col-md-2 col-form-label form-control-label text-muted">First</label>
|
|
|
<div class="col-md-4">
|
|
|
<input class="form-control" type="text" value="Jane">
|
|
|
</div>
|
|
|
<label class="col-md-1 col-form-label form-control-label text-muted">Last</label>
|
|
|
<div class="col-md-5">
|
|
|
<input class="form-control" type="text" value="Bishop">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group row">
|
|
|
<label class="col-lg-2 col-form-label form-control-label text-muted">Address</label>
|
|
|
<div class="col-lg-10">
|
|
|
<input class="form-control" type="text" placeholder="Street">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group row">
|
|
|
<label class="col-lg-2 col-form-label form-control-label text-muted"></label>
|
|
|
<div class="col-lg-6">
|
|
|
<input class="form-control" type="text" placeholder="City">
|
|
|
</div>
|
|
|
<div class="col-lg-4">
|
|
|
<select class="form-control">
|
|
|
<option>State</option>
|
|
|
<option>AK</option>
|
|
|
<option>AZ</option>
|
|
|
<option>CA</option>
|
|
|
<option>CO</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group row was-validated">
|
|
|
<label class="col-lg-2 col-form-label form-control-label text-muted">Username</label>
|
|
|
<div class="col-lg-10">
|
|
|
<input class="form-control" type="text" required="" id="un" name="un">
|
|
|
<div class="invalid-feedback">
|
|
|
Username is required.
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group row">
|
|
|
<label class="col-lg-2 col-form-label form-control-label"></label>
|
|
|
<div class="col-lg-10">
|
|
|
<input type="reset" class="btn btn-outline-secondary mr-2" value="Cancel">
|
|
|
<input type="button" class="btn btn-primary mr-2" value="Submit">
|
|
|
<div class="custom-control custom-checkbox d-inline">
|
|
|
<input type="checkbox" class="custom-control-input" id="customCheck" checked>
|
|
|
<label class="custom-control-label" for="customCheck">Check me out</label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section id="grid" class="container pb-5">
|
|
|
<p class="lead">The rows & columns of the world famous Bootstrap grid speak for themselves.</p>
|
|
|
<div class="row">
|
|
|
<div class="col-sm-6">
|
|
|
6
|
|
|
</div>
|
|
|
<div class="col-6">
|
|
|
<div class="card my-1 bg-light">6</div>
|
|
|
</div>
|
|
|
<div class="col-sm-5">
|
|
|
5
|
|
|
</div>
|
|
|
<div class="col-7">
|
|
|
<div class="card my-1">7</div>
|
|
|
</div>
|
|
|
<div class="col-sm-4">
|
|
|
4
|
|
|
</div>
|
|
|
<div class="col-8">
|
|
|
<div class="card my-1">8</div>
|
|
|
</div>
|
|
|
<div class="col-sm-3">
|
|
|
3
|
|
|
</div>
|
|
|
<div class="col-9">
|
|
|
<div class="card my-1">9</div>
|
|
|
</div>
|
|
|
<div class="col-sm-2">
|
|
|
2
|
|
|
</div>
|
|
|
<div class="col-10">
|
|
|
<div class="card my-1">10</div>
|
|
|
</div>
|
|
|
<div class="col-sm-1">
|
|
|
1
|
|
|
</div>
|
|
|
<div class="col-11">
|
|
|
<div class="card my-1">11</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
<section id="more" class="container pb-5">
|
|
|
<div class="row">
|
|
|
<div class="col-md-12">
|
|
|
<div class="table-responsive">
|
|
|
<table class="table table-hover table-sm">
|
|
|
<tbody>
|
|
|
<tr>
|
|
|
<th class="w-25">Location</th>
|
|
|
<th class="w-50">Date</th>
|
|
|
<th class="w-25">Visits</th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>Westfield</td>
|
|
|
<td>08.05.18 <span class="badge badge-primary">badge</span></td>
|
|
|
<td>2323</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>Galway</td>
|
|
|
<td>08.05.18 <span class="badge badge-pill badge-primary">badge-pill</span></td>
|
|
|
<td>5362</td>
|
|
|
</tr>
|
|
|
<tr class="table-primary">
|
|
|
<td>Bern</td>
|
|
|
<td>08.05.18</td>
|
|
|
<td>153</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="w-100 my-4"></div>
|
|
|
<div class="col-md-8">
|
|
|
<a href="#" class="text-primary" data-toggle="tooltip" data-placement="right" title="This tooltip is on the right.">Right tooltip (hover)</a>
|
|
|
<br>
|
|
|
<a href="#" class="text-primary" data-toggle="tooltip" data-placement="bottom" title="This tooltip is on the bottom.">Bottom tooltip (hover)</a>
|
|
|
<br>
|
|
|
</div>
|
|
|
<div class="col-md-4 text-right">
|
|
|
<!--
|
|
|
<div class="px-4 p-2 rounded bg-primary text-light" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">
|
|
|
Toggle my popover
|
|
|
</div>-->
|
|
|
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Toggle my popover</button>
|
|
|
</div>
|
|
|
<div class="w-100 my-4"></div>
|
|
|
<div class="col-md-12">
|
|
|
<div class="progress mb-2">
|
|
|
<div class="progress-bar bg-primary w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="col-md-12">
|
|
|
<div class="alert alert-primary alert-dismissable show fade" role="alert">
|
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
|
<span aria-hidden="true">×</span>
|
|
|
</button>
|
|
|
<strong>Well done!</strong> You successfully read this important alert message.
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="w-100 my-4"></div>
|
|
|
</div>
|
|
|
</section>
|
|
|
</main>
|
|
|
<footer id="footer" class="bg-dark text-light py-5">
|
|
|
<div class="container py-5">
|
|
|
<div class="row">
|
|
|
<div class="col-6 col-md-6 col-lg-3 mb-2">
|
|
|
<h6 class="text-uppercase">Tools</h6>
|
|
|
<ul class="nav flex-column">
|
|
|
<li><a class="text-white" target="ext" rel="nofollow" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
|
|
|
<li><a class="text-white" target="ext" rel="nofollow" href="http://themes.guide" title="Bootstrap free and pro themes">Themes.guide</a></li>
|
|
|
<li><a class="text-white" target="ext" rel="nofollow" href="http://codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a></li>
|
|
|
<li><a class="text-white" target="ext" rel="nofollow" href="http://bootply.com">Bootply</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="col-6 col-md-6 col-lg-3 mb-2">
|
|
|
<h6 class="text-uppercase">More</h6>
|
|
|
<ul class="nav flex-column">
|
|
|
<li><a class="text-white" target="_new" href="http://wdstack.com" title="The top projects, tools and apps for Web developers">WDStack</a></li>
|
|
|
<li><a class="text-white" target="_new" href="http://theme.cards">Theme.cards</a></li>
|
|
|
<li><a class="text-white" target="_new" href="http://www.bootbundle.com">BootBundle</a></li>
|
|
|
<li><a class="text-white" target="_new" title="Learn about Bootstrap 4 using this free theme" href="http://bootstrap4.guide">Bootstrap4.guide</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="col-12 col-md-12 col-lg-6 mb-2 text-right">
|
|
|
<h6 class="text-uppercase">Follow</h6>
|
|
|
<ul class="nav float-right">
|
|
|
<li><a class="text-white mr-2" rel="nofollow" href="http://twitter.com/ThemesGuide" title="Follow on Twitter"><i class="h1 fa fa-fw fa-twitter fa-2x ion-logo-twitter"></i></a></li>
|
|
|
<li><a class="text-white mr-2" rel="nofollow" href="https://www.facebook.com/codeply" title="Follow on Facebook"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-facebook"></i></a></li>
|
|
|
<li><a class="text-white mr" rel="nofollow" href="https://github.com/ThemesGuide/bootstrap-themes" title="Follow on GitHub"><i class="h1 fa fa-fw fa-facebook fa-2x ion-logo-github"></i></a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--/row-->
|
|
|
</div>
|
|
|
</footer>
|
|
|
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
|
|
|
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
|
|
<script src="scripts.js"></script>
|
|
|
</body>
|
|
|
</html> |
