Emmet cheatsheet code for Bootstrap

Emmet greatly enhances HTML & CSS workflow in many popular text editors. Of course, the code editor within LiveCanvas fully supports the Emmet syntax.
Emmet allows you to type abbreviated code that follows the same conventions as HTML and CSS. Then just hit the TAB key and code will be generated.

Emmet’s advanced functions allow designers to speed up coding by using element names, IDs, and class selectors.
It even offers the same child and sibling selectors as plain CSS, allowing them to scaffold large blocks of code quickly.

You might want to learn and use those simple emmet code snippet to directly output div and sections or useful placeholders.

Placeholders – Editable Paragraph

Paragraph (editable rich)

Emmet Syntax:

div[editable=rich]>p>lorem

Output:

<div editable="rich">
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum aspernatur optio, magnam quibusdam obcaecati ipsum dolorem quia architecto, et voluptatibus voluptas nihil. Odit quaerat inventore aspernatur porro recusandae eaque distinctio.</p>
</div>

Heading (editable inline)

Emmet Syntax:

div[editable=inline]>h1>lorem3

Output:

<div editable="inline">
 	<h1>Lorem ipsum dolor.</h1>
</div>

Lorem ipsum placeholder

Emmet Syntax:

lorem

Output:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum dignissimos maiores vitae esse distinctio beatae, ullam, ducimus consectetur. Vel, molestiae iure. Iure nihil molestiae esse odit, optio, reprehenderit nam perferendis.

Editable List Group

Emmet Syntax:

ul.list-group[editable="rich"]>lorem10.list-group-item*4

Output:

<ul class="list-group" editable="rich">
	<li class="list-group-item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, soluta.</li>
	<li class="list-group-item">Pariatur voluptatem fugiat rerum perferendis repudiandae earum! Perferendis, doloribus, dolorum!</li>
	<li class="list-group-item">Dolorem repudiandae saepe distinctio molestiae itaque voluptatem rerum officia sint.</li>
	<li class="list-group-item">Tenetur, nam et magni voluptas voluptatum aliquid, sapiente ullam similique.</li>
</ul>

Image Placeholder with alt

Emmet Syntax:

a[href="link-to-go-to"]>img[src="https://picsum.photos/200/300"][alt="My image"]

Output:

<a href="link-to-go-to"><img src="https://picsum.photos/200/300" alt="My image"></a>

Sections and Grid example

Section with one row, col and block

Emmet Syntax:

section>.container>.row>.col>.lc-block

Output:

<section>
	<div class="container">
		<div class="row">
			<div class="col">
				<div class="lc-block"></div>
			</div>
		</div>
	</div>
</section>

Section with one row and two MD breakpoint columns

Emmet Syntax:

section>.container>.row.row-cols-1.row-cols-md-2>.col*2>.lc-block

Output:

<section>
	<div class="container">
		<div class="row row-cols-1 row-cols-md-2">
			<div class="col">
				<div class="lc-block"></div>
			</div>
			<div class="col">
				<div class="lc-block"></div>
			</div>
		</div>
	</div>
</section>

Section with full height row

Emmet Syntax:

section>.container>.row.min-vh-100.justify-content-center.align-items-center>.lc-block

Output:

<section>
	<div class="container">
		<div class="row min-vh-100 justify-content-center align-items-center">
			<div class="lc-block"></div>
		</div>
	</div>
</section>

Row with 4 columns

Emmet Syntax:

.row.row-cols-2.row-cols-md-4>.col*4>.lc-block

Output:

<div class="row row-cols-2 row-cols-md-4">
	<div class="col">
		<div class="lc-block"></div>
	</div>
	<div class="col">
		<div class="lc-block"></div>
	</div>
	<div class="col">
		<div class="lc-block"></div>
	</div>
	<div class="col">
		<div class="lc-block"></div>
	</div>
</div>