toc: true
---
-
-
## Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input. **We do not support multiple form-controls in a single input group** and `<label>`s must come outside the input group.
Things to know when using the popover plugin:
-
- Popovers rely on the 3rd party library [Popper.js](https://popper.js.org/) for positioning. You must include [popper.min.js]({{ site.cdn.popper }}) before bootstrap.js or use `bootstrap.bundle.min.js` / `bootstrap.bundle.js` which contains Popper.js in order for popovers to work!
- Popovers require the [tooltip plugin]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) as a dependency.
- If you're building our JavaScript from source, it [requires `util.js`]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/#util).
/*
* Globals
*/
-
@media (min-width: 48em) {
html {
font-size: 18px;
color: #333;
}
-
/*
* Override Bootstrap's default container.
*/
-
.container {
max-width: 60rem;
}
-
/*
* Masthead for nav
*/
-
.blog-masthead {
margin-bottom: 3rem;
background-color: #428bca;
border-left: .3rem solid transparent;
}
-
/*
* Blog name and description
*/
-
.blog-header {
padding-bottom: 1.25rem;
margin-bottom: 2rem;
}
}
-
/*
* Main column and sidebar layout
*/
margin-bottom: 0;
}
-
/* Pagination */
.blog-pagination {
margin-bottom: 4rem;
border-radius: 2rem;
}
-
/*
* Blog posts
*/
-
.blog-post {
margin-bottom: 4rem;
}
color: #999;
}
-
/*
* Footer
*/
-
.blog-footer {
padding: 2.5rem 0;
color: #999;
</p>
</footer>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<p class="float-right"><a href="#">Back to top</a></p>
<p>© 2017 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
-
</main>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
/*
* Base structure
*/
-
html,
body {
height: 100%;
/*
* Header
*/
-
.masthead {
margin-bottom: 2rem;
}
/*
* Cover
*/
-
.cover {
padding: 0 1.5rem;
}
/*
* Footer
*/
-
.mastfoot {
color: rgba(255, 255, 255, .5);
}
/*
* Affix and center
*/
-
@media (min-width: 40em) {
/* Pull out the header and footer */
.masthead {
</div> <!-- /container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</main>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</main>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</main>
</div>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<p>© Company 2017</p>
</footer>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</main><!-- /.container -->
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
</div>
</footer>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<button type="button" class="btn btn-secondary tooltip-viewport-right btn-bottom" title="This should be shifted up">Shift Up</button>
</div>
-
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->