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 admin dashboard user interface with charts, 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. JavaScript functions have been used to implement dropdown effects and graphs. The sidebar is given a background color of #27272B, whereas the sidebar items are given the styles of color as #666, font-size as 30px, transition as all 100ms, and an animation-delay as 500ms. In a hover event, the menu items take the color of white, and cursor style as pointer to get the hand cursor effect. An active menu item has the styles of color as white, background-color as #29BBF1, font-size as 50px, and opacity as 1. The notification circle is given a background-color as #E54E36, and a border-radius of 100%. Source: https://codepen.io/nemra1/pen/bGNjzMR
This is an example of a bootstrap admin dashboard user interface with charts, 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. JavaScript functions Navigation (), Tabs (), Collapse (), Graphs (), LineChart () have been used to implement the charts, graphs, and hover effects. The colors are predefined as @primary: #2DCC70, @body: #2B3A4F, @grey: #92A1A2, @grey-light: #ECF0F1, @blue: #59A4E8, @orange: #E54239, @purple: #8F40B3, @night-blue: #34495E, and @night-blue-dark: #233342. The header section is given the styles of background-color as @primary, height as 80px, and padding as 0 15px. The border-radius for the profile image is set as 50% to get the circle shape. The sidebar items have the styles of color as @grey, font-size as 20px, margin-right as 20px, and change the background-color to @night-blue-dark, and the font color to white, in a hover event. Source: https://codepen.io/Zerka1982/pen/oNgQWPQ
This is an example of a bootstrap dashboard with neat value indicators, designed using HTML, CSS, and bootstrap framework 4. The icons, images, and fonts are imported to the code with their URLs. The card titles are given an animation-delay of 0.4s, 0.5s, 0.6s, and opacity values of 0.25, 0.5, and 0.5, respectively. The card titles are given a letterspacing of 0.1em, and a text transform style as uppercase to automatically convert the text to uppercase. The Weekly Users number is given a font style of monospace, and a font-size of 2.25rem. Two animated indicator dots from the styles danger and warning animated infinite flash slower, have been added to indicate the health status. Links to redirect to the necessary pages have also been added to the feedback section and top referrals section. The smiley icon in the feedback section has the styles of position as absolute, top as -0.2em, and right as -0.2em. Source: https://codepen.io/tscherr/pen/OJPdmPZ
This is an example of a bootstrap project management user interface with charts, 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. JavaScript functions Selectize(), and Charts() have been used to implement the search and charts features. The colors are predefined as $bg: #1b2431, $light-text: #738297, $dark-text: #273142, and $light-bg: #313D4F. The body of the form is given a style set of background-color as $bg, font color as #202020, font-family as "Montserrat", "Helvetica", "Open Sans", "Arial", and font-size as 13px. The sidebar is given the styles of border-left as 5px solid transparent, color as $light-text, and padding as .5rem .75rem, which changes its color to white, in a hover event. The projects table is given a background color of #273142, which changes to lighten($dark-text, 5%), in a hover event. Source: https://codepen.io/pagan/pen/bGNZdrQ
This is an example of a bootstrap admin panel interface with hover effects, designed using HTML, CSS, JavaScript, and bootstrap framework 4. The icons are imported to the form with their URLs. JavaScript functions have been used to implement the toggle feature on the sidebar. 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 body of the form is given the styles of background as #f5f5f5, and font-family as 'Lato', sans-serif. The sidebar items are given a font-size of 16px. The header section is given a style set of background as #FF4136, width as 100%, height as 50px, line-height as 50px, and color as #fff. The logo is given a text-transform style as uppercase to automatically convert the text to uppercase. The sidebar is given a transition style as all .2s ease-in-out. The sidebar items take a background-color of #eee, and an opacity value of .9, in a hover event. Source: https://codepen.io/kusnahle/pen/QWWYzQE

Admin Menu

