bootstrap 4

by isherwood

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
    <h1 class="header text-center">Heading</h1>

    <div class="row">
        <div class="col-sm">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Choose
        </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </div>
            <div class="input">
                <div class="slidecontainer">
                    <input type="range" min="0" max="10" value="0" id="inputknobs">
                </div>
                <div class="slidecontainer">
                    <input type="range" min="0" max="10" value="0" id="inputknobs">
                </div>
                <div class="slidecontainer">
                    <input type="range" min="0" max="10" value="0" id="inputknobs">
                </div>
                <div>
                    <button type="button" class="btn btn-secondary" id="sub_btn">Submit</button>
                </div>
            </div>
        </div>

        <div class="col-sm">
            <div class="output">
                <img src="https://via.placeholder.com/300" class="img-fluid float-right" id="op_pic">
            </div>
        </div>
    </div>
</div>

CSS

body {
    margin-top: 1rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

.input {
    margin-top: 3rem;
}

#inputknobs {
    padding: 1rem;
}

#sub_btn {
    margin-top: 2rem !important;
}