2018-11-05 12:24:55 +01:00
---
layout: examples
title: Offcanvas template
2019-01-08 17:33:28 +01:00
extra_css:
- "offcanvas.css"
extra_js:
2019-06-30 15:24:24 +02:00
- src: "offcanvas.js"
2018-11-05 12:24:55 +01:00
body_class: "bg-light"
---
2013-06-24 02:17:08 +02:00
2018-11-05 12:24:55 +01:00
< nav class = "navbar navbar-expand-lg fixed-top navbar-dark bg-dark" >
2019-12-25 13:28:26 +01:00
< div class = "container-fluid" >
2019-12-25 17:45:40 +01:00
< a class = "navbar-brand" href = "#" > Offcanvas navbar< / a >
2019-12-25 13:28:26 +01:00
< button class = "navbar-toggler p-0 border-0" type = "button" data-toggle = "offcanvas" >
< span class = "navbar-toggler-icon" > < / span >
< / button >
2013-06-24 02:17:08 +02:00
2019-12-25 13:28:26 +01:00
< div class = "navbar-collapse offcanvas-collapse" id = "navbarsExampleDefault" >
2019-09-28 16:16:03 +02:00
< ul class = "navbar-nav mr-auto mb-2 mb-lg-0" >
2019-12-25 13:28:26 +01:00
< li class = "nav-item active" >
2020-02-07 12:18:30 +01:00
< a class = "nav-link" aria-current = "page" href = "#" > Dashboard< / a >
2019-12-25 13:28:26 +01:00
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Notifications< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Profile< / a >
< / li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Switch account< / a >
< / li >
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle" href = "#" id = "dropdown01" data-toggle = "dropdown" aria-expanded = "false" > Settings< / a >
< div class = "dropdown-menu" aria-labelledby = "dropdown01" >
< 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 >
< / li >
< / ul >
2019-09-28 16:16:03 +02:00
< form class = "d-flex" >
< input class = "form-control mr-2" type = "search" placeholder = "Search" aria-label = "Search" >
< button class = "btn btn-outline-success" type = "submit" > Search< / button >
2019-12-25 13:28:26 +01:00
< / form >
< / div >
2018-11-05 12:24:55 +01:00
< / div >
< / nav >
2016-12-23 08:08:02 +01:00
2018-11-05 12:24:55 +01:00
< div class = "nav-scroller bg-white shadow-sm" >
< nav class = "nav nav-underline" >
2020-02-07 12:18:30 +01:00
< a class = "nav-link active" aria-current = "page" href = "#" > Dashboard< / a >
2018-11-05 12:24:55 +01:00
< a class = "nav-link" href = "#" >
Friends
2019-12-25 13:28:26 +01:00
< span class = "badge bg-light text-dark rounded-pill align-text-bottom" > 27< / span >
2018-11-05 12:24:55 +01:00
< / a >
< a class = "nav-link" href = "#" > Explore< / a >
< a class = "nav-link" href = "#" > Suggestions< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< a class = "nav-link" href = "#" > Link< / a >
< / nav >
< / div >
2016-12-23 08:08:02 +01:00
2018-11-05 12:24:55 +01:00
< main role = "main" class = "container" >
< div class = "d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm" >
2019-01-08 17:33:28 +01:00
< img class = "mr-3" src = "/docs/{{< param docs_version >}}/assets/brand/bootstrap-outline.svg" alt = "" width = "48" height = "48" >
2019-09-02 18:19:25 +02:00
< div class = "lh-1" >
< h6 class = "mb-0 text-white lh-1" > Bootstrap< / h6 >
2018-11-05 12:24:55 +01:00
< small > Since 2011< / small >
< / div >
< / div >
2013-06-24 02:17:08 +02:00
2018-11-05 12:24:55 +01:00
< div class = "my-3 p-3 bg-white rounded shadow-sm" >
2019-09-28 16:16:03 +02:00
< h6 class = "border-bottom pb-2 mb-0" > Recent updates< / h6 >
2019-12-25 13:28:26 +01:00
< div class = "d-flex text-muted pt-3" >
{{< placeholder width = "32" height = "32" background = "#007bff" color = "#007bff" class = "flex-shrink-0 mr-2 rounded" > }}
2019-09-28 16:16:03 +02:00
< p class = "pb-3 mb-0 small lh-sm border-bottom" >
2018-11-05 12:24:55 +01:00
< strong class = "d-block text-gray-dark" > @username< / strong >
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
< / p >
2018-01-15 01:06:52 +01:00
< / div >
2019-12-25 13:28:26 +01:00
< div class = "d-flex text-muted pt-3" >
{{< placeholder width = "32" height = "32" background = "#e83e8c" color = "#e83e8c" class = "flex-shrink-0 mr-2 rounded" > }}
2019-09-28 16:16:03 +02:00
< p class = "pb-3 mb-0 small lh-sm border-bottom" >
2018-11-05 12:24:55 +01:00
< strong class = "d-block text-gray-dark" > @username< / strong >
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
< / p >
< / div >
2019-12-25 13:28:26 +01:00
< div class = "d-flex text-muted pt-3" >
{{< placeholder width = "32" height = "32" background = "#6f42c1" color = "#6f42c1" class = "flex-shrink-0 mr-2 rounded" > }}
2019-09-28 16:16:03 +02:00
< p class = "pb-3 mb-0 small lh-sm border-bottom" >
2018-11-05 12:24:55 +01:00
< strong class = "d-block text-gray-dark" > @username< / strong >
Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
< / p >
< / div >
< small class = "d-block text-right mt-3" >
< a href = "#" > All updates< / a >
< / small >
< / div >
2013-06-24 02:17:08 +02:00
2018-11-05 12:24:55 +01:00
< div class = "my-3 p-3 bg-white rounded shadow-sm" >
2019-09-28 16:16:03 +02:00
< h6 class = "border-bottom pb-2 mb-0" > Suggestions< / h6 >
2019-12-25 13:28:26 +01:00
< div class = "d-flex text-muted pt-3" >
{{< placeholder width = "32" height = "32" background = "#007bff" color = "#007bff" class = "flex-shrink-0 mr-2 rounded" > }}
2019-09-28 16:16:03 +02:00
< div class = "pb-3 mb-0 small lh-sm border-bottom w-100" >
2019-12-25 13:28:26 +01:00
< div class = "d-flex justify-content-between" >
2018-11-05 12:24:55 +01:00
< strong class = "text-gray-dark" > Full Name< / strong >
< a href = "#" > Follow< / a >
2018-01-15 01:06:52 +01:00
< / div >
2018-11-05 12:24:55 +01:00
< span class = "d-block" > @username< / span >
2018-01-15 01:06:52 +01:00
< / div >
2018-11-05 12:24:55 +01:00
< / div >
2019-12-25 13:28:26 +01:00
< div class = "d-flex text-muted pt-3" >
{{< placeholder width = "32" height = "32" background = "#007bff" color = "#007bff" class = "flex-shrink-0 mr-2 rounded" > }}
2019-09-28 16:16:03 +02:00
< div class = "pb-3 mb-0 small lh-sm border-bottom w-100" >
2019-12-25 13:28:26 +01:00
< div class = "d-flex justify-content-between" >
2018-11-05 12:24:55 +01:00
< strong class = "text-gray-dark" > Full Name< / strong >
< a href = "#" > Follow< / a >
2018-01-15 01:06:52 +01:00
< / div >
2018-11-05 12:24:55 +01:00
< span class = "d-block" > @username< / span >
2018-01-15 01:06:52 +01:00
< / div >
2018-11-05 12:24:55 +01:00
< / div >
2019-12-25 13:28:26 +01:00
< div class = "d-flex text-muted pt-3" >
{{< placeholder width = "32" height = "32" background = "#007bff" color = "#007bff" class = "flex-shrink-0 mr-2 rounded" > }}
2019-09-28 16:16:03 +02:00
< div class = "pb-3 mb-0 small lh-sm border-bottom w-100" >
2019-12-25 13:28:26 +01:00
< div class = "d-flex justify-content-between" >
2018-11-05 12:24:55 +01:00
< strong class = "text-gray-dark" > Full Name< / strong >
< a href = "#" > Follow< / a >
2018-01-15 01:06:52 +01:00
< / div >
2018-11-05 12:24:55 +01:00
< span class = "d-block" > @username< / span >
2018-01-15 01:06:52 +01:00
< / div >
2018-11-05 12:24:55 +01:00
< / div >
< small class = "d-block text-right mt-3" >
< a href = "#" > All suggestions< / a >
< / small >
< / div >
< / main >