4.3.1
This is an example of a mini admin panel with hover effects, designed using HTML, CSS, and bootstrap framework 4. The icons, and 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 details in an orderly manner. The body of the form is given a style set of background-color as rgb(220,220,220), font-size as 16px, and font-family as sans-serif. The logo has the styles of height as 145px, and border-bottom as 1px solid rgb(235,235,235). The sidebar items are given a style set of color as rgb(140,140,140), font as 16px/40px helvetica,verdana,sans-serif, box-sizing as border-box, border-bottom as 1px solid rgb(235,235,235), box-shadow as inset 0 1px 0 rgb(255,255,255), text-indent as 20px, and text-transform as capitalize to make the first letter of the each word uppercase. In a hover event, the items take the effects of background-color as rgb(255,255,255), and box-shadow as 1px 0 0 rgb(255,255,255),inset 5px 0 0 -1px rgb(234,83,63). Source: https://codepen.io/francgio/pen/oNgvaEw
This is an example of a simple bootstrap admin panel, designed using HTML, CSS, JavaScript, and bootstrap framework 4. The icons are imported to the form with their URLs. Media queries have been used to increase the responsiveness of the form. 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. JavaScript functions have been used to implement the dashboard chart. The form is developed using grid layout and the length for the rows and columns are set as 1fr. The body of the form is given the styles of font-family as Inter, Arial, sans-serif, and background as #eff4f7. The header is given a background color of #202020. The sidebar is given a style set of background as #0d28f2, font-size as 15px, padding as 20px 0, font color as #fff, and opacity as 0.5, which changes to 1, in a hover event. Source: https://codepen.io/botmirp/pen/MWYoOZW
This is an example of a responsive bootstrap admin panel with hover effects, designed using HTML, CSS, and bootstrap framework 4. The icons, images, and 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 details in an orderly manner. Media queries have been used to increase the responsiveness of the form. The font family for the form is set as 'Muli', sans-serif. The sidebar is given a style set of padding as 20px, margin-bottom as 6px, color as #606060, font-weight as 600, border-left as solid 4px rgba(0,0,0,0.1), margin-left as 4px, cursor as pointer to get the hand cursor effect, and a transition of all 0.3s. In a hover event, the sidebar takes the color of #fcc728. The drop-down items take a transform effect of rotate (90deg), in a hover event. The section titles has the styles of font-weight as 400, font-size as 1.3em, and text-decoration as underline, whereas the section tables are given a background color of #fcc728, and filter as drop-shadow(0px 6px 0px #e2b324). Source: https://codepen.io/rafael-medeiros-the-sasster/pen/abzLvrv
This is an example of a bootstrap admin panel interface with hover effects, designed using HTML, CSS, JavaScript, and bootstrap framework 4. The icons and 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 details in an orderly manner. Tooltip feature on the sidebar has been implemented using JavaScript functions. The colors of the form are predefined as $main-color: #102c58. $text-color: #ababab, $light-blue: #5f9cfd, $red: #f91605, $navy: #051835, $bg-color-light: #f3f3f3, $bg-color-dark: $navy, $orange: #f5642d, $light-grey: #d0d0d0,and $header-color: #ffffff. The body of the form is given a style set of font-family as "Open Sans", font-size as 14px, font-weight as 400, background-color as $bg-color-light, and font color as $main-color. The tooltip is given a background color as #051835, font-size as 12px, and border-radius as 3px. The sidebar items are given the color of #102c58, which changes to #f5642d, in a hover event. Source: https://codepen.io/Arsalanrazzaq/pen/wvBPVjx
This is an example of a bootstrap admin panel interface with hover effects, designed using HTML, CSS, JavaScript, and bootstrap framework 4. The icons and fonts are imported to the code with their URLs whereas JavaScript functions have been used to implement the hover effects on the sidebar. The body of the form is given a style set of background as #f5f5f5, and font-family as 'Lato', sans-serif. The sidebar icon names are given a font-size of 16px, whereas the content is given the styles of font-size as 16px, and line-height as 1.428571429, and a transition style as all .2s ease-in-out. The header section of the form has the styles of background as #3498DB, width as 100%, height as 50px, line-height as 50px, color as #fff, and the logo is given a font style of uppercase to automatically convert the text to uppercase. The Learn More button is given a background color of #428bca. The sidebar list takes an animation of swing, in a hover event. Source: https://codepen.io/farhansiddiqui/pen/OJPvmgZ

Admin Menu

4.3.1
This is an example of a bootstrap support admin panel interface with hover effects, designed using HTML, CSS, and bootstrap framework 4. The icons, images, and fonts are imported to the code with their URLs. The logo is given the styles of background color as #45a7b9, font color as #fff, and font-size as 14px. The top menu is given a background color as #374249. The top menu items are given a font-size of 14px, and background color of #727b7f, that changes to #fff, in a hover event. The New Ticket icon is given the styles of font-size as 12px, border-radius as 50px to get the round shape, margin-left as 50px, padding as 10px 20px, text-transform style as uppercase to automatically convert the text to uppercase and a background color as #ec7b65, which changes to #f7826c in a hover event. The column heading has the styles of color as #aab4b5, font-size as 12px, font-weight as 700, and letter-spacing as 2px. The vertical menu items are given a font color as #aab3b5, which changes to #727c80 in a hover event. The message options links are also given a border of solid 2px #dfe4e6, which changes to solid 2px #32b287, in a hover event. Source: https://codepen.io/s8990/pen/MWYXQqZ
This is an example of a bootstrap admin panel interface with hover effects, designed using HTML, CSS, JavaScript, and bootstrap framework 4. The icons and 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 details in an orderly manner. JavaScript functions have been used to implement the toggle function and hover effects on the sidebar. The form is given a background color of #f5f5f5. The font-size of the sidebar items is set as 16px, whereas the content section has the styles of font-size as 16px, and line-height as 1.428571429. The header section of the form has the styles of background as #3498DB, width as 100%, height as 50px, line-height as 50px, color as #fff, and the logo is given a font style of uppercase to automatically convert the text to uppercase. The sidebar list takes an animation of swing, in a hover event. Source: https://codepen.io/esteghamat/pen/abzaQKO

Admin Panel

4.3.1
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter