Bootstrap 5 sign up form snippets with auto carousel…: a hand-crafted, open-source Bootstrap 5 carousel. HTML & CSS included, ready to copy.
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>
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.
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.
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.
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
57
Views
6
Likes
Trending now
More Bootstrap snippets developers are viewing this week.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.