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.

This is an elegantly done footer for your website. This can be used to display additional information like the contact links, quick links, page links, and other search-related links. Additionally, it has the email section link to send the email, links to media sites with the copyright information with social media site links. The slot for displaying the visa and master card for payment option is an addition to your footer design. It uses bootstrap 4 and font-awesome, for its styling. The styling is simply made to fit in the footer design.

This is a simple responsive bootstrap 4 footer using font awesome; this can be adapted to have 3 columns with the quick links added. You can have the contacts, company information and quick links added instead. You can change the headings accordingly, the CSS used is the perfect match. The responsive behavior is due to the @media screens, added to CSS. Check it out for yourself the view in small screen devices. The Copyright, social media site links are well placed. You could use this snippet to add in your website with changing the links and the names for quick links.

This is a basic design of search box for bootstrap but yet it is efficient enough to serve our purpose. For a website search box is an essential component, so it’s very important to be simple yet styles correctly to match your website. This uses bootstrap 4 and font awesome CSS files. In HTML .input-groups are used, which is class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text", along with this you can use .input-group-prepend to add the help text in front of the input, and .input-group-append to add it behind the input. Here to search we are using .has-search which is not in Bootstrap 4. Check out the CSS styling for the search button. This design is ideal to have it on a page. To have it on the header you will have to tweak it a bit.

This is an example of a List of Notes with animation styles on it using only CSS and HTML. To have the labels rotate sideways, class transform has been used with the value of rotating (-40deg) to rotate it 400 from right bottom to the top. The class hover in the CSS style has been used to apply the styles for the hovered div in the HTML. Focus class in CSS styles is used to apply the styles for the selected div. The effect of pulling up the label has been accomplished with the use of shadow in the div. Source: https://codepen.io/JeonghwanKim/pen/IhsdC