Navbar Bootstrap 5Free+ CSS
Add a navbar to your UI with Bootstrap 5 background video snippets with header and footer. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.
4.9k views45 downloads
gosnippets.com/preview/bootstrap-5-background-video-snippets-with-header-and-footer
Source Code
1<nav class="navbar navbar-light bg-white navbar-expand-md">
2 <div class="container">
3 <a class="navbar-brand" href="#">
4 <img src="http://via.placeholder.com/102x30/007bff/ffffff?text=logo" height="30" alt="image">
5 </a>
6 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav3" aria-controls="navbarNav3" aria-expanded="false" aria-label="Toggle navigation">
7 <span class="navbar-toggler-icon"></span>
8 </button>
9 <div class="collapse navbar-collapse" id="navbarNav3">
10 <ul class="navbar-nav ms-auto">
11 <li class="nav-item active">
12 <a class="nav-link" href="#">Home <span class="visually-hidden">(current)</span></a>
13 </li>
14 <li class="nav-item">
15 <a class="nav-link" href="#">Features</a>
16 </li>
17 <li class="nav-item">
18 <a class="nav-link" href="#">Pricing</a>
19 </li>
20 <li class="nav-item">
21 <a class="nav-link" href="#">Team</a>
22 </li>
23 <li class="nav-item">
24 <a class="nav-link" href="#">About</a>
25 </li>
26 </ul>
27 <a class="btn btn-outline-dark ms-md-3" href="#">Button</a>
28 </div>
29 </div>
30</nav>
31<section class="ov-hidden pt-5 pb-5 bg-dark position-relative" style="min-height:100vh; background-image: url(https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80); background-size: cover;">
32
33 <!--video component -->
34 <video playsinline="" autoplay="true" muted="true" loop="true" poster="https://images.unsplash.com/photo-1486016006115-74a41448aea2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1347&q=80" id="bgvid">
35 <source src="https://bootstraptor.com/wp-content/uploads/2019/11/rainvideo.webm" type="video/webm">
36 <!--<source srcRA="rain.mp4" type="video/mp4">-->
37 </video>
38 <div class="bg-overlay"></div>
39
40 <div class="container pt-5 pb-5 position-relative">
41 <div class="row d-flex justify-content-between pt-lg-5 align-items-center">
42 <div class="col-xl-5 col-lg-6 col-md-7 text-center text-lg-start mb-5 mb-lg-0">
43 <h1 class="display-3 font-weight-bold text-white" data-aos="fade-up">Build better websites faster</h1>
44 <div class="my-4" data-aos="fade-up">
45 <p class="lead text-white">Lorem ipsum dolor sit amet, consectetur adipiscing eliterat sed sem sagittis cursus.</p>
46 </div>
47 <div class="d-flex justify-content-center justify-content-lg-start">
48 <div class="d-flex me-2">
49 <i class="fas fa-star fa-lg text-warning m-1"></i>
50 <i class="fas fa-star fa-lg text-warning m-1"></i>
51 <i class="fas fa-star fa-lg text-warning m-1"></i>
52 <i class="fas fa-star fa-lg text-warning m-1"></i>
53 <i class="fas fa-star fa-lg text-warning m-1"></i>
54 </div>
55 <span class="text-white">(Average score: 4.9/5)</span>
56 </div>
57 </div>
58 <div class="col">
59 <div class="row justify-content-center">
60 <div class="col-xl-8 col-md-10">
61 <form class="position-relative d-block">
62 <div class="mb-3">
63 <label class="text-white" for="course-name-1">Your Name</label>
64 <input name="course-name" id="course-name-1" type="text" class="form-control form-control-lg" placeholder="Type your name">
65 </div>
66 <div class="mb-3">
67 <label class="text-white" for="course-email-1">Email Address</label>
68 <input name="course-email" id="course-email-1" type="email" class="form-control form-control-lg" placeholder="you@yoursite.com">
69 </div>
70 <div class="mb-3">
71 <div class="row">
72 <div class="col-12">
73 <div class="mb-3 mb-1">
74 <label class="text-white">Skill Level:</label>
75 </div>
76 </div>
77 <div class="col">
78 <div class="mb-3 rounded bg-white p-2 border">
79 <div class="form-check">
80 <input type="radio" id="course-radio-beginner-1" name="course-radio-1" class="form-check-input">
81 <label class="form-check-label" for="course-radio-beginner-1">Beginner</label>
82 </div>
83 </div>
84 </div>
85 <div class="col">
86 <div class="mb-3 rounded bg-white p-2 border">
87 <div class="form-check">
88 <input type="radio" id="course-radio-advanced-1" name="course-radio-1" class="form-check-input">
89 <label class="form-check-label" for="course-radio-advanced-1">Advanced</label>
90 </div>
91 </div>
92 </div>
93 </div>
94 </div>
95 <div class="mb-3 text-center">
96 <button class="btn btn-lg btn-success w-100 mb-2" type="submit">Claim your free spot</button>
97 <small class="text-white">You’ll recieve your first lesson via email in less than a minute.</small>
98 </div>
99 </form>
100 </div>
101 </div>
102 </div>
103 </div>
104 </div>
105
106</section>
107<section class="pt-5 pb-5 bg-light" style="">
108 <div class="container pt-5 pb-5">
109 <div class="row d-flex justify-content-between">
110 <div class="col-md-6">
111 <h3 class=" display-4 font-weight-bold" data-aos="fade-up">Start building beautiful websites</h3>
112 <p class="lead mt-4" data-aos="fade-up">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
113 <div class="row row-grid">
114 <div class="col-xs-4 col-md-4 my-1 " data-aos="fade-up">
115 <img src="https://via.placeholder.com/150x45/ccc/ffffff&text=IMG LOGO" alt="" class="img-fluid">
116 </div>
117 <div class="col-xs-4 col-md-4 my-1" data-aos="fade-up">
118 <img src="https://via.placeholder.com/150x45/ccc/ffffff&text=IMG LOGO" alt="" class="img-fluid">
119 </div>
120 <div class="col-xs-4 col-md-4 my-1" data-aos="fade-up">
121 <img src="https://via.placeholder.com/150x45/ccc/ffffff&text=IMG LOGO" alt="" class="img-fluid">
122 </div>
123 </div>
124 </div>
125 <div class="col-md-5" data-aos="fade-up">
126 <div id="carouselExampleTestimonials" class="carousel slide" data-bs-ride="carousel">
127 <div class="carousel-inner">
128 <div class="carousel-item">
129 <div class="container-fluid">
130 <div class="row justify-content-center d-flex ">
131 <div class="col-md-12 card px-5 text-dark py-5">
132 <div class="d-flex justify-content-center justify-content-lg-start">
133 <div class="d-flex me-2">
134 <i class="fas fa-star text-warning me-1"></i>
135 <i class="fas fa-star text-warning me-1"></i>
136 <i class="fas fa-star text-warning me-1"></i>
137 <i class="fas fa-star text-warning me-1"></i>
138 <i class="fas fa-star text-warning me-1"></i>
139 </div>
140 </div>
141 <blockquote class="blockquote blockquote-reverse mt-4">
142 <p class="lead font-weight-bold mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing eliterat sed".</p>
143 <div class="mt-3 d-flex align-items-center pt-2">
144 <div class="me-3">
145 <img class="d-block img-fluid rounded-circle" src="https://via.placeholder.com/40x40/5fa9f8/ffffff " srcset="https://via.placeholder.com/120x120/5fa9f8/ffffff 2x" alt="user">
146 </div>
147 <div class="d-block">
148 <p class="mb-0">User Name</p>
149 <p class="small">Designer</p>
150 </div>
151 </div>
152 </blockquote>
153 </div>
154 </div>
155 </div>
156 </div>
157 <div class="carousel-item">
158 <div class="container-fluid">
159 <div class="row justify-content-center d-flex ">
160 <div class="col-md-12 card px-5 text-dark py-5">
161 <div class="d-flex justify-content-center justify-content-lg-start">
162 <div class="d-flex me-2">
163 <i class="fas fa-star text-warning me-1"></i>
164 <i class="fas fa-star text-warning me-1"></i>
165 <i class="fas fa-star text-warning me-1"></i>
166 <i class="fas fa-star text-warning me-1"></i>
167 <i class="fas fa-star text-warning me-1"></i>
168 </div>
169 </div>
170 <blockquote class="blockquote blockquote-reverse mt-4">
171 <p class="lead font-weight-bold mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing eliterat sed".</p>
172 <div class="mt-3 d-flex align-items-center pt-2">
173 <div class="me-3">
174 <img class="d-block img-fluid rounded-circle" src="https://via.placeholder.com/40x40/5fa9f8/ffffff " srcset="https://via.placeholder.com/120x120/5fa9f8/ffffff 2x" alt="user">
175 </div>
176 <div class="d-block">
177 <p class="mb-0">User Name</p>
178 <p class="small">Designer</p>
179 </div>
180 </div>
181 </blockquote>
182 </div>
183 </div>
184 </div>
185 </div>
186 <div class="carousel-item active">
187 <div class="container-fluid">
188 <div class="row justify-content-center d-flex ">
189 <div class="col-md-12 card px-5 text-dark py-5">
190 <div class="d-flex justify-content-center justify-content-lg-start">
191 <div class="d-flex me-2">
192 <i class="fas fa-star text-warning me-1"></i>
193 <i class="fas fa-star text-warning me-1"></i>
194 <i class="fas fa-star text-warning me-1"></i>
195 <i class="fas fa-star text-warning me-1"></i>
196 <i class="fas fa-star text-warning me-1"></i>
197 </div>
198 </div>
199 <blockquote class="blockquote blockquote-reverse mt-4">
200 <p class="lead font-weight-bold mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing eliterat sed".</p>
201 <div class="mt-3 d-flex align-items-center pt-2">
202 <div class="me-3">
203 <img class="d-block img-fluid rounded-circle" src="https://via.placeholder.com/40x40/5fa9f8/ffffff " srcset="https://via.placeholder.com/120x120/5fa9f8/ffffff 2x" alt="user">
204 </div>
205 <div class="d-block">
206 <p class="mb-0">User Name</p>
207 <p class="small">Designer</p>
208 </div>
209 </div>
210 </blockquote>
211 </div>
212 </div>
213 </div>
214 </div>
215 </div>
216 </div>
217 </div>
218 </div>
219 </div>
220</section>
221
222<section class="mb-0 mt-0">
223 <div class="footer text-white">
224 <div class=" bg-dark pt-5 pb-5">
225 <div class="container">
226 <div class="row mb-5">
227 <div class="col">
228 <div class="card card-body border-0 mb-0 bg-primary text-light px-md-5 py-md-4 shadow-lg" style="overflow:hidden" data-aos="zoom-out-down">
229 <div class="position-relative d-flex flex-column py-md-2 flex-md-row justify-content-between align-items-center">
230 <div class="h3 text-center mb-md-0">Start building beautiful websites</div>
231 <a href="#" class="btn btn-lg btn-light py-md-3 px-md-5 text-info font-weight-bold">
232 GET FREE TEMPLATE >>
233 </a>
234 </div>
235 </div>
236 </div>
237 </div>
238 <div class="row">
239 <div class="col-xs-6 col-sm-3">
240 <a href="#">
241 <svg class="d-block mb-4" width="36" height="36" viewBox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false">
242 <path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"></path>
243 <path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"></path>
244 </svg>
245 </a>
246 <address class="color-light-20">
247 1600 Amphitheatre Parkway
248 <br> Mountain View, CA 94043
249 </address>
250 <ul class="list-unstyled list-light">
251 <li>
252 <a href="#">Disclaimer</a>
253 </li>
254 </ul>
255 </div>
256 <div class="col-xs-6 col-sm-3">
257 <h4 class="my-2">Product</h4>
258 <ul class="list-unstyled list-light">
259 <li>
260 <a href="#">Pricing</a>
261 </li>
262 <li>
263 <a href="#">Features</a>
264 </li>
265 <li>
266 <a href="#">Customers</a>
267 </li>
268 <li>
269 <a href="#">Store</a>
270 </li>
271 </ul>
272 </div>
273 <br style="clear:both" class="hidden-sm-up">
274 <div class="col-xs-6 col-sm-3">
275 <h4 class="my-2">Company</h4>
276 <ul class="list-unstyled list-light">
277 <li>
278 <a href="#">About Us</a>
279 </li>
280 <li>
281 <a href="#">Blog</a>
282 </li>
283 <li>
284 <a href="#">Careers</a>
285 </li>
286 <li>
287 <a href="#">Press</a>
288 </li>
289 <li>
290 <a href="#">Events</a>
291 </li>
292 <li>
293 <a href="#">Contact</a>
294 </li>
295 </ul>
296 </div>
297 <div class="col-xs-6 col-sm-3">
298 <h4 class="my-2">Connect</h4>
299 <ul class="list-unstyled list-light">
300 <li>
301 <a href="#">Support</a>
302 </li>
303 <li>
304 <a href="#">Social</a>
305 </li>
306 <li>
307 <a href="#">Community</a>
308 </li>
309 </ul>
310 <p class="color-light mt-2">Stay up-to-date!</p>
311 <form>
312 <div class="mb-3">
313 <div class="input-group mb-3">
314 <input type="text" class="form-control form-control-sm" placeholder="Email" aria-label="Email" aria-describedby="basic-addon2">
315 <div class="">
316 <button class="btn btn-primary btn-sm" type="button">Ok</button>
317 </div>
318 </div>
319 </div>
320 </form>
321 </div>
322 </div>
323 <hr>
324 <div class="row f-flex justify-content-center" style="">
325 <div class="col text-center text-secondary my-1">
326 <p class="mt-2 text-white"> © Copyright 2019 • All Rights Reserved |
327 <a class=" " href="#">Disclaimer</a> |
328 <a class=" " href="#">Contact</a>
329 </p>
330 </div>
331 </div>
332 </div>
333 </div>
334 </div>
335</section>More Navbar snippets
Responsive Sidebar Navigation for Dashboard
Responsive Sidebar Navigation for Dashboard: a hand-crafted, open-source Bootstrap 5 navbar. HTML & CSS included, ready to copy.
NavbarView →
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.
NavbarView →
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.
NavbarView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.