Brian Brian -4 years ago 34
CSS Question

Bootstrap : Is it possible to add forms on carousel?

I am using Bootstrap4.
I've been developing a soccer website wich allow users to add custom players. For that i though Carousel was a nice thing because user can press the arrows to navigate through forms and add as much players as he want.

Can we make it just by using Boostrap?

Answer Source

Yes it is possible. I will give you an example of a form that runs on the first slide. The rest of the slides/customization is up to your imagination. Don't think about my example too much. I threw it together to show it's possible.

<div class="carousel slide" data-ride="carousel" id="carouselExampleSlidesOnly">
<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <form class="form-horizontal" style="width:50%;">
            <fieldset>
                <!-- Form Name -->
                <legend>Form Name</legend> <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="textinput">Username</label>
                    <div class="col-md-4">
                        <input class="form-control input-md" id="textinput" name="textinput" placeholder="Username" type="text">
                    </div>
                </div><!-- Password input-->
                <div class="form-group">
                    <label class="col-md-4 control-label" for="passwordinput">Password</label>
                    <div class="col-md-4">
                        <input class="form-control input-md" id="passwordinput" name="passwordinput" placeholder="Password" type="password">
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="carousel-item"><img alt="Second slide" class="d-block img-fluid" src="..."></div>
    <div class="carousel-item"><img alt="Third slide" class="d-block img-fluid" src="..."></div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download