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 an example of a bootstrap table with add and delete row feature, designed using CSS, HTML, and JavaScript. Bootstrap style sheets including the fonts are imported to the form with their URLs. The body is given a style set of color as #404E67, background as #F5F7FA, and font-family as 'Open Sans', sans-serif. The table title is given the styles of padding-bottom as 10px, and margin as 0 0 10px whereas table header two has the styles margin: 6px 0 0, and font-size: 22px. The cursor style for all the buttons is set as pointer to get the hand pointer effect and the colors of add, edit and delete buttons are set as #27C46B, #FFC107, and #E34724, respectively. Tooltip style has been used to display a popup in a hover event on add new, edit and delete icons whereas JavaScript functions are used to implement append table with add row form on add new button click, add row on add button click, edit row on edit button click, and delete row on delete button click functions.
This is an example of a bootstrap CRUD (Create, Read, Update, Delete) data table for a database with modal form, designed using HTML, CSS, and JavaScript. Bootstrap style sheets including the fonts are imported to the form with their URLs. The body is given a styles set of color as #566787, background as #f5f5f5, font-family as 'Varela Round', sans-serif, and font-size as 13px. The table title is given the styles of padding-bottom as 15px, background as #435d7d, color as #fff, padding as 16px 30px, margin as -20px -25px 10px, and border-radius as 3px 3px 0 0 whereas header two is given a margin of 5px 0 0, and font-size of 24px. The table has the styles of font-weight as bold and color as #566787. The background colors of edit and delete icons are set as #FFC107 and #F44336, respectively. The concept of Lists has been used with the LI component to display the details in an orderly manner. Once checked, the checkbox takes the color #03A9F4. Tooltip style has been used to display a popup in a hover event on edit and delete icons whereas JavaScript functions are used to implement tooltip activation and checkbox implementation.
This is a template of a web form with an animated bootstrap product banner, designed using HTML, CSS, and bootstrap 4 framework. The images and fonts are imported to the form with their URLs. The form is given a style set of font-family as "Montserrat", sans-serif, color as #8d97ad, font-weight as 300, padding-top as 80px, and opacity as 0.8. The header text is given the styles line-height as 40px, and font-size as 36px, whereas the image is given a margin-top and bottom values of 80px and -100px respectively. The background of the form is set to a linear gradient color of #2cdd9b. The "Take a tour" button has the background color as same as the color of the form, which takes the color #ffffff in a hover effect while the "Request a demo" button is given a background and a border color of #263238, which takes the background color #ffffff in a hover effect.
This is an example of a classic breadcrumb navigation line with wrapping arrows, 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 breadcrumbs in an ordered list. The body of the form is given a style set of background as #9ad4e2, font-family as sans-serif, padding as 10px, and margin as 0 whereas header one is given the styles font-weight as lighter, and color as #c8f1fe. li:last-child > *:before {background: #9ad4e2;} has been used to cover the arrow tails with the background color and li:last-child > * {background: #76cae6;color: #fff} is used to highlight the last child of the list. The button faces are given a background color of #c8f1fe, display as inline-block, and a font-size of 16px. The font color for the breadcrumbs is set as #253e6a except for the last child, which has the font color #fff. https://codepen.io/fgnass/pen/ehAlq
This is an example of a web form with a map of Texas region, designed using CSS, and HTML. The map has been created in XML and imported to the form with its URL. The map container is assigned the styles of max-width as 800px, max-height as 800px, and margin as 0 auto. The color set for the map is predefined as variables to avoid defining them over and over again. The color set is given as $charcoal: #656d78, $darkcharcoal: darken($charcoal, 30%), $purple: #987197, $darkpurple: darken($purple, 30%), $orange: #e9573f, $darkorange: darken($orange, 30%), $green: #37bc9b, $darkgreen: darken($green, 30%), $blue: #1a2240, $darkblue: darken($blue, 30%),$red:#7d0506,$darkred:darken($red,30%), $yellow:#f6bb42;$darkyellow: darken($yellow, 30%), and $white: #f2f2f2. In a hover event, the path takes a transition effect of fill .2s ease-in-out and fills the region with the color $blue.
This is an example of a web form with a map with curved lines, designed using CSS, HTML, and JavaScript. The map is imported to the form with its URL whereas the JavaScript functions have been used to implement the mapping functions. The toolset has been implemented with a range slider, labels, and radio buttons. The toolset is given the styles of font-family as Arial, position as fixed, bottom as 5px, padding as 10px 0 15px 0, background as rgba(255, 255, 255, .8), and text-align as center. JavaScript AmCharts.makeChart method has been used to create the map with the type given as 'map' with the zoom-level set as 3.5 zoomLongitude as -20.1341, and zoomLatitude as 49.1712. The images are given IDs by their town names and assigned longitudes, latitudes and a scale of 0.5 except for London, which is given a scale of 1 as it is the main city. The color of the lines is set as #CC0000.
This is a template of a sign-in web form designed using HTML, and CSS. The bootstrap styles, icons, fonts, and images are imported to the form with their URLs. The form is given a font-family of 'Numans', sans-serif whereas the card has the styles of height as 370px, margin-top as auto, margin-bottom as auto; width as 400px, and background-color as rgba(0,0,0,0.5) !important. The social media icons are given the styles of font-size as 60px, margin-left as 10px, and color as #FFC312. In a hover event, the color of social media icons becomes white and the cursor becomes pointer to get the hand cursor effect. The login button has an initial style set of color as black, background-color as #FFC312, and width as 100px which also turns into the background color white, in a hover event. The links are given a margin-left style of 4px and the color white.
This is an example of a web form with a responsive image slider with a search bar with three input search, designed using HTML, and CSS. The bootstrap styles and images are imported to the form with their URLs. A carousel class has been used to implement the image slider and a button class has been used to implement the buttons. The search placeholders are given the styles of display as block, width as 100%, font-size as 0.875rem, line-height as 1.5, color as #55595c, background-color as #fff, border as 1px solid #ccc, height as calc(3rem + 2px) !important, and border-radius as 0. The search button has the styles of width as 100%, font-size as 16px, font-weight as 400, text-transform as capitalize to make the first letter of the text uppercase, height as calc(3rem + 2px) !important, and border-radius as 0 whereas the background color for the search section is set as #1A4668.
This is a template of a web form with a shopping card with an Add to Card button and a rating with hover effects, designed using HTML and CSS. The icons, images, and fonts are imported to the form with their URLs. The image card is given the styles of font-family as 'Raleway', Arial, sans-serif, position as relative, overflow as hidden, margin as 10px, min-width as 400px, max-width as 480px, width as 100%, background as #1a1a1a, color as #ffffff, text-align as center, border-radius as 8px, and box-shadow as 0 0 5px rgba(0, 0, 0, 0.15). The image has the styles of background-color as #000000, width as 50%, overflow as hidden, and vertical-align as top. The name title is given a text-transform style of uppercase to convert the text to uppercase, font-weight of 400, of #ffffff, and letter-spacing as 1px. The price is displayed in two colors, #f39c12 and #ffffff. The opacity of the image becomes 0.6 and takes a transform of scale(1.1) in a hover effect.
This is a template of a web form with a shopping card with an Add to Card button on hover, designed using HTML, CSS, and JavaScript. JavaScript functions have been used to implement hover effects. The icons, images, and fonts are imported to the form with their URLs. The image card is given the styles of font-family as 'Raleway', Arial, sans-serif, position as relative, overflow as hidden, margin as 10px, min-width as 220px, max-width as 310px, width as 100%, color as #333333, text-align as center, background-color as #ffffff, and line-height as 1.6em. The image has the styles of vertical-align as top, max-width as 100%, and opacity as 0.35s. The background color of icons is set to #000000 and the color is set as #ffffff. The text-transform style of icons is set as uppercase to automatically convert the text to uppercase. In a hover event, the button and icons take a transform style of translateY(100%) where the opacity of the image becomes 0.8.
This is a template of a web form with a product card with a rotate button on hover, designed using JavaScript, HTML, and CSS. JavaScript functions have been used to implement the hover effects. The icons, images and fonts are imported to the form with their URLs. The image card is given the styles of font-family: 'Raleway', Arial, sans-serif, position: relative, overflow: hidden, margin: 10px,min-width: 230px, max-width: 315px, width: 100%, background: #ffffff, text-align: left, color: #000000, box-shadow: 0 0 5px rgba(0, 0, 0, 0.15), font-size: 16px, and transform: translateZ(0). The image has the styles of vertical-align as top, max-width as 100%, and position as relative. The initial price is given an opacity value of 0.5 and a font-size of 0.9em whereas the discounted price is given the font-size 1.5em. The text-transform style of uppercase is given to the Add to Card icon along with the background color #409ad5. In a hover event, the icon takes a transform of rotateX(-90deg)
This is a template of a web form with a shopping card with a header icon, designed using CSS, HTML, and JavaScript whereas JavaScript functions have been used to implement the hover effects. The icons, images, and fonts are imported to the form with their URLs. The image card is given the styles of font-family as 'Oswald', Arial, sans-serif, position as relative, margin as 10px, min-width as 230px, max-width as 315px, width as 100%, background as #ffffff, text-align as center, color as #000000, box-shadow as 0 0 5px rgba(0, 0, 0, 0.15), and font-size as 16px. The image has the styles of max-width as 100%, vertical-align as top, position as relative, background-color as #666666, and padding-top as 40px. The name title is given a font size of 1.3em, font-weight of 400, margin-bottom of 5px, and text-transform of uppercase. The icon is given a background color of #666666 which changes to #2980b9, in a hover event.
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter