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 the footer section of a website with pure CSS. CSS style has been used with the background element to apply a background color to the footer section. The background color is set to a dark shade of gray with the value of #1c1c1c and the font color to white with #fff. A href element is used to mount the mobile number where the prefix tel: is appended to link the number to a mobile application on the user device. Likewise, the prefix mailto: has been used to link it with an email id and redirect to an email application on click.
Another classic example to create the footer section of a website with only CSS and HTML. Img element in HTML has been used to display the given image. CSS styles have been used to apply the mouse hover effects for the elements. Background element is used to change the color of the elements whereas transition element is used to apply the effect of “ease in”. The complete footer section is set to have the background color value of #272272, a medium blue. Border bottom style is used with the use of the value of 1px dotted #e4e9f0 to create the dotted line in the footer and its color set to light green.
This is an example of the implementation of the footer section on websites with pure CSS. The image element has been used to display the image on the footer section. The font awesome style sheet has been used to apply the icons and font styles to the text .The CSS styles has been used to apply the colors for the text using span and a href. The CSS element of color is used to apply different colors to the text as well as the media query string to apply responsive style for the footer. The background of the footer section has the value of #292c2f which is a dark blue color whereas the display style value has been set for an inline-block to display the href elements in a single horizontal line.
This is another example of the design of the footer section with the use of pure CSS. The font awesome icons are used to display the icons as well as LI icons. The mouse hover event is implemented by using the hover event. The footer section is set to have a background color of a shade of dark gray with #222 and its border to a shade of light brown of #b78c33. CSS style of text transform has been used with its value as uppercase to convert the text to uppercase as well as the border-radius value of 50% to make the social media icons circular.
This is an example of the implementation of a top navigation bar and a footer section for a website with CSS and HTML. Bootstrap library and bootstrap style sheets have been imported to the code with the use of its grid view elements to separate and organize the displaying sections. All the icons that are displayed in the example are used with the integration of the font awesome icons. The basic styles such as background color, buttons, and labels have been used with pure CSS implementation. The background color of the top bar is set as black and in order to place the social media icons in a row, the display style is set as inline-block, font color as white and the font size as 25px.
This is a simple example for the footer section of a website with pure CSS and HTML. The bootstrap style sheets are imported to the code and used with its grid view elements to separate and organize the displaying sections. The concept of Lists has been used with UL and LI components. The font awesome style sheet is used to display the icons. UL element has been used with the child elements of LI to display the unordered list. Background color has been set to a shade of maroon with rgb (71, 32, 29).
This is an example from right to left list which can be used in a list, navigation bar, footer and to display the items. Design from right to left makes sure your website follows the same design. The list items are placed in container-fluid giving it appropriate responsive behavior, The CSS is simple and keeps the list simple along with it, providing the hovering property to the links. Check out the responsive behavior, which gives an appropriate look to this design while it is viewed in smaller screens.
This is one of the best footer examples for the websites reading right to left. Divided into 3 columns, extreme right displays the company information, followed by the contact details on the company, and extreme left is the contact information along with appropriate social media. Check out the extra add-ons at the bottom link copyright information. If you are planning for this kind of footer then have a look at CSS which provides the style of right to left for all the components of the footer. This is even responsive and is great when it displays itself on smaller screens. If you are planning to use this make sure your website is also right-aligned and is normally read from right to left.
This footer is made up of bootstrap and is one of the best examples of responsive footer with the company information on the right and the links displayed on the quick links, categories and main categories. The copyright information is perfectly displayed at the bottom of the page. This can be used as a fixed or sticky footer at the bottom of the page. Check the responsiveness, displaying on the smaller screens it will stack all the columns on the top of other, this would allow it to display the complete information at the end of the page. You this footer design for an elegant website looks.
You want a disclaimer below the screens then this is the perfect footer design for you. Disclaimer visible equally well in smaller and larger screens it is made up of five divisions with the social links attached to it. Along with it, the copyright information is displayed at the bottom of the page. This can be used in a website related to big organization or financial sites or eCommerce sites. Hover your mouse over these links and social links you would see the gradient color set using CSS. CSS is pretty simple and well used for this design.
For any design to be beautiful, the space utilization is most important along with the perfect match of icons and fonts. This is the smooth looking footer example with the rich look and feel, like in any apple products. Footer space is divided well with the company information on the left side. Company links in the middle of the page, and links newsletters and search space on the extreme right side. This is created using bootstrap 4, by placing the columns and rows in the container. This design does not suffice, if not used in smaller screen devices. It is very well responsive, a check is a design adjusts on top of another like a stack, once you are in smaller screens.
This is a stylish footer created to match your website. It uses the bootstrap 4 and font awesome CSS for styling, It is divided into 4 columns and under each column, you have links for the quick links. Check out the find us column which displays the information of contacts like phone and email. Others are quick links with the links of pages in the forum and you have the follow us links linking to their pages on the website or the social media sites. Additionally, the navigation page is also displayed in the footer. The copyright and social media icons are perfectly located at the middle bottom of the page.

Subscribe for our newsletter