Here are some Emmet snippets for common Bootstrap components: Note: These snippets assume that you have included the Bootstrap CSS in your HTML document.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">- Bootstrap Navbar:
nav.navbar.navbar-dark.bg-dark>div.container>ul.navbar.nav>li.nav-item*4>a.nav-link[href="#"]- Bootstrap Jumbotron:
div.contianer.my-5>div.jumbotron>h1.display-4{Hello, world!}+p.lead{This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.}- Bootstrap Grid System:
div.container>div.row>div.col-sm-4+div.col-sm-4+div.col-sm-4- Bootstrap Card:
div.card>img.card-img-top[src="..."]+div.card-body>h5.card-title{Card title}+p.card-text{Some quick example text to build on the card title and make up the bulk of the card's content.}+a.btn.btn-primary{Go somewhere}- Bootstrap Form:
form>div.form-group>label{Email address}+input.form-control[type="email" placeholder="Enter email"]+small.form-text.text-muted{We'll never share your email with anyone else.}+div.form-group>label{Password}+input.form-control[type="password" placeholder="Password"]+div.form-check>input.form-check-input[type="checkbox"]+label.form-check-label{Check me out}+button.btn.btn-primary[type="submit"]{Submit}- Bootstrap Button:
button.btn.btn-primary{Click Me}- Bootstrap Alert:
div.alert.alert-success{This is a success alert.}+button.close[data-dismiss="alert"]>span>×- Bootstrap Badge:
span.badge.badge-primary{New}- Bootstrap Modal:
button.btn.btn-primary[data-toggle="modal" data-target="#exampleModal"]{Launch Modal}+div.modal#exampleModal>div.modal-dialog>div.modal-content>div.modal-header>h5.modal-title{Modal title}+button.close[data-dismiss="modal"]>span>×+div.modal-body>p{Modal body text goes here.}+div.modal-footer>button.btn.btn-secondary[data-dismiss="modal"]{Close}+button.btn.btn-primary{Save changes}- Bootstrap Carousel:
div.carousel>div.carousel-inner>div.carousel-item.active>img.d-block.w-100[src="..."]+div.carousel-item>img.d-block.w-100[src="..."]+div.carousel-item>img.d-block.w-100[src="..."]- Bootstrap List Group:
ul.list-group>li.list-group-item{Cras justo odio}+li.list-group-item{Dapibus ac facilisis in}+li.list-group-item{Morbi leo risus}+li.list-group-item{Porta ac consectetur ac}+li.list-group-item.disabled{Vestibulum at eros}- Bootstrap Dropdown:
div.dropdown>button.btn.btn-secondary.dropdown-toggle[data-toggle="dropdown"]{Dropdown button}+div.dropdown-menu>button.dropdown-item{Action}+button.dropdown-item{Another action}+button.dropdown-item{Something else here}- Bootstrap Progress Bar:
div.progress>div.progress-bar.bg-success[role="progressbar" style="width: 25%;"]{25%}- Bootstrap Tooltip:
button.btn.btn-secondary[data-toggle="tooltip" data-placement="top" title="Tooltip on top"]{Tooltip}- Bootstrap Popover:
button.btn.btn-secondary[data-toggle="popover" data-placement="top" data-content="Popover content goes here."]{"Popover"}- Bootstrap Dropdown with Divider:
div.dropdown>button.btn.btn-secondary.dropdown-toggle[data-toggle="dropdown"]{Dropdown button}+div.dropdown-menu>button.dropdown-item{Action}+button.dropdown-item{Another action}+div.dropdown-divider+button.dropdown-item{Something else here}- Bootstrap Accordion:
div.accordion#accordion>div.card>div.card-header>a[data-toggle="collapse" data-parent="#accordion" href="#collapseOne"]{Accordion Heading}+div#collapseOne.collapse.show>div.card-body{Accordion Content}- Bootstrap List Group with Badges:
ul.list-group>li.list-group-item.d-flex.justify-content-between.align-items-center{Cras justo odio}+span.badge.badge-primary.badge-pill{14}+li.list-group-item.d-flex.justify-content-between.align-items-center{Dapibus ac facilisis in}+span.badge.badge-primary.badge-pill{2}+li.list-group-item.d-flex.justify-content-between.align-items-center{Morbi leo risus}+span.badge.badge-primary.badge-pill{1}- Bootstrap Media Object:
div.media>img.d-flex.align-self-start[src="..." alt="Generic placeholder image"]+div.media-body>h5.mt-0{Media heading}+p{Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.}- Bootstrap Form Inline:
form.form-inline>div.form-group>label.sr-only{Email}+input.form-control[type="email" placeholder="Email"]+div.form-group>label.sr-only{Password}+input.form-control[type="password" placeholder="Password"]+button.btn.btn-primary{Sign in}- Bootstrap Pagination:
nav>ul.pagination>li.page-item.disabled>a.page-link{Previous}+li.page-item.active>a.page-link{1}+li.page-item>a.page-link{2}+li.page-item>a.page-link{3}+li.page-item>a.page-link{Next}- Bootstrap Table:
table.table>thead>tr>th{#}+th{First Name}+th{Last Name}+th{Username}+tbody>tr>th.scope{1}+td{Mark}+td{Otto}+td>@mdo+tr>th.scope{2}+td{Jacob}+td{Thornton}+td>@fat+tr>th.scope{3}+td{Larry}+td{the Bird}+td>@twitter- Bootstrap Form Validation:
form.needs-validation>div.form-group>label{Email}+input.form-control[type="email" placeholder="Enter email" required]+div.invalid-feedback{Please enter a valid email address.}+div.form-group>label{Password}+input.form-control[type="password" placeholder="Password" required]+div.invalid-feedback{Please enter a password.}+button.btn.btn-primary[type="submit"]{Submit form}- Bootstrap Collapse:
button.btn.btn-primary[data-toggle="collapse" data-target="#collapseExample"]{Link with Collapse}+div.collapse#collapseExample>div.card.card-body{Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.}- Bootstrap List Group with Active Item:
ul.list-group>li.list-group-item.active{Cras justo- Bootstrap Navbar:
nav.navbar>div.container>ul.navbar-nav>li.nav-item*4>a.nav-link[href="#"]- Bootstrap Jumbotron:
div.jumbotron>h1.display-4{Hello, world!}+p.lead{This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.}- Bootstrap Grid System:
div.container>div.row>div.col-sm-4+div.col-sm-4+div.col-sm-4- Bootstrap Card:
div.card>img.card-img-top[src="..."]+div.card-body>h5.card-title{Card title}+p.card-text{Some quick example text to build on the card title and make up the bulk of the card's content.}+a.btn.btn-primary{Go somewhere}- Bootstrap Form:
form>div.form-group>label{Email address}+input.form-control[type="email" placeholder="Enter email"]+small.form-text.text-muted{We'll never share your email with anyone else.}+div.form-group>label{Password}+input.form-control[type="password" placeholder="Password"]+div.form-check>input.form-check-input[type="checkbox"]+label.form-check-label{Check me out}+button.btn.btn-primary[type="submit"]{Submit}- Bootstrap Button:
button.btn.btn-primary{Click Me}- Bootstrap Alert:
div.alert.alert-success{This is a success alert.}+button.close[data-dismiss="alert"]>span>×- Bootstrap Badge:
span.badge.badge-primary{New}- Bootstrap Modal:
button.btn.btn-primary[data-toggle="modal" data-target="#exampleModal"]{Launch Modal}+div.modal#exampleModal>div.modal-dialog>div.modal-content>div.modal-header>h5.modal-title{Modal title}+button.close[data-dismiss="modal"]>span>×+div.modal-body>p{Modal body text goes here.}+div.modal-footer>button.btn.btn-secondary[data-dismiss="modal"]{Close}+button.btn.btn-primary{Save changes}- Bootstrap Carousel:
div.carousel>div.carousel-inner>div.carousel-item.active>img.d-block.w-100[src="..."]+div.carousel-item>img.d-block.w-100[src="..."]+div.carousel-item>img.d-block.w-100[src="..."]- Bootstrap List Group:
ul.list-group>li.list-group-item{Cras justo odio}+li.list-group-item{Dapibus ac facilisis in}+li.list-group-item{Morbi leo risus}+li.list-group-item{Porta ac consectetur ac}+li.list-group-item.disabled{Vestibulum at eros}- Bootstrap Dropdown:
div.dropdown>button.btn.btn-secondary.dropdown-toggle[data-toggle="dropdown"]{Dropdown button}+div.dropdown-menu>button.dropdown-item{Action}+button.dropdown-item{Another action}+button.dropdown-item{Something else here}- Bootstrap Progress Bar:
div.progress>div.progress-bar.bg-success[role="progressbar" style="width: 25%;"]{25%}- Bootstrap Tooltip:
button.btn.btn-secondary[data-toggle="tooltip" data-placement="top" title="Tooltip on top"]{Tooltip}- Bootstrap Popover:
button.btn.btn-secondary[data-toggle="popover" data-placement="top" data-content="Popover content goes here."]{"Popover"}Note: Don't forget to include the Bootstrap CSS and JavaScript files in your HTML document to make these components work properly.
- Bootstrap Dropdown with Divider:
div.dropdown>button.btn.btn-secondary.dropdown-toggle[data-toggle="dropdown"]{Dropdown button}+div.dropdown-menu>button.dropdown-item{Action}+button.dropdown-item{Another action}+div.dropdown-divider+button.dropdown-item{Something else here}- Bootstrap Accordion:
div.accordion#accordion>div.card>div.card-header>a[data-toggle="collapse" data-parent="#accordion" href="#collapseOne"]{Accordion Heading}+div#collapseOne.collapse.show>div.card-body{Accordion Content}- Bootstrap List Group with Badges:
ul.list-group>li.list-group-item.d-flex.justify-content-between.align-items-center{Cras justo odio}+span.badge.badge-primary.badge-pill{14}+li.list-group-item.d-flex.justify-content-between.align-items-center{Dapibus ac facilisis in}+span.badge.badge-primary.badge-pill{2}+li.list-group-item.d-flex.justify-content-between.align-items-center{Morbi leo risus}+span.badge.badge-primary.badge-pill{1}- Bootstrap Media Object:
div.media>img.d-flex.align-self-start[src="..." alt="Generic placeholder image"]+div.media-body>h5.mt-0{Media heading}+p{Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.}- Bootstrap Form Inline:
form.form-inline>div.form-group>label.sr-only{Email}+input.form-control[type="email" placeholder="Email"]+div.form-group>label.sr-only{Password}+input.form-control[type="password" placeholder="Password"]+button.btn.btn-primary{Sign in}- Bootstrap Pagination:
nav>ul.pagination>li.page-item.disabled>a.page-link{Previous}+li.page-item.active>a.page-link{1}+li.page-item>a.page-link{2}+li.page-item>a.page-link{3}+li.page-item>a.page-link{Next}- Bootstrap Table:
table.table>thead>tr>th{#}+th{First Name}+th{Last Name}+th{Username}+tbody>tr>th.scope{1}+td{Mark}+td{Otto}+td>@mdo+tr>th.scope{2}+td{Jacob}+td{Thornton}+td>@fat+tr>th.scope{3}+td{Larry}+td{the Bird}+td>@twitter- Bootstrap Form Validation:
form.needs-validation>div.form-group>label{Email}+input.form-control[type="email" placeholder="Enter email" required]+div.invalid-feedback{Please enter a valid email address.}+div.form-group>label{Password}+input.form-control[type="password" placeholder="Password" required]+div.invalid-feedback{Please enter a password.}+button.btn.btn-primary[type="submit"]{Submit form}- Bootstrap Collapse:
button.btn.btn-primary[data-toggle="collapse" data-target="#collapseExample"]{Link with Collapse}+div.collapse#collapseExample>div.card.card-body{Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.}- Bootstrap List Group with Active Item:
ul.list-group>li.list-group-item.active{Cras justo- Bootstrap Form Group with Inline Checkbox:
div.form-group.form-check.form-check-inline>input.form-check-input[type="checkbox" id="inlineCheckbox1" value="option1"]+label.form-check-label[for="inlineCheckbox1"]{Option 1}+input.form-check-input[type="checkbox" id="inlineCheckbox2" value="option2"]+label.form-check-label[for="inlineCheckbox2"]{Option 2}+input.form-check-input[type="checkbox" id="inlineCheckbox3" value="option3"]+label.form-check-label[for="inlineCheckbox3"]{Option 3}- Bootstrap Form Group with Radio Buttons:
div.form-group>div.form-check>input.form-check-input[type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked]+label.form-check-label[for="exampleRadios1"]{Option 1}+div.form-check>input.form-check-input[type="radio" name="exampleRadios" id="exampleRadios2" value="option2"]+label.form-check-label[for="exampleRadios2"]{Option 2}+div.form-check>input.form-check-input[type="radio" name="exampleRadios" id="exampleRadios3" value="option3"]+label.form-check-label[for="exampleRadios3"]{Option 3}- Bootstrap List Group with Linked Items:
div.list-group>a.list-group-item.list-group-item-action.active[href="#"]{Cras justo odio}+a.list-group-item.list-group-item-action[href="#"]{Dapibus ac facilisis in}+a.list-group-item.list-group-item-action[href="#"]{Morbi leo risus}+a.list-group-item.list-group-item-action[href="#"]{Porta ac consectetur ac}+a.list-group-item.list-group-item-action.disabled[href="#"]{Vestibulum at eros}- Bootstrap Carousel with Caption:
div.carousel>div.carousel-inner>div.carousel-item.active>img.d-block.w-100[src="..."]+div.carousel-caption.d-none.d-md-block>h3{First slide label}+p{Nulla vitae elit libero, a pharetra augue mollis interdum.}+div.carousel-item>img.d-block.w-100[src="..."]+div.carousel-caption.d-none.d-md-block>h3{Second slide label}+p{Lorem ipsum dolor sit amet, consectetur adipiscing elit.}+div.carousel-item>img.d-block.w-100[src="..."]+div.carousel-caption.d-none.d-md-block>h3{Third slide label}+p{Praesent commodo cursus magna, vel scelerisque nisl consectetur.}- Bootstrap Nav with Tabs:
ul.nav.nav-tabs>li.nav-item>a.nav-link.active[href="#home"]{Home}+li.nav-item>a.nav-link[href="#profile"]{Profile}+li.nav-item>a.nav-link.disabled[href="#disabled"]{Disabled}- Bootstrap Nav with Pills:
ul.nav.nav-pills>li.nav-item>a.nav-link.active[href="#home"]{Home}+li.nav-item>a.nav-link[href="#profile"]{Profile}+li.nav-item>a.nav-link.disabled[href="#disabled"]{Disabled}- Bootstrap Toast:
div.toast[data-autohide="false"]>div.toast-header>strong{Bootstrap Toast}+button.close[data-dismiss="toast"]>span>×+div.toast-body{This is a Bootstrap- Bootstrap Card with Image and Overlay:
div.card>img.card-img[src="..."]+div.card-img-overlay>h5.card-title{Card Title}+p.card-text{This is a wider card with supporting text below as a natural lead-in to additional content.}+p.card-text{Last updated 3 mins ago}- Bootstrap Card with List Group:
div.card>div.card-header{Featured}+ul.list-group.list-group-flush>li.list-group-item{Cras justo odio}+li.list-group-item{Dapibus ac facilisis in}+li.list-group-item{Vestibulum at eros}- Bootstrap Card with Card Deck:
div.card-deck>div.card>img.card-img-top[src="..."]+div.card-body>h5.card-title{Card Title}+p.card-text{This is a wider card with supporting text below as a natural lead-in to additional content.}+p.card-text{Last updated 3 mins ago}+div.card>img.card-img-top[src="..."]+div.card-body>h5.card-title{Card Title}+p.card-text{This card has supporting text below as a natural lead-in to additional content.}+p.card-text{Last updated 3 mins ago}+div.card>img.card-img-top[src="..."]+div.card-body>h5.card-title{Card Title}+p.card-text{This is a wider card with supporting text below as a natural lead-in to additional content.}+p.card-text{Last updated 3 mins ago}- Bootstrap Card with Tabs:
div.card>div.card-header>ul.nav.nav-tabs.card-header-tabs>li.nav-item>a.nav-link.active[href="#card-tab-1"]{Tab 1}+li.nav-item>a.nav-link[href="#card-tab-2"]{Tab 2}+li.nav-item>a.nav-link.disabled[href="#card-tab-3"]{Tab 3}+div.card-body>div.tab-content>div.tab-pane.show.active[id="card-tab-1"]{This is the content of tab 1.}+div.tab-pane[id="card-tab-2"]{This is the content of tab 2.}+div.tab-pane[id="card-tab-3"]{This is the content of tab 3.}- Bootstrap Card with Accordion:
div.card>div.card-header>a[data-toggle="collapse" data-parent="#accordion" href="#collapseOne"]{Accordion Heading}+div#collapseOne.collapse.show>div.card-body{Accordion Content}- Bootstrap Card with Form:
div.card>div.card-header{Contact Form}+div.card-body>form>div.form-group>label{Name}+input.form-control[type="text" placeholder="Enter name"]+div.form-group>label{Email}+input.form-control[type="email" placeholder="Enter email"]+div.form-group>label{Message}+textarea.form-control[type="text" placeholder="Enter message" rows="3"]+button.btn.btn-primary[type="submit"]{Submit}- Bootstrap Card with Carousel:
div.card>div.carousel.slide[data-ride="carousel"]>div.carousel-inner>div.carousel-item.active>img.d-block.w-100[src="..."]+div.carousel-caption.d-none.d-md-block>h5{First slide label}+p{Nulla vitae elit libero, a pharetra augue mollis interdum.}+div.carousel-item