gadmin
Version:
Free Bootstrap 4 Gentelella inspired admin template
1,170 lines (1,119 loc) • 49 kB
HTML
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.6.3/css/all.min.css"
/>
<link rel="stylesheet" href="/assets/css/bootstrap.css" />
<link rel="stylesheet" href="/assets/css/theme.css" />
<link rel="stylesheet" href="/assets/css/excludable.css" />
<title>GAdmin</title>
</head>
<body>
<div class="g-navigation">
<header class="g-header">
<a
class="g-header__title d-flex align-items-center justify-content-center"
href="/index.html"
>
<i class="far fa-clone"></i>
<span class="g-header__site-name">
G<span class="e-site-emphasize">Admin</span>
</span>
</a>
<div class="d-flex justify-content-between">
<div class="d-flex align-items-center">
<a class="g-header__sidebar-toggle" href="javascript:void(0)">
<i class="fas fa-bars"></i>
</a>
</div>
<ul class="nav d-flex align-items-center">
<li class="g-header__nav-item dropdown">
<a
class="g-header__nav-link nav-link dropdown-toggle d-flex active align-items-center"
href="#"
>
<img
class="g-header__profile-photo rounded-circle"
src="https://avatars3.githubusercontent.com/u/1621344?s=460&v=4"
/>
Christian
</a>
</li>
<li class="g-header__nav-item dropdown">
<a
class="g-header__nav-link nav-link dropdown-toggle d-flex active align-items-center"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
<i class="g-header__icon far fa-envelope">
<span class="g-header__alert badge-success badge-pill">6</span>
</i>
</a>
<div
class="g-notification g-notification--messages dropdown-menu dropdown-menu-right"
>
<div class="g-notification__items">
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/men/27.jpg"
/>
<span class="g-notification__title">John Doe</span>
<span class="g-notification__message">Hey there!</span>
<span class="g-notification__time">10 mins ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/women/68.jpg"
/>
<span class="g-notification__title">Jane Doe</span>
<span class="g-notification__message">Thanks for using this theme!</span>
<span class="g-notification__time">1 hour ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/men/60.jpg"
/>
<span class="g-notification__title">Richard Roe</span>
<span class="g-notification__message">Cheers!</span>
<span class="g-notification__time">1 day ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/men/27.jpg"
/>
<span class="g-notification__title">John Doe</span>
<span class="g-notification__message">Hey there!</span>
<span class="g-notification__time">15 days ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/women/68.jpg"
/>
<span class="g-notification__title">Jane Doe</span>
<span class="g-notification__message">Thanks for using this theme!</span>
<span class="g-notification__time">1 month ago</span>
</div>
</a>
<a class="g-notification__item dropdown-item" href="#">
<div>
<img
class="g-notification__image rounded-circle float-left"
src="https://randomuser.me/api/portraits/men/60.jpg"
/>
<span class="g-notification__title">Richard Roe</span>
<span class="g-notification__message">Cheers!</span>
<span class="g-notification__time">1 year ago</span>
</div>
</a>
</div>
<a
class="g-notification__item g-notification__item--toolbar dropdown-item text-center"
href="#"
>
Show older messages
</a>
</div>
</li>
<li class="g-header__nav-item dropdown">
<a
class="g-header__nav-link nav-link dropdown-toggle d-flex active align-items-center"
data-toggle="dropdown"
role="button"
aria-haspopup="true"
aria-expanded="false"
>
<i class="g-header__icon g-header__icon--caret fas fa-caret-down"></i>
</a>
<div class="g-notification dropdown-menu dropdown-menu-right">
<a class="g-notification__item dropdown-item" href="#">Help</a>
<a class="g-notification__item dropdown-item" href="#">Activity Log</a>
<a class="g-notification__item dropdown-item" href="#">Preferences</a>
<a class="g-notification__item dropdown-item" href="#">
Settings
<span class="badge badge-pill badge-danger float-right">50%</span>
</a>
<div class="g-notification__divider dropdown-divider"></div>
<a class="g-notification__item dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</header>
<nav class="g-sidebar">
<div class="g-sidebar__profile container d-flex active align-items-center">
<img
class="g-sidebar__profile-photo rounded-circle img-fluid"
src="https://avatars3.githubusercontent.com/u/1621344?s=460&v=4"
/>
<div class="g-sidebar__details">
<span class="g-sidebar__profile-message">Welcome,</span>
<span class="g-sidebar__profile-name">Christian Esperar</span>
</div>
</div>
<div class="g-sidebar__menu">
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/index.html">
<i class="g-sidebar__menu-icon fas fa-home"></i>
<span class="g-sidebar__menu-description">Dashboard</span>
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/bootstrap-4-components">
<i class="g-sidebar__menu-icon fas e-bootstrap-logo-b">
B <span class="e-bootstrap-logo-4">4</span>
</i>
<span class="g-sidebar__menu-description">Components</span>
</a>
</li>
</ul>
<span class="g-sidebar__menu-title">Examples</span>
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link">
<i class="g-sidebar__menu-icon far fa-window-restore"></i>
<span class="g-sidebar__menu-description">Layout</span>
</a>
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/layout-fixed-navigation.html">
Fixed navigation
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/layout-fixed-footer.html">
Fixed footer
</a>
</li>
</ul>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link">
<i class="g-sidebar__menu-icon fas fa-file"></i>
<span class="g-sidebar__menu-description">Pages</span>
</a>
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="/pages-blank.html">
Blank
</a>
</li>
</ul>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link">
<i class="g-sidebar__menu-icon fas fa-list-ul"></i>
<span class="g-sidebar__menu-description">Multilevel Menu</span>
</a>
<!-- First Level Menu -->
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level One
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level One
</a>
<!-- Second Level Menu -->
<ul class="g-sidebar__menu-list">
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level Two
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level Two
</a>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level Two
</a>
</li>
</ul>
</li>
<li class="g-sidebar__menu-item">
<a class="g-sidebar__menu-link" href="javascript:void(0)">
Level One
</a>
</li>
</ul>
</li>
</ul>
</div>
<ul class="g-sidebar__footer">
<li class="g-sidebar__footer-list">
<a
class="g-sidebar__footer-link"
href="javascript:void(0)"
data-toggle="tooltip"
data-placement="top"
title="Settings"
>
<i class="fas fa-cog"></i>
</a>
</li>
<li class="g-sidebar__footer-list">
<a
class="g-sidebar__footer-link"
href="javascript:void(0)"
data-toggle="tooltip"
data-placement="top"
title="Fullscreen"
>
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="g-sidebar__footer-list">
<a
class="g-sidebar__footer-link"
href="javascript:void(0)"
data-toggle="tooltip"
data-placement="top"
title="Lock"
>
<i class="far fa-eye-slash"></i>
</a>
</li>
<li class="g-sidebar__footer-list">
<a
class="g-sidebar__footer-link"
href="javascript:void(0)"
data-toggle="tooltip"
data-placement="top"
title="Logout"
>
<i class="fas fa-power-off"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="g-container">
<main class="g-main e--toc container-fluid" data-spy="scroll" data-target="#navbar-example3">
<div class="row">
<div class="col-12">
<div class="g-main__header">
<h1 class="g-main__title">Bootstrap 4 Components</h1>
<span class="g-main__subtitle">Over a dozen reusable components</span>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="alerts">Alerts</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/alerts"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Alerts</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<div class="alert alert-primary" role="alert">
This is a primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
This is a success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
This is a warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">This is a info alert—check it out!</div>
<div class="alert alert-light" role="alert">
This is a light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">This is a dark alert—check it out!</div>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="badge">Badges</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/badge"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Badges</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<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>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="breadcrumb">Breadcrumbs</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/breadcrumb"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Breadcrumbs</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item active" aria-current="page">Home</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="buttons">Buttons</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/buttons"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Buttons</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<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-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</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>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="button-group">Button group</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/button-group"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Button group</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="card">Cards</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/card"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Cards</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<div class="card" style="width: 18rem;">
<img
class="card-img-top"
data-src="holder.js/100px180/"
alt="100%x180"
style="height: 180px; width: 100%; display: block;"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22286%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20286%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1672cde27ba%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1672cde27ba%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.1953125%22%20y%3D%2296.6%22%3E%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
data-holder-rendered="true"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the
card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="carousel">Carousel</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/carousel"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Carousel</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active carousel-item-left">
<svg
class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
width="800"
height="400"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
aria-label="Placeholder: First slide"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#777"></rect>
<text x="50%" y="50%" fill="#555" dy=".3em">First slide</text>
</svg>
</div>
<div class="carousel-item carousel-item-next carousel-item-left">
<svg
class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
width="800"
height="400"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
aria-label="Placeholder: Second slide"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#666"></rect>
<text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text>
</svg>
</div>
<div class="carousel-item">
<svg
class="bd-placeholder-img bd-placeholder-img-lg d-block w-100"
width="800"
height="400"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMidYMid slice"
focusable="false"
role="img"
aria-label="Placeholder: Third slide"
>
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#555"></rect>
<text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text>
</svg>
</div>
</div>
<a
class="carousel-control-prev"
href="#carouselExampleControls"
role="button"
data-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"> </span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next"
href="#carouselExampleControls"
role="button"
data-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="collapse">Collapse</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/collapse"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Collapse</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<p>
<a
class="btn btn-primary"
data-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample"
>
Link with href
</a>
<button
class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#collapseExample"
aria-expanded="false"
aria-controls="collapseExample"
>
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="dropdowns">Dropdowns</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/dropdowns"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Dropdowns</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<div class="btn-group">
<button
type="button"
class="btn btn-primary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Primary
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button
type="button"
class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Secondary
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button
type="button"
class="btn btn-success dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Success
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button
type="button"
class="btn btn-info dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Info
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button
type="button"
class="btn btn-warning dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Warning
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
<div class="btn-group">
<button
type="button"
class="btn btn-danger dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Danger
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<!-- /btn-group -->
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="forms">Forms</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/forms"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Forms</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<form data-op-form-id="0">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<com-1password-op-button
id="com-1password-op-button"
data-op-target="0"
data-state="locked"
class="op-large"
style=" margin-left: 706.21875px !important; margin-top: 39px !important; background-image: url(chrome-extension://aeblfdkhhhdcdjpifhhbdiojplfjncoa/images/icons/app_icon-light_bg-color-locked-16.svg) !important; "
></com-1password-op-button
><input
type="email"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="Enter email"
data-op-id="0"
/>
<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 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" />
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="input-group">Input group</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/input-group"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Input group</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input
type="text"
class="form-control"
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
/>
</div>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Recipient's username"
aria-label="Recipient's username"
aria-describedby="basic-addon2"
/>
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon3"
>https://example.com/users/</span
>
</div>
<input
type="text"
class="form-control"
id="basic-url"
aria-describedby="basic-addon3"
/>
</div>
<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 class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"> </textarea>
</div>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="jumbotron">Jumbotron</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/jumbotron"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>Jumbotron</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">
This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.
</p>
<hr class="my-4" />
<p>
It uses utility classes for typography and spacing to space content out within
the larger container.
</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
</section>
<section class="g-section">
<div class="g-section__header">
<h2 class="g-section__title" id="list-group">List group</h2>
<div class="g-section__toolbar">
<div class="dropdown">
<a
class="g-section__link"
href="https://getbootstrap.com/docs/4.1/components/list-group"
target="_blank"
>
<i
class="fas fa-ellipsis-h"
data-toggle="tooltip"
data-placement="left"
data-html="true"
title="Read more about <strong>List group</strong>"
>
</i>
</a>
</div>
</div>
</div>
<div class="g-section__content">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</section>
</div>
</div>
</main>
<div class="e-toc">
<a
class="btn btn-outline-success btn-block"
href="https://getbootstrap.com/docs/4.1/components/"
target="_blank"
>
View documentation
</a>
<ul class="e-toc__items">
<li class="e-toc__item">
<a class="e-toc__link" href="#alerts">Alerts</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#badge">Badges</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#breadcrumb">Breadcrumbs</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#buttons">Buttons</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#button-group">Button group</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#card">Cards</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#carousel">Carousel</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#collapse">Collapse</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#dropdowns">Dropdowns</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#forms">Forms</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#input-group">Input group</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#jumbotron">Jumbotron</a>
</li>
<li class="e-toc__item">
<a class="e-toc__link" href="#list-group">List group</a>
</li>
</ul>
</div>
</div>
<footer class="g-footer text-right">
G<span class="e-site-emphasize">Admin</span> - Free Bootstrap 4 Admin Template
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.0/dist/js/bootstrap.min.js"></script>
<script src="/assets/js/custom.js"></script>
</body>
</html>