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 footer template with hover effects, designed using HTML, CSS, and Bootstrap framework 4. The icons are imported to the code with their URLs. 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 details in an orderly manner. Media queries have been used to increase the responsiveness of the form. The body of the form is given the styles of box-sizing as border-box, and font-family as "Lato", sans-serif. The footer is divided into three sections as Footer main, Footer social, and Footer legal and given styles. The background color of the main section is set as #555, with the font color set as #eee. The title of the list items has the styles of color as #fff, font-family as "Merriweather", serif, font-size as 1.375rem, and padding-bottom as 0.625rem. The list items take an underline effect in a hover event. The Footer legal section is given a background color of #333, and padding as 0.9375rem 1.875rem. Source: https://codepen.io/Caseguy/pen/gObBmGd
This is an example of a bootstrap footer template with hover animations, designed using HTML, CSS, and Bootstrap framework 4. The icons are imported to the code with their URLs. 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 details in an orderly manner. The main footer section is given a background color of #252525, whereas the copyrights footer section given the background color #222. The "Register Now" button has the background color of #ff8d1e, which turns to #4b92dc, with a transition value of all 250ms ease-in-out 0s, in a hover event. The social media icons also take the background color of #ff8d1e, in a hover event. The quick links items are given a font color of #ff8d1e, which changes to #4b92dc, in a hover event. Source: https://codepen.io/digitalavinash/pen/VjGGgp
This is an example of a mobile responsive bootstrap footer template with hover animations, designed using HTML, CSS, and Bootstrap framework 4. The icons are imported to the code with their URLs. 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 details in an orderly manner. Media queries have been used to increase the responsiveness of the form. The body of the form is given the styles of font-family as Arial, Helvetica, Sans-serif, and background-color as #070617. The footer section is given a background color of #070617. The footer column headers are given the styles of font-family as inherit, font-size as 12px, line-height as 17px, padding as 20px 0px 5px 0px, color as rgba(255,255,255,0.2), font-weight as normal, text-transform as uppercase to convert the text to uppercase automatically, and letter-spacing as 0.250em. The column list items have the styles of color as #999999, font-size as 14px, cursor as pointer to get the hand cursor effect, and transition as .2s, which changes its color to #ffffff, in a hover event. Source: https://codepen.io/jakeduncan/pen/rJZJMM
This is an example of a bootstrap footer template with hover animations and sub-navigation, designed using HTML, CSS, and Bootstrap framework 4. 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 details in an orderly manner. The footer is given a font color as white. The list items are given a font color of #bfffff, which changes to white, in a hover event. The background color of the footer bottom is set to #3d6277 color with padding of 2em. The footer step is given a background color as #2d4958. The sub-navigation section has the styles of color as white, and font-weight as bold. The sub-navigation items have the styles of padding as 1rem 1rem, color as white, and font-weight as bold, which take the styles of border-top as 5px solid orange, background as white, and color as black when they're active. Source: https://codepen.io/gcharles/pen/oxpwyL
This is an example of a bootstrap footer template with hover animations, designed using HTML, CSS, and Bootstrap framework 4. The icons are imported to the code with their URLs. 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 details in an orderly manner. Media queries have been used to increase the responsiveness of the form. The site footer section has the styles of background-color as #26272b, padding as 45px 0 20px, font-size as 15px, line-height as 24px, and color as #737373. The site footer section has a font-size of 16px, and text-transform style as uppercase to automatically convert the text to uppercase. The list items are given a font color of #737373, which changes to #3366cc, in a hover event. The social media icons take different background colors such as Facebook as #3b5998, Twitter as #00aced, Linkedin as #007bb6, and dribble as #ea4c89. Source: https://codepen.io/scanfcode/pen/MEZPNd
This is an example of a responsive bootstrap footer template with hover animations, designed using HTML, CSS, and Bootstrap framework 4. The icons are imported to the code with their URLs. 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 details in an orderly manner. Media queries have been used to increase the responsiveness of the form. The colors are predefined as $primary-light-blue as #8DB9ED, and $primary-line-color as #ccc. The body of the form is given a style set of the font as 11px "Open Sans", sans-serif, display as flex, flex-flow as column nowrap, and justify-content as space-between. The content of the form is given a text color of #8DB9ED, which changes to #ccc, in a hover event. The footer header title is given the styles of padding as 10px 0 5px 0, color as #fff, and font as 2.3vw "Oswald", sans-serif, whereas the list items have a font-style of font: 1.3em "Open Sans", sans-serif. Source: https://codepen.io/mofny/pen/RWBeLJ
This is an example of a bootstrap footer template with animations, designed using HTML, CSS, and Bootstrap framework 4. The image is imported to the code with its URL. The form is developed using grid layout and the length for the rows is set as 1fr auto. The body of the form is given a style set of background as #F5F7FA, min-height as 100vh, and font-family as 'Open Sans', sans-serif. The footer is given a style set of footer-background as #ED5565, display as grid, position as relative, grid-area as footer, and min-height as 12rem. The footer is given an animation style of bubbles. The font color for the content is set as #F5F7FA. The bubbles have the styles of position as absolute, left as var(--position, 50%), background as var(--footer-background), border-radius as 100%, animation as bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s), bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s), and transform as translate(-50%, 100%). Source: https://codepen.io/z-/pen/zYxdRQy
This is an example of a simple bootstrap dashboard layout, designed using HTML, CSS, JavaScript, and bootstrap framework 4. The icons, images, and fonts are imported to the form with their URLs. 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 details in an orderly manner. The colors and sizes are predefined as variables. JavaScript functions are used to implement the list view feature in the interface. The body of the form is given a style set of font-family as sans-serif, font-size as 1.6rem, line-height as 1.5, color as #333, and background-color as #efefef. The dashboard panel is given the color of #fff. The sidebar is given a width of 25rem, height as 100%, padding-top as 6rem, background color as #fff, and border-right as 1px solid #e0e0e0. The page title is given the styles of font-size as 2.8rem, and font-weight as 500. Source: https://codepen.io/anon/pen/pXKeOX
This is an example of a bootstrap admin dashboard interface with hover effects, designed using HTML, CSS, and bootstrap framework 4. The icons, and fonts are imported to the form with their URLs. The body of the form is given the styles of background as #222428, and font-family as 'Open Sans', sans-serif. The header title is given a font-weight of 300. The main container has the styles of background as #eaedf2, width as 1500px, height as 600px, margin as 50px auto, and border-radius as 4px 2px 2px 4px. The sidebar is given a background color of #33353c, whereas the sidebar items are given a color as #76838c, which changes to #fff, in a hover event or active event. The light menu items are given the color of #85899b, which changes to #333, in a hover event. The search button has the styles of background as #5e9cf7, color as #fff, and border-radius as 2px 0 0 0. The navigation bar is given a font-size as 13px, font-weight as 600, and color as #757c8f, which takes the effects of background color as #eaedf2, box-shadow as 0 2px hsla(0,0%,100%,.5) inset, and transform as perspective(5px) rotateX(2deg), in a hover event. Source: https://codepen.io/anon/pen/bXbLzO
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter