Add a navbar to your UI with Bootstrap 5 comment section with navbar snippets. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
1<nav class="navbar navbar-expand-sm navbar-dark"> <img src="https://i.imgur.com/CFpa3nK.jpg" width="20" height="20" class="d-inline-block align-top rounded-circle" alt=""> <a class="navbar-brand ms-2" href="#" data-abc="true">Rib Simpson</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
2 <div class="end">
3 <div class="collapse navbar-collapse" id="navbarColor02">
4 <ul class="navbar-nav">
5 <li class="nav-item"> <a class="nav-link" href="#" data-abc="true">Work</a> </li>
6 <li class="nav-item"> <a class="nav-link" href="#" data-abc="true">Capabilities</a> </li>
7 <li class="nav-item "> <a class="nav-link" href="#" data-abc="true">Articles</a> </li>
8 <li class="nav-item active"> <a class="nav-link mt-2" href="#" data-abc="true" id="clicked">Contact<span class="visually-hidden">(current)</span></a> </li>
9 </ul>
10 </div>
11 </div>
12</nav>
13<!-- Main Body -->
14<section>
15 <div class="container">
16 <div class="row">
17 <div class="col-sm-5 col-md-6 col-12 pb-4">
18 <h1>Comments</h1>
19 <div class="comment mt-4 text-justify float-start"> <img src="https://i.imgur.com/yTFUilP.jpg" alt="" class="rounded-circle" width="40" height="40">
20 <h4>Jhon Doe</h4> <span>- 20 October, 2020</span> <br>
21 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus numquam assumenda hic aliquam vero sequi velit molestias doloremque molestiae dicta?</p>
22 </div>
23 <div class="text-justify darker mt-4 float-end"> <img src="https://i.imgur.com/CFpa3nK.jpg" alt="" class="rounded-circle" width="40" height="40">
24 <h4>Rob Simpson</h4> <span>- 20 October, 2020</span> <br>
25 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus numquam assumenda hic aliquam vero sequi velit molestias doloremque molestiae dicta?</p>
26 </div>
27 <div class="comment mt-4 text-justify"> <img src="https://i.imgur.com/yTFUilP.jpg" alt="" class="rounded-circle" width="40" height="40">
28 <h4>Jhon Doe</h4> <span>- 20 October, 2020</span> <br>
29 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus numquam assumenda hic aliquam vero sequi velit molestias doloremque molestiae dicta?</p>
30 </div>
31 <div class="darker mt-4 text-justify"> <img src="https://i.imgur.com/CFpa3nK.jpg" alt="" class="rounded-circle" width="40" height="40">
32 <h4>Rob Simpson</h4> <span>- 20 October, 2020</span> <br>
33 <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusamus numquam assumenda hic aliquam vero sequi velit molestias doloremque molestiae dicta?</p>
34 </div>
35 </div>
36 <div class="col-lg-4 col-md-5 col-sm-4 offset-md-1 offset-sm-1 col-12 mt-4">
37 <form id="algin-form">
38 <div class="mb-3">
39 <h4>Leave a comment</h4> <label for="message">Message</label> <textarea name="msg" id="" msg cols="30" rows="5" class="form-control" style="background-color: black;"></textarea>
40 </div>
41 <div class="mb-3"> <label for="name">Name</label> <input type="text" name="name" id="fullname" class="form-control"> </div>
42 <div class="mb-3"> <label for="email">Email</label> <input type="text" name="email" id="email" class="form-control"> </div>
43 <div class="mb-3">
44 <p class="text-secondary">If you have a <a href="#" class="alert-link">gravatar account</a> your address will be used to display your profile picture.</p>
45 </div>
46 <div class="d-flex flex-wrap align-items-center"> <input type="checkbox" name="check" id="checkbx" class="me-1"> <label for="subscribe">Subscribe me to the newlettter</label> </div>
47 <div class="mb-3"> <button type="button" id="post" class="btn">Post Comment</button> </div>
48 </form>
49 </div>
50 </div>
51 </div>
52</section>
Responsive Sidebar Navigation for Dashboard
Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
Bootstrap Transparent navbar example
Bootstrap Transparent navbar example — a free Bootstrap 5 navbar snippet. Copy the HTML, CSS & JS and paste straight into your Bootstrap 5 project.
Bootstrap 5 e-commerce navigation with product snippet
Bootstrap 5 e-commerce navigation with product snippet: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
Hand-crafted Tailwind CSS components — HTML or React, copy-paste ready, with live previews. Free forever, MIT licensed, no sign-up to use.
24
Components
13
Views
6
Likes
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.