Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework

Bootsnipp is an element gallery for web designers and web developers, anybody using Bootstrap will find this website essential in their craft.

Free Sign upLearn More
  • Latest
  • Featured
This is a template web form with a skeleton layout, designed using HTML, and CSS. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the unordered list. The background image is imported with its URL added to the code. The body is given a background of #FDD761, font family of 'Lucida Sans Unicode', 'Arial', serif, and the color as white. The font-weight for headers and buttons is set as 700. The text-transform of the header is set to uppercase. The menu items have the styles of text-align as center, background as #fcca2f, font size as 14px, color as steelblue, text-shadow as 0px 1px 0px rgba(0, 0, 0, 0.25), and a transition of all ease .3s which changes its color to #fcc316, in a hover event. The services section has an initial style set of padding as 25px, background as #fafafa, and border-radius as 4px which in a hover event, changes the color to #f4ba04 and font size to 5.5em. Source: https://codepen.io/SitePoint/pen/PwmjYp
This is an example of a simple article layout designed using HTML, CSS and Flexbox layout style. Flexbox styles had been added to the code, before other styles. The body of the form is given the styles of background as #EDD382, text-align as center, padding as 2em, font-family as ‘Source Sans Pro', sans-serif, font-size as 1.4em, font-weight as 300, and line-height as 1.6em. The header is given a font-weight of 900 and text-transform is set to uppercase to automatically transform text to uppercase. The body of the article is given the styles of font-family as 'Georgia', Times, serif, and line-height as 1.6em. The Read More button has the initial styles of color of #000, display of inline-block, border-bottom of 4px solid #000, text-transform of uppercase, font-weight of 900, letter spacing of .1em, and a background color of #FF521B which takes a transition of .2s all in a hover event to take the styles padding-left of .75em, padding-right of .75em, color of #fff, and a border color of #FF521B. Source: https://codepen.io/jondaiello/pen/wWWmNB
This is a template web form of a shopping cart layout, designed using CSS and HTML. Images and fonts are added into the code with their URLs. The body of the form is given the styles of font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif, font-size: 62.5%, line-height: 1, color: #414141, and background: #caccf7 whereas the background image is added with its URL. The header is given the same font family, color as #fff, text shadow as 1px 2px 0 #7184d8, font size as 3.5em, line height as 1.1em, padding as 6px 0, and text align as center. Quantity Input field is given the styles of width as 33px, height as 22px, border as 1px solid #a3b8d3, background as #dae4eb, color as #616161, and text-align as center. Cursor is set as pointer for remove button and checkout button to display the cursor as a hand. In a hover event, the color of the checkout button changes to gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #4d9cff), color-stop(100%, #338eff)). Source: https://codepen.io/jakestuts/pen/qKvew
This is a template of a simple flat blog layout designed using CSS, HTML, and JavaScript. JavaScript click(function() had been used to implement the switch between two layouts. Bootstrap styles and fonts have been imported into the form by adding their URLs. Background images are also added into the code with the URL. The font family of the form is set as "Pacifico". Variables are used to define values to avoid using values again and again in different places, such as $size: 150px, and $bg:#CDE. The body is given a style set of padding:0 100px 100px, and background-color: $bg !important. The header has the styles of text-align: center, padding: 50px, font-size: 62px, font-family: "Pacifico", @include text-shadow (0 2px 2px darken ($bg,40%)). The article section is given the styles of position:relative, padding-left:$size+30,padding-right: $size/2,height: $size,margin-bottom:30px,background-color:#FFF,@includeborder-radius($size),andcursor: pointer. In a hover event, the image button takes a transformation of transform(rotate(5deg). Source: https://codepen.io/renaudtertrais/pen/xJFny
This is another example of a CSS card layout with animations, designed using CSS and HTML. The cards are given focus animations, flipping animations and pulse animations in a hover events. The images are added into the form with their URLs. The font family for the body is set as 'Open Sans', sans-serif. The color palette for the form is set as $black = #000, $red = #e74c3c, $green = #26a65b, $grey = #6c7a89, $purple= #8e44ad, $blue = #1e8bc3, $white= #ecf0f1 and $darkred = #cf000f. The flipping panel is given a style of backface-visibility as hidden to hide the backface of the panel, a transform-style of preserve-3d, a transition of .25s, and a transform style of transform rotateY(180deg). The pulse animated panel is given a style set of transform-style as preserve-3d, perspective of 1000, transition of transform .25s ease 0s and a hover transformation style of transform scale(1.02). Source: https://codepen.io/jh3y/full/mPgyqw/
This is a template of a Windows 8 User Interface, designed using HTML and CSS. The Windows tiles and icons have been imported into the code with the URLs added. The font styles is also imported with its URL and set as Open+Sans: 400,300. The body of the form is given the styles of margin as 0px, font-family as "Open Sans", arial, background as #0f6d39, color as #fff, and font-weight as 300. The header "Start" has the styles of font-family as "Open Sans", arial, font-weight as 300, float as left, width as 55%, margin-left as 5px, font-size as 40px, and margin-bottom as 40px whereas the boxes are given a hover transformation of webkit-transform: scale(1.05) and a focus transformation of webkit-transform: scale(1) and assigned colors such as lime{background:#61b812;},orange{background:#e76022;},blue{background:#1E90FF;},redgay{background:#DA312E;},yellow{background:#dbb701;},bluefish{background:#02b9e3;}, magenta{background:#d22a4e;}, and .spacer. The cursor is set as pointer to display the cursor as a hand. Source: https://codepen.io/pedox/pen/DimhI
This is an example of a vault layout web form designed using CSS and HTML. CSS grid view elements have been used to separate and organize the displaying sections whereas Flexbox is used to get an identical layout for the browsers that don't support the CSS grid. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the unordered list. The default font size for the form is set to 10px. The body is given the style set of font-family as "Open Sans", Arial, sans-serif, display as flex, min-height as 100vh, background-color as #fafafa, and position as relative whereas the buttons are given the styles of font-size as inherit, font-weight as inherit, color as inherit, display as flex, justify-content as center, align-items as center, and cursor as pointer to display the cursor as a hand. The header is given a background color of #d12f2e and the search input field is given a color of rgba(255, 255, 255, 0.3) in a hover event. Source: https://codepen.io/GeorgePark/pen/PQweLr
This is an example of a simple column preview with text in them, designed using CSS and HTML. The form is divided into six sections based on their positions and sizes. There are six rows of columns with 5 different sizes which are; One Third, One Half, One Fourth, One Sixth, and Two Thirds. The body of the form is given the style set of font-family as 'Raleway', sans-serif, padding as 10px, and background color as linear-gradient (135deg, #b04, #f80) fixed. The columns have the styles of padding as 10px 0, background-color as rgba(255, 0, 0, 0.25), text-align as center, border as 1px solid rgba(255,255,255,0.25), background-color as rgba(255,255,255,0.2), and color as rgba(255,255,255,0.9). A section is given the styles of max width as 740px, margin as 0 auto, and display as flex. Source: https://codepen.io/madebyanna/pen/rVRWXw
This is an example of a web form with a 3D fold-out reveal card preview, designed using HTML, CSS, and JavaScript. The background images of the cards are imported to the code with their URLs. JavaScript functions have been used to create 3D animations in a focused event. The font family of the form is set as Sans+Pro and imported into the code with its URL. The colors are predefined as variables and set as white: #ffffff, lightBG: #dce1df, salmon: #ff6666, teal: #0096a0, tealMid: #0ebac7, tealContrast: #33ffff, darkGrey: #4f585e, and tealShade: #007c85. The body of the form is given the styles of background: @lightBG, color: @darkGrey, font-family: 'Source Sans Pro', sans-serif, and text-rendering: optimizeLegibility. The cards are given an initial set of styles such as background: @white, display: inline-block, margin: 8px, max-width: 300px, perspective: 1000, position: relative, text-align: left, and transition: all 0.3s 0s ease-in. The cursor is set as pointer to display the cursor as a hand, in a focus event on cards. Source: https://codepen.io/candroo/pen/wKEwRL
This is an example of a FAQ web form with collapsible sections, designed using HTML and CSS. Variables are used to define values to avoid using values again and again in different places. The font family has been defined as 'Open Sans', sans-serif and been added to the code with its URL. The colors that are defined as variables are primary: #4f56c0, white: #FFFFFF, light: #F4F4F4, black: #333333, grey: #C4C4C4, and ghost: rgba(0,0,0,.0). The transitions that are defined as variables are $time: 200ms, $ease: cubic-bezier(0.165, 0.84, 0.44, 1), $smooth: cubic-bezier(0.175, 0.885, 0.32, 1.275), and $transition: $ease, $time. The section title is given the styles of color as $color, font-size as 4rem, font-weight as bold, text-align as center, text-transform as uppercase to convert the text to uppercase automatically, and padding as 3rem 0. The collapsible card initially has the styles of border: .1rem solid map-get ($colors, grey), border-radius: .4rem, overflow: hidden, and margin: 0 0 1.5rem whereas the button is given the styles of color: map-get ($colors, white), font-size: 2rem, width: 100%, and padding: 1rem 0. Source: https://codepen.io/luiquecruz/pen/LYPjWbg
This is another example of a signup/sign-in form where the sign in and signup options have been given using toggle buttons, designed using HTML, CSS, and JavaScript. Bootstrap library and bootstrap style sheets have been imported to the code. JavaScript functions have been used to hide and show the password. Sign in using social media accounts function has been implemented with their respective links imported. Cursor style is set as pointer to display the cursor as a hand whereas text-transform style is set as uppercase for the headings to convert the text to uppercase automatically. The list has a style set of width: 50%, position: relative, float: left, text-align: center, background: #D2D8D8, line-height: 72px, height: 72px, font-weight: 700, font-size: 16px, and color: #809191 whereas the subtitle is given the styles of display: block, font-weight: 400, font-size: 15px, color: #888, and line-height: 48px. In a focused event, the login and signup tabs get an outline border of outline: dotted 1px. Source: https://codepen.io/arunslite/pen/dojLOg
This is another example of a signup/sign-in form where the sign in and signup options have been given using toggle buttons, designed using HTML, CSS, and JavaScript. The Li element of lists has been used to display the details in a list. The form consists of placeholders, checkboxes, and a button. JavaScript click(function() have been used to implement the toggle feature. The body of the form has the styles of box-sizing: border-box, font-family: 'Open Sans', sans-serif, and a background color of linear-gradient (rgba(246,247,249,0.8), rgba(246,247,249,0.8)). The background of the container is imported with its URL. The text-transform style is set as uppercase to convert the text to uppercase automatically. The sign in and sign-up sections have the styles color: rgba(255,255,255,.3), and cursor: pointer to display the cursor as a hand which takes a transition of all .25s ease in a toggle event and takes the border style of solid 2px #1059FF and padding-bottom of 10px. The sign in and signup buttons are given the styles of float: left, font-weight: 700, text-transform: uppercase, font-size: 13px, text-align: center, color: #ffffff, padding-top: 8px, height: 35px, border-radius: 20px, margin-top: 23px, and background-color: #1059FF. Source: https://codepen.io/joshsorosky/pen/gaaBoB
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter