Start /

Emmet cheatsheet code for Bootstrap

Advanced

Emmet cheatsheet code for Bootstrap

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

Simple Editable Paragraph

Emmet Syntax:

p[editable="inline"]

Output:

<p editable="inline"></p>

Paragraph with Editable Rich Content

Emmet Syntax:

div[editable="rich"]

Output:

<div editable="rich"></div>

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>