Breaking News: Grepper is joining You.com. Read the official announcement!

Make Input Group Responsive Input Append (Search And Dropdown With Buttons)

Amin Arjmand answered on June 11, 2022 Popularity 1/10 Helpfulness 1/10

answer Make Input Group Responsive Input Append (Search And Dropdown With Buttons)

Make Input Group Responsive Input Append (Search And Dropdown With Buttons)

Comment

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
@media (max-width: 534px) {
    input#domain {
        width: 100%;
    }

    .input-group .input-group-append {
        width: 100%;
        margin: 0 auto;
    }

    .input-group .input-group-append .btn {
        width: 50%;
        margin-top: 5px;
        border-radius: 3px !important;
    }

    .input-group-append button:last-child {
        margin-left: 0.5rem !important;
    }
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div class="container">
  <div class="row">
	<div class="col-12">
		<div class="input-group">
            <input type="text" name="domain" id="domain" class="form-control rounded-left" placeholder="Search ...">
                <div class="input-group-append">
					<button class="btn search-btn btn-success btn-hover d-flex align-items-center" type="submit">
						<div class="m-auto ml-1">
							<i class="fa fa-search"></i>&nbsp;Search
						</div>
					</button>
					<button class="btn search-btn btn-warning btn-hover d-flex align-items-center rounded-right" type="submit">
						<div class="m-auto">
							<i class="fa fa-exchange"></i>&nbsp; Transfer
						</div>
                </button>
                </div>
		</div>
     </div>
	</div>
</div>

Popularity 1/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: append dropdown group html input responsive

Link to this answer
Share Copy Link

Contributed on Jun 11 2022

Amin Arjmand

0 Answers Avg Quality 2/10

Make Input Group Responsive Input Append (Search And Dropdown With Buttons)

Contents

More Related Answers

Make Input Group Responsive Input Append (Search And Dropdown With Buttons)

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.