CODEWITHSUNDEEP
htmlformsbootstrap-4
Kardo
Kardo

Reputation: 1708

How to group multiple text and buttons using bootstrap?

Trying to group some buttons and a text field using bootstrap but it looks very strange. I checked many resources on internet but not helpful. For one button and text, it works perfect.

It's prefered to look like this:

enter image description here

But they look like this:

enter image description here

2 Buttons always drop down, whatever I tried. I wonder if is it even possible to do it using Bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="input-group btn-block">
		<span class="input-group-btn">
			<input type="button" value="-10" class="form-control">
			<input type="button" value="-1" class="form-control">
		</span>
		<input type="text" value="10" class="form-control">
		<span class="input-group-btn">
			<input type="button" value="+1" class="form-control">
			<input type="button" value="+10" class="form-control">
			<button type="submit" class="btn btn-primary"><i class="fa fa-refresh"></i></button>
			<button type="button" class="btn btn-danger"><i class="fa fa-times-circle"></i></button>
		</span>
	</div>

Many thanks in advance!

Upvotes: 0

Views: 212

Answers (2)

JasorYEH
JasorYEH

Reputation: 66

Here's how I got it to work... I removed the spans and added a style with a width of 50px, but you could keep the spans, I just removed them to clear up some clutter... Adjust the width to your liking.

<div class="input-group btn-block">
        <input type="button" value="-10" class="form-control" style="width: 50px;">
        <input type="button" value="-1" class="form-control" style="width: 50px;">
        <input type="text" value="10" class="form-control" style="width: 50px;">
        <input type="button" value="+1" class="form-control" style="width: 50px;">
        <input type="button" value="+10" class="form-control" style="width: 50px;">
        <button type="submit" class="btn btn-primary" style="width: 50px;"><i class="fa fa-refresh"></i></button>
        <button type="button" class="btn btn-danger" style="width: 50px;"><i class="fa fa-times-circle"></i></button>
</div>

Upvotes: 2

Asifuzzaman
Asifuzzaman

Reputation: 1783

Hello Try the below code use Input-group

<div class="row">
<div class="col-xs-6">
<div class="input-group">
<button type="button" class="btn btn-primary">-10</button>
<button type="button" class="btn btn-primary">-1</button>
<input type="text" class="form-control"/>
<button type="button" class="btn btn-primary">-10</button>
<button type="button" class="btn btn-primary">-1</button>
<button type="submit" class="btn btn-primary"><i class="fa fa-refresh"></i>
</button>
<button type="button" class="btn btn-danger"><i class="fa fa-times-circle">
</i></button>
</div>
</div>
</div>

See The Below Fiddle

Fiddle Demo

Upvotes: 1

Related Questions