This is an example of a Like, Comment, and Share section, designed using HTML, CSS, and Bootstrap framework 4. The profile images are imported to the code with the URL, and defined as rounded-circle in HTML. The body of the form is given a background color as #eee. The dateline is given a font-size as 11px, whereas the font-size of the comment text is defined as 12px. The Like, Comment and Share texts are also given a font-size as 12px. The name title is given a background color as #007bff. The cursor style for the form is set as pointer to get the hand cursor effect in a hover event. The Like, Comment and Share text turns to blue color, in a hover event. Two primary type buttons are also included in the form to post the comment and cancel the comment. Source: https://bbbootstrap.com/snippets/bootstrap-like-comment-share-section-comment-box-63008805

This is another example of a comment section with rating stars, designed using HTML, CSS, and Bootstrap framework 4. The profile image and font styles are imported to the code with the URLs. The rating stars are created as radio buttons. The body of the form is given the styles of display as grid, place-items as center to place the card in the center, font-family as 'Manrope', sans-serif, and background as red. The comment card is given a width as 450px, and a border-radius as 6px. The text area is given a border as 1px solid #ad9f9f. The send button is given a background color as #ff0000, which changes to #f50202, in a hover event. The rating buttons are given a cursor style as pointer to get the hand cursor effect in a hover event. The rating icons take a fill effect of #ff0000, in hover and active events. Source: https://bbbootstrap.com/snippets/bootstrap-comment-section-form-ratings-98792632

This is an example of a comment section in a modal format, designed using HTML, CSS, and Bootstrap framework 4. The Comment section is hidden within the modal and will be shown after pressing the button on the modal. The fonts and images are imported to the code with their URLs. The body of the form is given the styles of display as grid, place-items as center to place the modal in the center of the form, font-family as 'Manrope', sans-serif, and background as #000. The model button is created as a danger type button. The rating stars are created as radio buttons. The comment section is given a border value of 1px solid #ff0000. The send message button is given the styles of font color as #fff, and background-color as #ff000. In a hover event, the background color of the button changes to #f50202. The rating icons are created to take a fill effect of #ff0000, in hover and active events. Source: https://bbbootstrap.com/snippets/bootstrap-modal-comment-section-rating-12857455

This is an example of a rating bar with hover effects, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. Media quarries have been used to increase the responsiveness of the form, and the JavaScript functions have been used to implement the rating function. The body of the form is given a background color of #000000. The background color of the rating bar is set as #fbedd9, which changes to #EDB867, in a hover event or while rating. The current rating is also indicated by the #EDB867 fill color effect. The rating bar is given the styles of display as block, width as 12px, padding as 5px 0, height as 28px, and float as left. The current rating value is indicated with the styles of font-size as 20px, line-height as 2, float as left, padding as 0 20px 0 20px, and font-weight as 400. Source: https://bbbootstrap.com/snippets/bar-rating-1-10-97482935

This is another example of a user timeline with profile image, designed using HTML, CSS, and Bootstrap framework 4. The font styles and images are imported to the code with their URLs. The body of the form is given the styles of background-color as #D32F2F, and font-family as 'Calibri', sans-serif. The profile image is given a border-radius of 100%. Some labels are given a background color of #1976d2, whereas some are given the default color of success. The label is given the styles of padding as 3px 10px, line-height as 13px, color as #ffffff, font-weight as 400, border-radius as 4px, and font-size as 75. The user card is given a box-shadow of 0px 5px 20px rgba(0, 0, 0, 0.05). The user section is given a cursor style as pointer to get the hand cursor effect in a hover event whereas the background of the card also changes to rgba(0, 0, 0, 0.02), in a hover event. Source: https://bbbootstrap.com/snippets/bootstrap-user-timeline-profile-image-47156152

This is an example of a scrollable timeline with time, designed using CSS, HTML, and Bootstrap framework 4. The form is given a background color as #eee. The timeline card is given the styles of position as relative, display as flex, flex-direction as column, background-color as #fff, border as 1px solid rgba(26, 54, 126, 0.125), and border-radius as .25rem.The timeline is given a height of 100%, a width of 4px, and a background color as #e9ecef. The timeline title has the styles of font-size as .8rem, text-transform as uppercase to convert the first letter of each word to uppercase, margin as 0 0 .5rem, and font-weight as bold. The content section of the timeline is given a font-size as .7619rem, and font color as #adb5bd. A scrollbar is given to scroll through the timeline. The dates are indicated with a set of primary, success, warning, and danger badges, which are defined in the HTML. Source: https://bbbootstrap.com/snippets/scrollable-user-timeline-time-12654784

This is an example of a user timeline web form, designed using HTML, CSS, and Bootstrap framework 4. The avatar images are imported to the code with their URLs. The body of the form is given a background color of #f9f9fa. The image circle is given a border radius as 500px. Some of the icons are given a background color of #f4c414 linear-gradient(45deg, #f4c414, #f45414), and a font color of #fff. The timeline is displayed using the background color of rgba(160, 175, 185, .15). The timeline card is given the styles of background as #fff, border-radius as .25rem, box-shadow as 0 1px 3px rgba(0, 0, 0, .05), and as margin-bottom: 1.5rem. The avatar is given a border radius of 500px, font-weight of 700, and box-shadow as 0 5px 10px 0 rgba(50, 50, 50, .15). The links and profile circles are given an underline effect to take place in a hover event. Media quarries are used to increase the responsiveness of the form. Source: https://bbbootstrap.com/snippets/user-timeline-avatar-92172382

This is an example of a login form with Facebook and Google sign-in links, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The icons, background image, and the card image are imported to the code with their URLs. JavaScript functions are used to implement the click functions of the input text fields. The form container has the styles of width as 450px, height as 550px, background-color as white, top as 50px, left as 35%, box-shadow a 0 0 20px black, and border-radius as 8px. The card image is given a width of 50px, and a height of 150px. The text of the form is given the styles of font-size as 25px, font-family as 'Roboto Slab', serif, text-alignment as center, and position as relative. The font-size of the input text fields are set to 20px, with the margin-bottom style set as 15px. In a hover event, the background color of the input fields turns to gainsboro, whereas in a focus event, the fields take a box shadow effect of 0 0 10px green. The cursor style for the login button is set as pointer to get the hand cursor effect. The Facebook and Google sign-in buttons also take their respective colors as their background color, in a hover event. Source: https://bbbootstrap.com/snippets/login-form-facebook-and-google-link-26654961