"Create New Store"
Bootstrap 4.1.1 Snippet by balantg

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link rel="stylesheet" type="text/css" href="carousel.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="select_icon.js"></script> </head> <body> <div class="avatar"> <a href="https://ibb.co/g2jNUe"><img src="https://thumb.ibb.co/g2jNUe/logo.png" alt="logo" border="0" color=blue></a> </div> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#newstore">Create New Store</a></li> <li><a data-toggle="tab" href="#newpromotion">Create New Promotion</a></li> </ul> <div class="tab-content"> <div id="newstore" class="tab-pane fade in active"> <form role="Form" method="POST" action="" name="newstore" accept-charset="UTF-8"> <div class="form-group"> <br> <input type="text" name="newstore" placeholder="Store Name" class="form-control"> <br> <p>Enter Effect Type:</p> <div id="tabs" class="btn-group" data-toggle="buttons-radio"> <a href="#files" class="btn active" data-toggle="tab">Upload File</a> <a href="#defaultpick" class="btn" data-toggle="tab">Pick from Public Gallery</a> <a href="#devpick" class="btn" data-toggle="tab">Pick from Developer Gallery</a> </div> <div class="tab-content"> <div class="tab-pane active" id="files"> <div> <label for="vendor_store">Upload effect</label> <input type="file" id="vendor_store" name="vendor_store"> </div> <div class="preview_store"> <p>No files currently selected for upload</p> </div> <div> <button name="vendor_submit" type="submit">Submit</button> </div> </div> <div class="tab-pane" id="defaultpick"> <div class="container"> <div class="row blog"> <div id="blogCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#blogCarousel" data-slide-to="0" class="active"></li> <li data-target="#blogCarousel" data-slide-to="1"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <ul> <li> <img src="http://placehold.it/160x100" class="img-responsive img-radio"> <input type="checkbox" id="left" class="hidden"> </li> <li> <img src="http://placehold.it/160x100" class="img-responsive img-radio"> <input type="checkbox" id="middle" class="hidden"> </li> </ul> </div> <div class="carousel-item"> <ul> <li> <img src="http://placehold.it/160x100" class="img-responsive img-radio"> <input type="checkbox" id="left" class="hidden"> </li> <li> <img src="http://placehold.it/160x100" class="img-responsive img-radio"> <input type="checkbox" id="middle" class="hidden"> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="tab-pane" id="devpick"> <div class="container"> <div class="row blog"> <div id="blogCarousel1" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#blogCarousel1" data-slide-to="0" class="active"></li> <li data-target="#blogCarousel1" data-slide-to="1"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <ul> <li> <img src="http://placehold.it/160x100" class="img-responsive img-radio"> <input type="checkbox" id="left" class="hidden"> </li> <li> <img src="http://placehold.it/160x100" class="img-responsive img-radio"> <input type="checkbox" id="middle" class="hidden"> </li> </ul> </div> <div class="carousel-item"> <ul> <li> <img src="http://placehold.it/160x100" class="img-responsive img-radio"> <input type="checkbox" id="left" class="hidden"> </li> <li> <img src="http://placehold.it/160x100" class="img-responsive img-radio"> <input type="checkbox" id="middle" class="hidden"> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <br> <div class="form-group"> <input type="url" name="chaturl" placeholder="Enter Chat URL" class="form-control"> <input type="tel" name="phone" placeholder="Enter Phone Number" class="form-control"> <br> <button type="submit" name="Next_prod" class="btn btn-default">Next</button> <button type="submit" name="cancel_prod" align='right' class="btn btn-default">Cancel</button> <button onclick="location.href='page2.html'" type="button">page2</button> <br> </div> </form> </div> </div> </div> </div> </div> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> <div class="content"> <div class="container"> <div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mb40 text-center"> <h1 class="page-title">Meet Our Developers</h1> <!-- /.section-title --> </div> </div> <div class="row"> <!-- team-block --> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mb30"> <div data-aos="fade-up" class="team-block active"> <div class="team-img"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/practical/images/team_img_1.jpg" alt="" class="img-fluid"> <div class="social-media"> <a href="#" class="social-icon-box"><i class="fab fa-facebook-f"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-twitter"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-google-plus-g"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-pinterest-p"></i></a> </div> </a> </div> <div class="team-content"> <h4>William B. Smith</h4> </div> </div> </div> <!-- /.team-block --> <!-- team-block --> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mb30"> <div data-aos="fade-up" class="team-block"> <div class="team-img"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/practical/images/team_img_2.jpg" alt="" class="img-fluid"> <div class="social-media"> <a href="#" class="social-icon-box"><i class="fab fa-facebook-f"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-twitter"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-google-plus-g"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-pinterest-p"></i></a> </div> </a> </div> <div class="team-content"> <h4>Ronald P. Lomas </h4> </div> </div> </div> <!-- /.team-block --> <!-- team-block --> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mb30"> <div data-aos="fade-up" class="team-block"> <div class="team-img"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/practical/images/team_img_3.jpg" alt="" class="img-fluid"> <div class="social-media"> <a href="#" class="social-icon-box"><i class="fab fa-facebook-f"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-twitter"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-google-plus-g"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-pinterest-p"></i></a> </div> </a> </div> <div class="team-content"> <h4>Jose B. Banks</h4> </div> </div> </div> <!-- /.team-block --> <!-- team-block --> <div class="col-xl-3 col-lg-3 col-md-6 col-sm-12 col-12 mb30"> <div data-aos="fade-up" class="team-block"> <div class="team-img"> <a href="#"> <img src="https://easetemplate.com/free-website-templates/practical/images/team_img_4.jpg" alt="" class="img-fluid"> <div class="social-media"> <a href="#" class="social-icon-box"><i class="fab fa-facebook-f"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-twitter"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-google-plus-g"></i></a> <br> <a href="#" class="social-icon-box"><i class="fab fa-pinterest-p"></i></a> </div> </a> </div> <div class="team-content"> <h4>Craig K. Tackitt</h4> </div> </div> <!-- /.team-block --> </div> </div><div class="row"> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center mt-4"> Created for <a href="https://easetemplate.com/downloads/lawyer-website-template-practical/" target="_blank" class="text-primary">e</a> </div></div> </div> </body>
.blog .carousel-indicators { right: 10; top: auto; bottom: -40px; } /* The colour of the indicators */ .blog .carousel-indicators li { background: #a3a3a3; border-radius: 50%; width: 8px; height: 8px; } .blog .carousel-indicators .active { background: #707070; } ul{ list-style-type: none; } li { float: left; } ul{ list-style-type: none; } li { float: left; } ol{ list-style-type: none; }
$(function () { $('.img-radio').click(function(e) { $('.img-radio').not(this).removeClass('active') .siblings('input').prop('checked',false) .siblings('.img-radio').css('opacity','0.5'); $(this).addClass('active') .siblings('input').prop('checked',true) .siblings('.img-radio').css('opacity','1'); }); });

Related: See More

Material Bootstrap Wizard
Create Beautiful Themes From Images
Store product layout
Store Icons

Questions / Comments: