Input-group-addon prepend

Input groups

<form role="form" class="form-horizontal">
<div class="mb-15 row">
<label class="col-sm-2 col-form-label" for="example-input-small">Small</label>
<div class="col-sm-10">
    <input type="text" id="example-input-small" name="example-input-small"
        class="form-control form-control-sm" placeholder=".input-sm">
</div>
</div>

<div class="mb-15 row">
<label class="col-sm-2 col-form-label" for="example-input-normal">Normal</label>
<div class="col-sm-10">
    <input type="text" id="example-input-normal" name="example-input-normal"
        class="form-control" placeholder="Normal">
</div>
</div>

<div class="mb-15 row">
<label class="col-sm-2 col-form-label" for="example-input-large">Large</label>
<div class="col-sm-10">
    <input type="text" id="example-input-large" name="example-input-large"
        class="form-control form-control-lg" placeholder=".input-lg">
</div>
</div>

<div class="mb-15 row">
<label class="col-sm-2 col-form-label">Grid Sizes</label>
<div class="col-sm-4">
    <input type="text" class="form-control" placeholder=".col-sm-4">
</div>
</div>

<div class="mb-15 row">
<label class="col-sm-2 col-form-label">Static</label>
<div class="col-sm-10">
    <div class="input-group">

        <span class="input-group-text" id="basic-addon1">@</span>

        <input type="text" class="form-control" placeholder="Username" aria-label="Username"
            aria-describedby="basic-addon1">
    </div>
</div>
</div>

<div class="mb-15 row">
<label class="col-sm-2 col-form-label">Dropdowns</label>
<div class="col-sm-10">
    <div class="input-group mb-3">
        
            <button class="btn btn-primary  dropdown-toggle" type="button"
                data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">Dropdown</button>
            <div class="dropdown-menu">
                <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 role="separator" class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        
        <input type="text" class="form-control" placeholder="" aria-label=""
            aria-describedby="basic-addon1">
    </div>

</div>
</div>

<div class="mb-15 row mb-0">
<label class="col-sm-2 col-form-label">Buttons</label>
<div class="col-sm-10">
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Recipient's username"
            aria-label="Recipient's username" aria-describedby="basic-addon2">
        
            <button class="btn btn-dark" type="button">Button</button>
        
    </div>
</div>
</div>

</form>

Source: localhost

Similar codes

0 vote328 views1 answer
Tailwind CSS Spinner Sizes
Html
0 vote298 views1 answer
Lpluguin de whatsapp para html
Html
0 vote261 views1 answer
Thymeleaf import in html
Html
19 votes261 views4 answers
How to put text in the middle of a page html
Html
2 votes222 views1 answer
How to give a default active value to a radio button
Html
0 vote280 views1 answer
"downloads.wkhtmltopdf.org"
Html
78 votes272 views3 answers
Bootstrap change font color of text
Html
38 votes301 views4 answers
How to make new line in html paragraph
Html
0 vote270 views1 answer
Input field with add button that creates another input
Html
1 vote297 views1 answer
Multiple ternary in vuejs
Html