Bootstrap 5 background video snippets with header and footer

Loading…
Bootstrap 5 background video snippets with header and footer | GoSnippets
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&rsquo;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"> &copy; Copyright 2019 &bull; 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>
Bootstrap 5 background video snippets with header and footer

Source Code

More Navbar snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery
