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 web layout with a sticky slider navigation bar, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. Media quarries are used to make the form responsive, whereas the JavaScript functions are used to implement the functionality of the navigation bar. The body of the form is given a font-family as "Century Gothic", 'Lato', sans-serif. The title of the form has the styles of font-size as 2rem, and letter-spacing as 1rem, whereas the subtitle has the styles of font-size as 1rem, letter-spacing as 0.3rem, and opacity as 0.6. The navigation bar has the styles of display as flex, justify-content as center, align-items as center, flex as 1, color as #000, letter-spacing as 0.1rem, transition as all 0.5s ease, and font-size as 0.8rem. In a hover event, the navigation bar items take the styles of font color as white, background as rgba(102,177,241,0.8), and transition as all 0.5s ease, in a hover event. Source: https://codepen.io/ettrics/pen/WRbGRN
This is an example of a draggable toggle menu, designed using HTML, CSS, JavaScript and Bootstrap framework 4. The font is imported to the code with the URL, whereas the JavaScript functions have been used to implement the expanding and dragging functions of the menu button. The body of the form is given the styles of background-color as #222222, color as white, font-family as 'Open Sans', sans-serif, and font-size as 12px. The menu icon is given the styles of position as absolute, width and top as 40px, background-color as white, border-radius as 50% to get the circle shape, cursor as pointer to get the hand cursor effect in a hover event, text-align as center, and line-height as 40px. The list items of the menu have the styles of font-size as 0.6 * 40px, and color as #222222. The menu is given four child elements, which are given the background colors of #FF5C5C, #5CD1FF, #FFF15C, and #64F592, respectively. Source: https://codepen.io/andyNroses/pen/AXwPkb
This is an example of a mobile menu, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The icons are imported to the code with their URLs. The JavaScript functions have been used to implement the clicking functions of the menu. The colors in the form, are predefined as $bg: #F0EDFD, $main: #7B49DD, and $white: #FFFFFF. The body of the form is given the styles of display as flex, justify-content as center, align-items as center, width as 100%, height as 100vh, font-family as 'Poppins', sans-serif, font-size as 11px, letter-spacing as 1px, background as $bg, and color as $white. The menu items are given the styles of display as flex, flex-direction as column, justify-content as center, align-items as center, position as relative, width and height as 140px, cursor as pointer to get the hand cursor effect, background as transparent, and transition as 150ms. In a hover event, the menu items take an animation of icon .1s 4. Source: https://codepen.io/ricardoolivaalonso/pen/JjjjJOX

Mobile Menu

