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 timeline view with four responsive panels designed using HTML and CSS. The panels consist of a background image and will be visible with the mouse hover event. The body has the styles of font-family as 'Source Sans Pro', Helvetica Neue, Helvetica, Arial, sans-serif, font size as 16px and line-height as 1.75. The timeline has the styles of the display as flex, background color as #031625 and the mouse hover has been implemented by adding the styles of width as 23.3333% on the mouse hover. The class of tl-item has the styles of transform as translate3d(0, 0, 0), position as relative, width as 25%, height as 100vh, min-height as 600px, color as #fff, overflow as hidden and transition as width 0.5s ease. To apply the transition effects, the value has been set as translate3d (0, 0, 0). The year is set with the styles of position as absolute, top and left as 50%, transform as translateX(-50%) translateY(-50%) and z-index as 1. Source: https://codepen.io/jeffglenn/pen/KNYoKa
This is a template for a timeline view designed with CSS, HTML, and JavaScript. The timeline elements have been implemented with the use of lists and the timeline has been designed as a bulleted list with the use of UL. In the CSS file, variables are declared after @ element to avoid repeating the same value. The body has the styles of font size as 16px and font family as 'Lato', sans-serif. The background color of the content is set to light green with the code #67CC8E. JavaScript functions have been created and used to check the location of the last element and make the hidden data sections visible as the user scrolls down. The hidden class will be added dynamically and the hidden class consists of the style of opacity element with its value set to 0. Source: https://codepen.io/ArnaudBalland/pen/rLeQgd
This is a sample example of displaying the timeline with the use of HTML, CSS, and JavaScript. The timeline has been implemented with the use of div and the timeline view has been implemented with CSS styles. The wrapper class has the styles of background color as #42A5F5, width as 100%, min-height as 100vh, height as 100%, font as normal 16px/26px Open Sans Condensed, sans-serif, color as #fff, padding as 100px 20px 200px and box-sizing as border-box. The JavaScript function has been created to apply the scroll and check for the fade. The JavaScript function removeClass removes the current classes of style whereas addClass function appends the new classes of styles to the elements dynamically. Each timeline section has the styles of background color as #f4f4f4, color as #777, padding as 15px, margin as 60px 20px, width as 300px, position as relative, border-radius as 4px and transition as all 0.3s ease-in-out. Source: https://codepen.io/rprajapatii/pen/AXoWyd
This is an example of displaying the timeline in a card view with the use of HTML and CSS. The Main div consists of two different divs. One is to display the title section or the header section and the other one to display the timeline. The heading is set with the h3 element with the styles of font-family as inherit, font size as 2rem, line spacing as 0.1rem, color as #fff, font-weight as normal, and margin as 0. The timeline has the styles of padding as 3rem 2rem !important, margin as 0, padding as 0, list-style as none, position as relative, z-index as 2, content as empty, position as absolute, width as 4px, background as #fff, top as 0, right as auto, left as 25px, height as 100%, z-index as -1 and box-shadow as 0 0 8px rgba(0,0,0,0.085), 0 1px 0 rgba(0,0,0,0.02). The time dot has been implemented with height and width as 1.5rem, background as #fff, border-radius as 2rem, flex as 0 0 1.5rem and box-shadow as 0 0 8px $green. Source: https://codepen.io/hello-ajayrawat/pen/EvxNbm
This is an example of a responsive timeline designed using HTML and CSS. The timeline elements have been implemented with the use of lists and the timeline has been designed as a bulleted list with the use of UL. The timeline style class is appended to the UL element. The main styles which are implemented under timeline class are line-height as 1.4em, list-style as none, margin as 0, padding as 0, width as 100% and h2 to h6 with line-height as inherit value. Media queries have been used in the CSS to make the timeline responsive by setting the min-width as 768px, and min-width as 992px. To apply the mouse hover event on the timeline marker, the hover event has been used in the CSS with the background value set as #FF6B6B. The CSS variables have been declared after the "@" mark which helps to reuse it in several places other than setting the value repeatedly. Source: https://codepen.io/brady_wright/pen/NNOvrW
This is an advanced timeline template with an extend option, designed with HTML, CSS, and JavaScript. The timeline elements have been implemented with the use of lists and the timeline has been designed as a bulleted list with the use of UL. The body is designed with the styles of margin as 0, padding as 0, background color as #ff6d6d and font-family as Arial. The box class that displays the timeline data has the styles of margin as 0 10%, height as 630px, overflow as hidden and padding as 10px 0 40px 60px. The JavaScript functions have been used to implement the on click functions by adding the style classes dynamically. To hide the data section until a click event, the display element of CSS is set as whereas to display the data section after a click event, the display element is set as block. Source: https://codepen.io/mo7amedk7alid29/pen/dRoMwo
This is an example of a timeline view with animations, designed with HTML, CSS, and JavaScript. The timeline elements have been implemented with the use of lists and the timeline has been designed as a bulleted list with the use of UL. The clock element has been implemented separately in a div and it has been set on the timeline data, based on the click event. JavaScript function hover on click has been created to add the styles dynamically on the click event. For each timeline event class, the styles are added with values top as 100px for the first child, left as 50%, and margin-left as @eventWidth*0.04.The JavaScript function removeClass removes the current classes of style whereas addClass function appends the new classes of styles to the elements dynamically. Source: https://codepen.io/jtholloran/pen/JuLjg
This is a template of a timeline view designed with HTML and CSS. It is primarily designed using the concept of ‘lists'. The body of the timeline is designed with CSS with its values set as background to #252827 and font size to 16px. The timeline styles are applied to the UL element with the class name ‘timeline'. The styles added to the timeline class are border-left as @line solid @color-primary, border-bottom right radius as @radius, border-top right radius as @radius, background as fade(@color-light, 3%), color as fade(white, 80%), font family as @font-text, margin as @spacing auto, letter-spacing as 0.5px, position as relative, line-height as 1.4em, font size as 1.03em, padding as @spacing, list-style as none, text-align as left, font-weight as 100 and max-width as 30%. The hover event has been implemented in the CSS with a hover class by adding the color as @color-light, background as @color-primary, and border-bottom as .35em solid black. Source: https://codepen.io/alanhouser/pen/aErrQJ
This is a template of a more detailed registration form designed with HTML and CSS. The bootstrap CSS file has been imported to the HTML file to use the inbuilt styles in bootstrap with the use of the ‘link' element and the bootstrap JS file has been imported with the use of ‘script' element. The text fields have been implemented with the use of the input element with its type set as text as well as placeholders to display a hint of the expected output. The icons have been implemented with the span element by setting the class value as glyphicon glyphicon-user blue. Mouse hover effect has been implemented with the hover class in the li element by setting the background color as #C8C8C8. The button elements have been implemented with the use of button element and class value has been used as btn btn-large btn-danger. Source: https://bootsnipp.com/snippets/GX4aP
This is a classic example of a registration page with validation designed with HTML, CSS, and JavaScript. Text field has been implemented with the use of the input element with its type set as text. The background image has been set with the CSS styles by adding the image URL and background-size as cover in the CSS body section. The styles of the form are set to max-width as 530px, padding as 15px, margin as 0 auto, border-radius as 0.3em, and background color as #f2f2f2. The heading h2 has the styles of font-family as 'Open Sans', sans-serif, font size as 40px, font-weight as 600, color as #000000, margin-top as 5%, text-align as center, and letter spacing as 4px. The text transform element is set as uppercase to automatically transform the text to uppercase. JavaScript is used to validate the input fields and display messages if the required fields are left empty or char values are entered into numerical fields upon submitting. Source: https://bootsnipp.com/snippets/z8b1X
This is a template of a registration page with the terms and conditions section, designed using HTML and CSS. Bootstrap and jquery files are imported to add the respective styles such as bootstrap grid view. Placeholders are used to display a hint of the expected output in input fields. The input type ‘text' has been used for the text fields whereas the ‘Select' element has been used in the Choose field to select options from the dropdown list. The ‘label' element has been used to display the span values. The button element has been used to display the button with the value of image style set as 100%. The image URL has been added to display the image in the background. A validating element has been added on the submit button to avoid submitting without ticking the checkbox. Source: https://bootsnipp.com/snippets/yN1EV
This is an example of a sign-up form designed with HTML and CSS. The input type ‘text' has been used for the text fields. Placeholders have been used to display a hint of the expected output in input fields. ‘Select' element has been used in Phone number and Job type fields to select options from a dropdown list. The "font-awesome" style sheet has been imported and used the list element with the class value of fa fa-envelope. The class divider text has the styles of position as relative, text-align as center, margin-top as 15px, and margin-bottom as 15px. The span has the styles of padding as 7px, font size as 12px, position as relative, and z-index as 2. The styles will be appended to the text fields after the load with the styles of content as empty, a position as absolute, width as 100%, border-bottom as 1px solid #ddd, top as 55%, left as 0 and z-index as 1. Source: https://bootsnipp.com/snippets/z8699
WE WILL NEVER SEND YOU SPAM, PROMISE

Subscribe for our newsletter