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 another template for a web form with animated navigational tabs, designed using CSS and HTML. The tabs take a fill effect in hover and clicked events and the content section is placed above the tabs. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given the styles of padding as 18px, font size as 14px, text-align as center, background color as #272e38, font color as #fff, a border-bottom-color of #6676ff, a border of 15px solid transparent, and position as relative. In a hover or a clicked event, the tabs get filled with #6676ff color with a transition value of all 0.20s ease 0s. The tab content section is given the styles of padding as 20px, font size as 14px, line-height as 25px, font color as #fff, and background color as #333.

Tab style 14

4.3.1
This is another template for a web form with animated navigational tabs, designed using CSS and HTML. The tabs take a fill effect in hover and clicked events. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The form background has been given the color of #eee. The tabs are initially given the styles of padding as 10px 15px, font size as 16px, font-weight as 700, font color as #999, border-radius as 50px to make them circular, and position as relative. In a hover or a clicked event, the tabs get filled with #ffa399 color and change the font color to #fff. The tab content section is given the styles of padding as 5px 20px, font size as 14px, line-height as 25px, font color as #686868, and text-align as left.

Tab style 13

4.3.1
This is another example of a web form with animated navigational tabs and a tab panel, designed using CSS and HTML. The tab panel buttons act as radio buttons in a clicked event. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The border of the panel is set with 5px solid #593082 The tabs are initially given the styles of padding as 10px, border as 2px solid #593082, margin as 0 5px 30px 0, font size as 20px, font-weight as 700, font color as #593082, background color as #fff, text-align as center, text-transform as uppercase to automatically transform it to uppercase, and position as relative In a clicked event, the panel button takes the color of #aee800 with a box shadow of 0 0 3px 1px rgba(0, 0, 0, 0.25) and a transformation value of scale(2) .The tab content section is given the styles of padding as 20px, font size as 15px, line-height as 30px, background color as #fff, and the font color as #7a9181. The transition value for the effect is set as all 0.3s ease.

Tab style 12

4.3.1
This is another template for a web form with animated navigational tabs, designed using CSS and HTML. The buttons take both a color transform and a pointer effect in hover and clicked events. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given a border-bottom of 2px solid #e8e8e8. It has the styles of padding as 10px 20px, margin as 0 5px 1px 0, font size as 20px, font-weight as 700, background color as #fff, font color as #112529, text-align as center, text-transform as uppercase to automatically transform it to uppercase, and position as relative. In a clicked event, the tab takes the color of #198df8 and points at the content section. The tab content section is given the styles of padding as 30px 20px 20px, font size as 15px, line-height as 25px, border-radius as 0 0 5px 5px, background color as #fff, and text color as #7a9181.

Tab style 11

4.3.1
This is another example of a web form with animated navigational tabs and a tab panel, designed using CSS and HTML. Both tab and tab panel takes a fill effect in a clicked event. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given the styles of padding as 7px 15px, margin as 0 0 25px 0, font size as 20px, font-weight as 700, font color as #523f38, background color as #fff, border as 1px solid #d3d3d3, text-transform as uppercase to automatically transform it to uppercase, and position as relative. The tab buttons get filled with the color #3ea1b3 in a clicked event whereas the tab panel buttons get filled with #ec9a29.The tab content section is given the styles of padding as 10px 15px, font size as 15px, line-height as 30px, background color as #fff, and the font color as #777. The transition value for the effect is set as all 0.3s ease 0s.

Tab style 10

4.3.1
This is another example of a web form with animated navigational tabs, designed using CSS and HTML. The buttons take a fill effect in two colors in a clicked event. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given the styles of padding as 20px 30px, margin as 0 10px 0 0, font size as 18px, font-weight as 700, font color as #000, background color as #fcfcfc, border as 1px solid #eee, text-transform as uppercase to automatically transform it to uppercase, and position as relative. The tab content section is given the styles of padding as 20px 40px, font size as 15px, letter-spacing as 1px, line-height as 30px, background color as #cdb230, and a border as 7px double #000. In a clicked event, the tab first gets filled with #333 color with a transition value of all 0.8s ease-out 0s and then with #000 with a transition value of all 0.4s ease-in 0.3s

Tab style 9

4.3.1
This is another template for a web form with animated navigational tabs, designed using CSS and HTML. The buttons take both a color transform and a select effect in hover and clicked events. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given the styles of padding as 5px 10px, margin as 0 10px 20px 0, font size as 20px, font-weight as 700, font color as #444bba, text-transform as uppercase to automatically transform it to uppercase, and position as relative. In a hover and clicked event, the tab takes the color of #e16a46The tab content section is given the styles of padding as 15px, font size as 15px, letter-spacing as 1px, line-height as 25px, background color as #e16a46, border of 5px dashed #fff and text color as #fff.

Tab style 8

4.3.1
This is another template for a web form with animated navigational tabs, designed using CSS and HTML. The buttons take both a fill effect in hover and clicked events. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given the styles of padding as 15px 25px, font size as 17px, font-weight as 800, font color as #000, text-transform as uppercase to automatically transform it to uppercase, and position as relative. It is also given a background color of #f1e9de and a skew value of skewX(15deg) to arrange it in a tilted way. In a clicked or a hover event, the tab gets filled with #e94b35 color and a border in the color of #000 is also added. The tab content section is given the styles of padding as 20px 30px, font size as 15px, letter-spacing as 1px, line-height as 27px, background color as #b59972, and also a skew value of ewX(-5deg)to tilt it.

Tab style 8

4.3.1
This is another example of a web form with animated navigational tabs, designed using CSS and HTML. The buttons take both a fill effect and a border effect in hover and clicked events. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given the styles of padding as 10px 20px, font size as 17px, font-weight as 600, font color as #fff, background color as #f8333c, border top and bottom as 3px solid #f8333c to highlight the corners, and text-transform as uppercase to automatically transform it to uppercase, and position as relative. The tab content section is given the styles of padding as 20px 30px, font size as 17px, letter-spacing as 1px, line-height as 30px, background color as #384d48, and border top and bottom as 3px solid #384d48. The tabs get filled with white color and its text change to red color with a transition of all 0.3s ease 0s0f4c5c, in clicked and hover events.

Tab style 7

4.3.1
This is another template for a web form with animated navigational tabs, designed using CSS and HTML. The buttons take both a fill effect and an expanding effect in hover and clicked events. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given the styles of padding as 12px 20px, font size as 18px, font-weight as 700, font color as #4f000b, background color as #fff, text-transform as uppercase to automatically transform it to uppercase, and position as relative. The tab content section is given the styles of padding as 20px 35px, font size as 15px, letter-spacing as 1px, line-height as 25px, background color as #da7635, and text color as #fff. The tabs get filled with white color (#fff) and take a transformation effect of scale(1.2) and a transition of all 0.5s ease 0s in clicked and hover events.

Tab style 6

4.3.1
This is another template for a web form with animated navigational tabs, designed using CSS and HTML. The buttons take both a fill effect and a border effect in hover and clicked events. Bootstrap styles have been imported to the code. The Li element of lists has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given the styles of padding as 10px 20px, font size as 17px, font-weight as 600, font color as #fcd0a1, background color as #0f4c5c, text-transform as uppercase to automatically transform it to uppercase, and position as relative. The tab content section is given the styles of padding as 30px, font size as 17px, letter-spacing as 1px, line-height as 30px, background color as #0f4c5c, outline of 3px solid #fcd0a1, and text color as #fcd0a1. The tabs get filled with the red color of #9a031e and take a border of #0f4c5c in clicked and hover events.

Tab style 5

4.3.1
This is another example of a web form with animated navigational tabs, designed using CSS and HTML. The buttons take a shadow effect in hover and clicked events. Bootstrap styles have been imported to the code. The Li element of the ul class has been used to display the buttons in a list and the element tab panel has been used to avoid styling more than one tab at a time. The tabs are initially given a border with the value of 1px solid #5d001e and also the styles of font size as 18px, font-weight as 700, color as #5d001e, font color as #fff, box-shadow of 5px 5px 0 0 #fcca89, background as transparent, and position as relative. The tabs take a shadow effect with the values of -5px -5px 0 0 #fcca89 and takes the color white, in a clicked and focus event with a transition value of all 0.5s ease 0s. The tab content section is given the styles of padding as 20px, font size as 15px, letter-spacing as 1px, line-height as 25px, background color as #fcca89, and text color as #5d001e.

Tab style 4

4.3.1
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter