Remove space between an input and a button in bootstrap

Navigation
1

How can I remove the space that exists between the input and the button ?

This is my code: 

<div class="panel-body">
    <ul id="list_messages"></ul>
    <div class="row">
        <div class="col-md-6"> <!-- Si comento estas columnas simplemente mi input se pone por encima del button -->
            <input type="text" class="form-control" placeholder="Write a message">
        </div> <!-- -->
        <div class="col-md-6"> <!-- Si comento estas columnas simplemente mi input se pone por encima del button -->
          <button type="button" class="btn btn-block btn-primary">Send message</button>
       </div> <!-- -->
    </div>
</div>
    
asked by Jorius 02.11.2016 в 00:53
source

4 answers

1

What you're looking for is called Button addons from Bootstrap. p> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
  <ul id="list_messages"></ul>
  <div class="row">
    <div class="col-xs-12">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Write a message">
        <span class="input-group-btn">
         <button type="button" class="btn btn-block btn-primary">Send message</button>
      </span>
      </div>
    </div>
  </div>
</div>

On the other hand if you want to save yourself marked you can use flexbox and create your own component. 

  <div class="flex-input-group">
      <input type="text" class="form-control" placeholder="Write a message">
      <button type="button" class="btn btn-block btn-primary">Send message</button>
  </div>


.flex-input-group {
  display: flex;
}
.flex-input-group input,
.flex-input-group button {
  flex: 1;
  /* Distribuye el espacio entre los dos elementos. */
}
.flex-input-group input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex-grow: 5;
  /* Reduce este número para hacer el input más pequeño. Actualmente crece 5 veces si hay espacio en el contenedor */
}
.flex-input-group button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
  <ul id="list_messages"></ul>
  <div class="row">
    <div class="col-xs-12">
      <div class="flex-input-group">
        <input type="text" class="form-control" placeholder="Write a message">
        <button type="button" class="btn btn-block btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

You can even change the order of the elements with the order property. 

.flex-input-group {
  display: flex;
}
.flex-input-group--inverted {
  display: flex;
}
.flex-input-group input,
.flex-input-group button {
  flex: 1;
  /* Distribuye el espacio entre los dos elementos. */
}
.flex-input-group input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex-grow: 5;
  /* Reduce este número para hacer el input más pequeño. Actualmente crece 5 veces si hay espacio en el contenedor */
}
.flex-input-group button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.flex-input-group--inverted input,
.flex-input-group button {
  border-radius: 4px;
}
.flex-input-group--inverted input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.flex-input-group--inverted button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  order: -1;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
  <ul id="list_messages"></ul>
  <div class="row">
    <div class="col-xs-12">
      <div class="flex-input-group flex-input-group--inverted">
        <input type="text" class="form-control" placeholder="Write a message">
        <button type="button" class="btn btn-block btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
    
answered by 07.11.2016 / 05:29
source
1

Without changing the html you would have to overwrite the bootstrap style to eliminate the "gutter" of each column: 

@media (min-width: 992px) {
  .panel-body > .row > .col-md-6:first-child {
    padding-right: 0;
  }

  .panel-body > .row > .col-md-6:nth-child(2) {
    padding-left: 0;
  }
}  
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
    <ul id="list_messages"></ul>
    <div class="row">
        <div class="col-md-6"> <!-- Si comento estas columnas simplemente mi input se pone por encima del button -->
            <input type="text" class="form-control" placeholder="Write a message">
        </div> <!-- -->
        <div class="col-md-6"> <!-- Si comento estas columnas simplemente mi input se pone por encima del button -->
          <button type="button" class="btn btn-block btn-primary">Send message</button>
       </div> <!-- -->
    </div>
</div>
    
answered by 02.11.2016 в 01:01
0

What I would do, just to not put more css is:

  • Move class .row to% internal div
  • Set the class .col-xs-12 , .col-sm-12 , .col-md-12 or .col-lg-12 (depending on the one you are using, in this case to be visible in this snippet use .col-xs-12 ) in the place of the class .row to respect the padding of the sides 

    • <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="panel-body">
    <ul id="list_messages"></ul>
    <div class="col-xs-12">
        <div class="row col-xs-6">
            <input type="text" class="form-control" placeholder="Write a message">
        </div> <!-- -->
        <div class="row col-xs-6">
          <button type="button" class="btn btn-block btn-primary">Send message</button>
       </div> <!-- -->
    </div>
</div>
        
    answered by 02.11.2016 в 01:50
    0

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

<div class="row">
   <div class="col-lg-6">
  <div class="input-group">
     <input type="text" class="form-control" placeholder="Write a message">
     <span class="input-group-btn">
        <button class="btn btn-block btn-primary" width="100%" type="button">Send message</button>
     </span>
  </div><!-- /input-group -->
   </div><!-- /.col-lg-6 -->
</div>
        
    answered by 02.11.2016 в 11:05
    Doubt with cin.get () consume Json in android studio FATAL EXCEPTION: Thread-13149