4.3.1
This is an example of a navigation menu with animations, designed using HTML, CSS, JavaScript, 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 menu items in an orderly manner, whereas JavaScript functions are used to implement the expanding function of the menu. The fonts and background images are imported to the code with the URL. Media quarries are used to make the form responsive. The body of the form is given the styles of font-family as "Barlow", sans-serif, and background-color as #f1f3f7. The menu icon has the styles of width and height as30px, and cursor style as pointer to get the hand cursor effect in a hover event. The four child elements of the menu is given four different background colors as #2d3561, #c05c7e, #f3826f, and #ffb961. The menu items have the styles of font color as white, text-transform as uppercase to automatically convert the text to uppercase, font-weight as 800, font-size as 40px, opacity as 0.3, and a transform style as rotate(-90deg). Source: https://codepen.io/rafaelavlucas/pen/JjPGNdq
This is an example of a collapsible menu layout, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. JavaScript has been used to implement the expanding function of the menu. The fonts are imported to the code with the URL. 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 menu items in an orderly manner. The body of the form is given the styles of color as #444246, background as linear-gradient(to bottom, #dd879f 0%,#4e337e 100%), font-family as 'Open Sans', sans-serif, and padding as 10% 0 0 40%. The text is given a text-transform style as uppercase to automatically convert the text to uppercase, and also the cursor style as pointer to get the hand cursor effect in a hover event. The menu list items are given the styles of display as block, min-height as 48px, font-weight as bold, font-size as 0.76em, position as relative, and border-bottom as 1px solid rgba(255,255,255,0.1), which takes the background color of #3ed8b5, in a hover event. Source: https://codepen.io/chrisota/pen/hkAFm
This is an example of a responsive flat horizontal menu layout, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts are imported to the code with the URL. 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 menu items in an orderly manner, whereas JavaScript has been used to implement the menu expanding functions. Media queries are used to make the form responsive. The body of the form has the styles of background as #e5e5e5, color as #374147, font as 14px "Open Sans",Helvetica,Arial,sans-serif, line-height as 1, and width as 100%. The navigation bar is given the styles of display as block and background as #374147. The child elements of the navigation bar have the styles of font-weight as 600, padding as 20px 15px, display as block, color as #fff, and transition as all 0.2s ease-in-out 0s, which takes the styles of color as #fff, and background as #9ca3da, in a hover event. Source: https://codepen.io/arlinadesign/pen/ZYgzMa
This is an example of a header navigation bar that displays a mobile navigation button if a navigation element is overflowing. It is designed using HTML, CSS, JavaScript, 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 menu items in an orderly manner, whereas JavaScript has been used to implement the overflowing function. Media queries are used to make the form responsive. The body of the form is given the styles of align-items as center, background as #524fae, display as flex, height as 500vh, justify-content as center, padding-top as 150px, and width as 100vw. The navigation bar list items are given the styles of align-items as center, color as darkblue, display as flex, font-family as Lato, sans-serif, font-size as 20px, font-weight as bold, height as 100%, line-height as 32px, margin as 0 40px, and transition as font-size 0.4s ease, and padding as 0.4s ease. Source: https://codepen.io/CAWeissen/pen/wvvVKyo
This is an example of a sidebar toggle menu, designed using HTML, CSS, and Bootstrap framework 4. The fonts 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 menu items in an orderly manner. The body of the form is given the styles of background as #fff, and font-family as 'Varela Round', sans-serif, whereas the header of the form is given size of 60px, and background color of #FC466B. The sidebar menu has the styles of height as 100%, position as fixed, width as 250px, margin-top as 60px, transform as translateX(-250px), transition as transform 250ms ease-in-out, and background as linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%). The sidebar menu list items are given the styles of font color as #fff, text-transform as uppercase to automatically convert the text to uppercase, font-weight as bold, padding as 20px, cursor as pointer to get the hand cursor effect in a hover event, and border-bottom as 1px solid rgba(255, 255, 255, 0.10). Source: https://codepen.io/plavookac/pen/qomrMw
This is a template of a web form with an accordion menu, designed using HTML, CSS, and Bootstrap framework 4. The concept of Lists has been used with UI and LI components. UI element has been used with the child elements of LI to display the accordion items in an orderly manner. The form is given a background color of #fcdc29. The main menu wrapper is given the styles of width as 250px, display as block, and border-radius as 10px, whereas the main menu button has the styles of display as block, padding as 15px 20px, background-color as #ff6f61, color as #fff, and position as relative. The submenu section has the styles of background as #273057, overflow as hidden to hide the visibility in the shrink mode, and transition as max-height 0.7s. The submenu content has the styles of color as #fff, font-size as 14px, and border-bottom as 1px solid #394c7f. In a hover event, the sub-menu items take the styles of background as linear-gradient(to bottom, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%), transition as all 0.3s, and border-bottom as 1px solid #394c7f. Source: https://codepen.io/ahmadbassamemran/pen/zXwZKo
This is an example of a side-bar template, designed using HTML, CSS, JavaScript, 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 menu items in an orderly manner. JavaScript functions have been used to implement the dropdown function of the menus, whereas media quarries are used to make form responsive. The page wrapper is given the background color of #1e2229. The side-bar wrapper has the styles of width as 260px, height, and max-height as 100%, position as fixed and left as -300px. The user status section of the side-bar has the styles of font-size as 8px, margin-right as 4px, and color as #5cb85c. The side-bar menu items have the styles of margin-right as 10px, font-size as 12px, width and height as 30px, line-height as 30px, text-align as center, and border-radius as 4px. The side-bar list items take an animation effect of swing ease-in-out 0.5s 1 alternate, in a hover event. Source: https://codepen.io/azouaoui-med/pen/wpBadb
This is an example of an animated accessible menu with a toggle button, designed using HTML, CSS, JavaScript, 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 menu items in an orderly manner. JavaScript functions have been used to implement the menu expand features. The toggle button is given the styles of display as inline-block, position as absolute, background as transparent, right as 15px, top as 15px, and cursor as pointer to get the hand cursor effect in a hover event, border-radius as 50% to get the circle shape, and transition as background-color .15s linear. The button changes its background color to rgba(0,0,0,.5), in a hover event. The menu- list items are given the styles of color as white, display as block, text-align as center, text-transform as uppercase to automatically convert the text to uppercase, letter-spacing as 5px, font-size as 1.25rem, and padding as 1rem, which take background-color of rgba(0,0,0,0.2), in a hover and an active event. To animate the menu icon, a transform style of rotate(180deg), is given. Source: https://codepen.io/mxbck/pen/xdaGNL
This is an example of a flat navigation bar with hover effects, 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 menu items in an orderly manner. The navigation bar is given five list items, whereas the form consists of four navigation bars. The body of the form is given the background color of #1b1b1b. The menu items are given the styles of position as relative, display as block, text-align as center, width as 62px, and height as 66px. In a hover event, the background color of the list items turn to #b651d8, #71c55e, #fab904, #e94739, and #407ded, respectively. The top navigation bar takes the background fill effect from top to bottom, whereas the others take it from left to right, bottom to top, and right to left, respectively. Source: https://codepen.io/seyedi/pen/vBlCe
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter