${5:This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.}
+
${6:Last updated 3 mins ago}
+
+
+
+
+
+
${3:Card title}
+
${5:This card has supporting text below as a natural lead-in to additional content.}
+
${6:Last updated 3 mins ago}
+
+
+
+
+
+
${3:Card title}
+
${5:This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.}
${5:This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.}
+
${6:Last updated 3 mins ago}
+
+
+
+
+
+
${3:Card title}
+
${5:This card has supporting text below as a natural lead-in to additional content.}
+
${6:Last updated 3 mins ago}
+
+
+
+
+
+
${3:Card title}
+
${5:This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.}
${5:This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.}
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
+
+
+
+
${3:Card title}
+
${5:This card has supporting text below as a natural lead-in to additional content.}
+
${6:Last updated 3 mins ago}
+
+
+
+
+
${7:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.}
+
+
+
+
+
${3:Card title}
+
${5:This card has supporting text below as a natural lead-in to additional content.}
+
${6:Last updated 3 mins ago}
+
+
+
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
+
+
+
+
+
${3:Card title}
+
${5:This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.}
+ ${4:Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.}
+
+ ${3:Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.}
+
+ ${3:Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.}
+
+ ${3:Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.}
+
+endsnippet
+
+# Form Help text - Bootstrap 4
+snippet formht
+
+ Some inline text with a small tag looks like this.
+
+endsnippet
+
+# Form Validation - Bootstrap 4
+snippet formval
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+endsnippet
+
+# Form Custom checkbox - Bootstrap 4
+snippet formctmcb
+
+endsnippet
+
+# Form Custom radio - Bootstrap 4
+snippet formctmra
+
+
+endsnippet
+
+# Form Custom radio stacked - Bootstrap 4
+snippet formctmras
+
+
+
+
+endsnippet
+
+# Form Custom select menu - Bootstrap 4
+snippet formctmsm
+
+endsnippet
+
+# Form Custom File browser - Bootstrap 4
+snippet formctmfb
+
+endsnippet
+
diff --git a/vim/UltiSnips/html_bootstrap4_components-input_group.snippets b/vim/UltiSnips/html_bootstrap4_components-input_group.snippets
new file mode 100644
index 0000000..5d06886
--- /dev/null
+++ b/vim/UltiSnips/html_bootstrap4_components-input_group.snippets
@@ -0,0 +1,168 @@
+# Input Group
+# Input Group - Bootstrap 4
+snippet iptg
+
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
+
+
+
+
+
+
+
+
+
+
+
Oh yeah, it's that good. See for yourself.
+
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
+
+
+
+
+
+
+
+
+
+
+
And lastly, this one. Checkmate.
+
Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.
Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.
Basic grid layouts to get you familiar with building within the Bootstrap grid system.
+
+
+
Five grid tiers
+
There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.
+
+
+
.col-xs-4
+
.col-xs-4
+
.col-xs-4
+
+
+
+
.col-sm-4
+
.col-sm-4
+
.col-sm-4
+
+
+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+
+
+
.col-lg-4
+
.col-lg-4
+
.col-lg-4
+
+
+
+
.col-xl-4
+
.col-xl-4
+
.col-xl-4
+
+
+
Three equal columns
+
Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.
+
+
.col-md-4
+
.col-md-4
+
.col-md-4
+
+
+
Three unequal columns
+
Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.
+
+
.col-md-3
+
.col-md-6
+
.col-md-3
+
+
+
Two columns
+
Get two columns starting at desktops and scaling to large desktops.
+
+
.col-md-8
+
.col-md-4
+
+
+
Full width, single column
+
No grid classes are necessary for full-width elements.
+
+
+
+
Two columns with two nested columns
+
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
+
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
+
+
+ .col-md-8
+
+
.col-md-6
+
.col-md-6
+
+
+
.col-md-4
+
+
+
+
+
Mixed: mobile and desktop
+
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
+
Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
+
+
.col-xs-12 .col-md-8
+
.col-xs-6 .col-md-4
+
+
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
.col-xs-6 .col-md-4
+
+
+
.col-xs-6
+
.col-xs-6
+
+
+
+
+
Mixed: mobile, tablet, and desktop
+
+
+
.col-xs-12 .col-sm-6 .col-lg-8
+
.col-xs-6 .col-lg-4
+
+
+
.col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
+
.col-xs-6 .col-sm-4
+
+
+
+
+
Column clearing
+
Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.
+
+
+ .col-xs-6 .col-sm-3
+
+ Resize your viewport or check it out on your phone for an example.
+
+
.col-xs-6 .col-sm-3
+
+
+
+
+
.col-xs-6 .col-sm-3
+
.col-xs-6 .col-sm-3
+
+
+
+
+
Offset, push, and pull resets
+
Reset offsets, pushes, and pulls at specific breakpoints.
This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.
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. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
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. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
This example is a quick exercise to illustrate how the default navbar works. It's placed within a .container to limit its width and will scroll with the rest of the page's content.
This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser's viewport.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.
As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.
+
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. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
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. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
This example is a quick exercise to illustrate how the top-aligned navbar works. As you scroll, this navbar remains in its original position and moves with the rest of the page.
Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the body > .container.
This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.
+
+
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
+
+
Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
+
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
+
Heading
+
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
Sub-heading
+
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
Example code block
+
Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
+
Sub-heading
+
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+
Donec id elit non mi porta gravida at eget metus.
+
Nulla vitae elit libero, a pharetra augue.
+
+
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
+
+
Vestibulum id ligula porta felis euismod semper.
+
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+
Maecenas sed diam eget risus varius blandit sit amet non magna.
+
+
Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
+
+
Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
+
+
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
+
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
+
Donec id elit non mi porta gravida at eget metus.
+
Nulla vitae elit libero, a pharetra augue.
+
+
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
+
Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
+
+
+
+
+
+
+
+
+
About
+
Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
+ 
+ 
+ 
+