'How to add dropdown field and editable field inside a box?

I want to add different controls(dropdown field and editable text field)inside a box as shown in image. How can I achieve this? enter image description here

javascripthtmlcssbootstrap-4bootstrap-5


Solution 1:[1]

Here you go. Working jsFiddle Example https://jsfiddle.net/utnw34d7/

.wrapper {
  background-color: #eaeaea;
  box-shadow: 1px 2px 3px 0px;
}

.customBox {
  background-color: white;
  box-shadow: -1px 2px 3px -2px;
}


<div class="row m-4">
    <div class="col-12 border p-4 wrapper">
        <div class="row customBox">
            <label class="fw-bold col-form-label col-auto" for="select1">Dropdown 1:</label>
            <div class="col">
                <select id="select1" class="border-0 form-select">
                    <option>Select</option>
                    <option>...</option>
                </select>
            </div>
        </div>
        <div class="row customBox mt-3">
            <label class="fw-bold col-form-label col-auto" for="select2">Dropdown 2:</label>
            <div class="col">
                <select id="select2" class="border-0 form-select">
                    <option>Select</option>
                    <option>...</option>
                </select>
            </div>
        </div>
        <div class="row customBox mt-3">
            <label class="fw-bold col-form-label col-auto" for="text1">Label 1:</label>
            <div class="col">
                <input id="text1" class="border-0 form-control" type="text" value="label1">
            </div>
        </div>
        <div class="row">
            <div class="col-auto ms-auto">
                <a href="#" class="fw-bold text-dark text-decoration-none">+ Add New</a>
            </div>
        </div>
        <div class="row customBox mt-3">
            <label class="fw-bold col-form-label col-auto" for="text2">Label 2:</label>
            <div class="col">
                <input id="text2" class="border-0 form-control" type="text" value="label2">
            </div>
        </div>
        <div class="row">
            <div class="col-auto ms-auto">
                <a href="#" class="fw-bold text-dark text-decoration-none">+ Add New</a>
            </div>
        </div>
    </div>
</div>
<div class="row mt-4">
    <div class="col-auto mx-auto">
        <button class="btn btn-primary me-2">Button 1</button>
        <button class="btn btn-primary ms-2">Button 2</button>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 andys

Related Questions