Carousels Bootstrap 5Free+ CSS
Bootstrap 5 sign up form snippets with auto carousel…: a hand-crafted, open-source Bootstrap 5 carousel. HTML & CSS included, ready to copy.
2.2k views41 downloads
gosnippets.com/preview/bootstrap-5-sign-up-form-snippets-with-auto-carousel…
Source Code
1<div class="container-fluid px-2 px-md-4 py-5 mx-auto">
2 <div class="card card0 border-0">
3 <div class="row d-flex">
4 <div class="col-lg-5">
5 <div class="card1 pb-5">
6 <div class="row px-3">
7 <h5 class="logo"><u>GoSnippets</u></h5>
8 </div>
9 <div class="row px-3 justify-content-center mt-4 mb-5">
10 <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
11 <ol class="carousel-indicators">
12 <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" id="li1"></li>
13 <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" id="li2"></li>
14 <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" id="li3" class="active"></li>
15 <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" id="li4"></li>
16 <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4" id="li5"></li>
17 </ol>
18 <div class="carousel-inner">
19 <div class="carousel-item card border-0 card-0">
20 <div class="text-center"> <img src="https://i.imgur.com/IjkibdE.jpg" class="img-fluid profile-pic"> </div>
21 <h6 class="font-weight-bold mt-5">John Paul</h6> <small class="mb-2">UI/UX Designer</small>
22 <hr width="50%">
23 <p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
24 </div>
25 <div class="carousel-item card border-0 card-0">
26 <div class="text-center"> <img src="https://i.imgur.com/oW8Wpwi.jpg" class="img-fluid profile-pic"> </div>
27 <h6 class="font-weight-bold mt-5">Ximena Vegara</h6> <small class="mb-2">UI/UX Designer</small>
28 <hr width="50%">
29 <p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
30 </div>
31 <div class="carousel-item active card border-0 card-0">
32 <div class="text-center"> <img src="https://i.imgur.com/EUYNvE1.jpg" class="img-fluid profile-pic"> </div>
33 <h6 class="font-weight-bold mt-5">Lena Maria</h6> <small class="mb-2">Backend Developer</small>
34 <hr width="50%">
35 <p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
36 </div>
37 <div class="carousel-item card border-0 card-0">
38 <div class="text-center"> <img src="https://i.imgur.com/ndQx2Rg.jpg" class="img-fluid profile-pic"> </div>
39 <h6 class="font-weight-bold mt-5">Richard Finch</h6> <small class="mb-2">UI/UX Designer</small>
40 <hr width="50%">
41 <p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
42 </div>
43 <div class="carousel-item card border-0 card-0">
44 <div class="text-center"> <img src="https://i.imgur.com/gazoShk.jpg" class="img-fluid profile-pic"> </div>
45 <h6 class="font-weight-bold mt-5">Marielle Haag</h6> <small class="mb-2">Backend Developer</small>
46 <hr width="50%">
47 <p class="content mt-2 mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod incididunt ut labore et dolore magna aliqua.<br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
48 </div>
49 </div>
50 </div>
51 </div>
52 <div class="row px-3 text-center justify-content-center mb-0 social"> <span class="fa fa-facebook-square mx-2"></span> <span class="fa fa-twitter mx-2"></span> <span class="fa fa-instagram mx-2"></span> <span class="fa fa-youtube-play mx-2"></span> </div>
53 </div>
54 </div>
55 <div class="col-lg-7">
56 <div class="card2 card border-0 px-4 px-sm-5 py-5"> <small class="text-end mb-3"><a href=""><u>I already have an account</u></a></small>
57 <h3 class="mb-1">Sign up to GoSnippets</h3>
58 <p class="mb-4 text-sm">Create our account and start learning with thousands of courses</p>
59 <div class="row mt-3">
60 <div class="col-md-6"> <label class="mb-0">
61 <h6 class="mb-0 text-sm">Full Name</h6>
62 </label> <input type="text" name="fname" placeholder="John Doe"> </div>
63 <div class="col-md-6"> <label class="mb-0">
64 <h6 class="mb-0 text-sm">Username</h6>
65 </label> <input type="text" name="uname" placeholder="johndoe123"> </div>
66 </div>
67 <div class="row px-3"> <label class="mb-0">
68 <h6 class="mb-0 text-sm">Email Address</h6>
69 </label> <input type="text" name="email" placeholder="john.doe@email.com"> </div>
70 <div class="row px-3"> <label class="mb-0">
71 <h6 class="mb-0 text-sm">Password</h6>
72 </label> <input type="password" name="password" placeholder="●●●●●●●●●●"> </div>
73 <div class="row px-3 mb-3"> <small class="text-muted">By signing up, you agree our <a href="" class="text-primary">Terms of services</a> and <a href="" class="text-primary">Privacy Policy</a></small> </div>
74 <div class="row mb-4">
75 <div class="col-md-6"> <button class="btn btn-blue text-center mb-1 py-2">Create Account</button> </div>
76 </div>
77 <div class="row px-3 mb-4">
78 <div class="line"></div> <small class="text-muted or text-center">OR</small>
79 <div class="line"></div>
80 </div>
81 <div class="row text-center">
82 <div class="col-sm-6">
83 <p class="social-connect"><span class="fa fa-facebook-square"></span><small class="ps-3 pe-1">Sign up with facebook</small></p>
84 </div>
85 <div class="col-sm-6">
86 <p class="social-connect"><span class="fa fa-google-plus"></span><small class="ps-3 pe-1">Sign up with google+</small></p>
87 </div>
88 </div>
89 </div>
90 </div>
91 </div>
92 </div>
93</div>More Carousels snippets
Bootstrap 5 carousel with multiple cards
Free Bootstrap 5 carousel snippet — Bootstrap 5 carousel with multiple cards. Preview, copy HTML, CSS & JS, drop it into any Bootstrap 5 project.
CarouselsView →
Sliding tabs | CSS transitions only
Sliding tabs | CSS transitions only — a free Bootstrap 5 carousel snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.
CarouselsView →
Bootstrap Services in circle slider snippet
Bootstrap Services in circle slider snippet: a hand-crafted, open-source Bootstrap 5 carousel. HTML, CSS & JS included, ready to copy.
CarouselsView →
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.