Skip to content

Commit 4c42416

Browse files
jamalihassan0307jamalihassan0307
committed
Add multiple new Bootstrap 5 layout snippets including containers, rows, columns, and utility classes to enhance the snippet library.
1 parent a495985 commit 4c42416

File tree

1 file changed

+192
-0
lines changed

1 file changed

+192
-0
lines changed

‎snippets/categories/layout.json‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,5 +69,197 @@
6969
],
7070
"description": "Bootstrap 5 hero section",
7171
"scope": "text.html"
72+
},
73+
"html_container": {
74+
"prefix": "alcontainer",
75+
"body": [
76+
"<div class=\"container\">",
77+
"\t${1:content}",
78+
"</div>"
79+
],
80+
"description": "Bootstrap container",
81+
"scope": "text.html"
82+
},
83+
"html_container_fluid": {
84+
"prefix": "alcontainerfluid",
85+
"body": [
86+
"<div class=\"container-fluid\">",
87+
"\t${1:content}",
88+
"</div>"
89+
],
90+
"description": "Bootstrap fluid container",
91+
"scope": "text.html"
92+
},
93+
"html_row": {
94+
"prefix": "alrow",
95+
"body": [
96+
"<div class=\"row\">",
97+
"\t${1:columns}",
98+
"</div>"
99+
],
100+
"description": "Bootstrap row",
101+
"scope": "text.html"
102+
},
103+
"html_column": {
104+
"prefix": "alcol",
105+
"body": [
106+
"<div class=\"col-${1:12} col-md-${2:6} col-lg-${3:4}\">",
107+
"\t${4:content}",
108+
"</div>"
109+
],
110+
"description": "Bootstrap column",
111+
"scope": "text.html"
112+
},
113+
"html_grid_system": {
114+
"prefix": "algrid",
115+
"body": [
116+
"<div class=\"container\">",
117+
"\t<div class=\"row\">",
118+
"\t\t<div class=\"col-12 col-md-6 col-lg-4\">",
119+
"\t\t\t${1:Column 1}",
120+
"\t\t</div>",
121+
"\t\t<div class=\"col-12 col-md-6 col-lg-4\">",
122+
"\t\t\t${2:Column 2}",
123+
"\t\t</div>",
124+
"\t\t<div class=\"col-12 col-md-6 col-lg-4\">",
125+
"\t\t\t${3:Column 3}",
126+
"\t\t</div>",
127+
"\t</div>",
128+
"</div>"
129+
],
130+
"description": "Bootstrap grid system with responsive columns",
131+
"scope": "text.html"
132+
},
133+
"html_flex_container": {
134+
"prefix": "alflex",
135+
"body": [
136+
"<div class=\"d-flex justify-content-${1:start} align-items-${2:start}\">",
137+
"\t${3:flex items}",
138+
"</div>"
139+
],
140+
"description": "Bootstrap flex container",
141+
"scope": "text.html"
142+
},
143+
"html_flex_item": {
144+
"prefix": "alflexitem",
145+
"body": [
146+
"<div class=\"flex-${1:grow}-${2:1}\">",
147+
"\t${3:flex item content}",
148+
"</div>"
149+
],
150+
"description": "Bootstrap flex item",
151+
"scope": "text.html"
152+
},
153+
"html_spacing": {
154+
"prefix": "alspacing",
155+
"body": [
156+
"<div class=\"m-${1:3} p-${2:3}\">",
157+
"\t${3:content with margin and padding}",
158+
"</div>"
159+
],
160+
"description": "Bootstrap spacing utilities",
161+
"scope": "text.html"
162+
},
163+
"html_position": {
164+
"prefix": "alposition",
165+
"body": [
166+
"<div class=\"position-${1:relative}\">",
167+
"\t<div class=\"position-${2:absolute} top-${3:0} start-${4:0}\">",
168+
"\t\t${5:positioned content}",
169+
"\t</div>",
170+
"</div>"
171+
],
172+
"description": "Bootstrap positioning utilities",
173+
"scope": "text.html"
174+
},
175+
"html_overflow": {
176+
"prefix": "aloverflow",
177+
"body": [
178+
"<div class=\"overflow-${1:auto}\">",
179+
"\t${2:content with overflow handling}",
180+
"</div>"
181+
],
182+
"description": "Bootstrap overflow utilities",
183+
"scope": "text.html"
184+
},
185+
"html_shadow": {
186+
"prefix": "alshadow",
187+
"body": [
188+
"<div class=\"shadow-${1:sm}\">",
189+
"\t${2:content with shadow}",
190+
"</div>"
191+
],
192+
"description": "Bootstrap shadow utilities",
193+
"scope": "text.html"
194+
},
195+
"html_ratio": {
196+
"prefix": "alratio",
197+
"body": [
198+
"<div class=\"ratio ratio-${1:16x9}\">",
199+
"\t<iframe src=\"${2:video-url}\" title=\"${3:Video title}\"></iframe>",
200+
"</div>"
201+
],
202+
"description": "Bootstrap aspect ratio utilities",
203+
"scope": "text.html"
204+
},
205+
"html_visibility": {
206+
"prefix": "alvisibility",
207+
"body": [
208+
"<div class=\"${1:visible} ${2:invisible}\">",
209+
"\t${3:content with visibility control}",
210+
"</div>"
211+
],
212+
"description": "Bootstrap visibility utilities",
213+
"scope": "text.html"
214+
},
215+
"html_vertical_align": {
216+
"prefix": "alvalign",
217+
"body": [
218+
"<div class=\"align-${1:baseline}\">",
219+
"\t${2:vertically aligned content}",
220+
"</div>"
221+
],
222+
"description": "Bootstrap vertical alignment utilities",
223+
"scope": "text.html"
224+
},
225+
"html_text_wrap": {
226+
"prefix": "alwrap",
227+
"body": [
228+
"<div class=\"text-${1:nowrap}\">",
229+
"\t${2:content with text wrapping control}",
230+
"</div>"
231+
],
232+
"description": "Bootstrap text wrapping utilities",
233+
"scope": "text.html"
234+
},
235+
"html_clearfix": {
236+
"prefix": "alclearfix",
237+
"body": [
238+
"<div class=\"clearfix\">",
239+
"\t${1:content with clearfix}",
240+
"</div>"
241+
],
242+
"description": "Bootstrap clearfix utility",
243+
"scope": "text.html"
244+
},
245+
"html_sticky_top": {
246+
"prefix": "alsticky",
247+
"body": [
248+
"<div class=\"sticky-top\">",
249+
"\t${1:sticky content}",
250+
"</div>"
251+
],
252+
"description": "Bootstrap sticky positioning",
253+
"scope": "text.html"
254+
},
255+
"html_z_index": {
256+
"prefix": "alzindex",
257+
"body": [
258+
"<div class=\"z-${1:3}\">",
259+
"\t${2:content with z-index}",
260+
"</div>"
261+
],
262+
"description": "Bootstrap z-index utilities",
263+
"scope": "text.html"
72264
}
73265
}

0 commit comments

Comments
 (0)