Bootstrap 5 login form with information text

Forms Bootstrap 5Free+ CSS

Add a form to your UI with Bootstrap 5 login form with information text. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

5.2k views115 downloads6 years ago

gosnippets.com/preview/bootstrap-5-login-form-with-information-text

Source Code

1<div class="container px-4 py-5 mx-auto">
2    <div class="card card0">
3        <div class="d-flex flex-lg-row flex-column-reverse">
4            <div class="card card1">
5                <div class="row justify-content-center my-auto">
6                    <div class="col-md-8 col-10 my-5">
7                        <div class="row justify-content-center px-3 mb-3"> <img id="logo" src="https://i.imgur.com/PSXxjNY.png"> </div>
8                        <h3 class="mb-5 text-center heading">We are Tidi</h3>
9                        <h6 class="msg-info">Please login to your account</h6>
10                        <div class="mb-3"> <label class="form-control-label text-muted">Username</label> <input type="text" id="email" name="email" placeholder="Phone no or email id" class="form-control"> </div>
11                        <div class="mb-3"> <label class="form-control-label text-muted">Password</label> <input type="password" id="psw" name="psw" placeholder="Password" class="form-control"> </div>
12                        <div class="row justify-content-center my-3 px-3"> <button class="w-100 btn-color">Login to Tidi</button> </div>
13                        <div class="row justify-content-center my-2"> <a href="#"><small class="text-muted">Forgot Password?</small></a> </div>
14                    </div>
15                </div>
16                <div class="bottom text-center mb-5">
17                    <p href="#" class="sm-text mx-auto mb-3">Don't have an account?<button class="btn btn-white ms-2">Create new</button></p>
18                </div>
19            </div>
20            <div class="card card2">
21                <div class="my-auto mx-md-5 px-md-5 right">
22                    <h3 class="text-white">We are more than just a company</h3> <small class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small>
23                </div>
24            </div>
25        </div>
26    </div>
27</div>

More Forms snippets

Bootstrap 5 simple login form with social login

Free Bootstrap 5 form snippet — Bootstrap 5 simple login form with social login. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Bootstrap 5 Login Form UI Design snippets

Bootstrap 5 Login Form UI Design snippets: a hand-crafted, open-source Bootstrap 5 form. HTML & CSS included, ready to copy.

FormsView →

Bootstrap 5 Fancy user login form snippets

Free Bootstrap 5 form snippet — Bootstrap 5 Fancy user login form snippets. Preview, copy HTML & CSS, drop it into any Bootstrap 5 project.

FormsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container px-4 py-5 mx-auto"> 2 <div class="card card0"> 3 <div class="d-flex flex-lg-row flex-column-reverse"> 4 <div class="card card1"> 5 <div class="row justify-content-center my-auto"> 6 <div class="col-md-8 col-10 my-5"> 7 <div class="row justify-content-center px-3 mb-3"> <img id="logo" src="https://i.imgur.com/PSXxjNY.png"> </div> 8 <h3 class="mb-5 text-center heading">We are Tidi</h3> 9 <h6 class="msg-info">Please login to your account</h6> 10 <div class="mb-3"> <label class="form-control-label text-muted">Username</label> <input type="text" id="email" name="email" placeholder="Phone no or email id" class="form-control"> </div> 11 <div class="mb-3"> <label class="form-control-label text-muted">Password</label> <input type="password" id="psw" name="psw" placeholder="Password" class="form-control"> </div> 12 <div class="row justify-content-center my-3 px-3"> <button class="w-100 btn-color">Login to Tidi</button> </div> 13 <div class="row justify-content-center my-2"> <a href="#"><small class="text-muted">Forgot Password?</small></a> </div> 14 </div> 15 </div> 16 <div class="bottom text-center mb-5"> 17 <p href="#" class="sm-text mx-auto mb-3">Don't have an account?<button class="btn btn-white ms-2">Create new</button></p> 18 </div> 19 </div> 20 <div class="card card2"> 21 <div class="my-auto mx-md-5 px-md-5 right"> 22 <h3 class="text-white">We are more than just a company</h3> <small class="text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</small> 23 </div> 24 </div> 25 </div> 26 </div> 27</div>