Place buttons horizontally with bootstrap

Question

Place buttons horizontally with bootstrap

Navigation

#1 by (1 votes)

2

Good morning,

I have 3 buttons which I want to be shown in a desktop browser like chrome, the 3 in horizontal line but not so separated from each other since if I apply the class col of separation 4 for each div that are inside the div row, they are placed horizontally as I want but one on the left side, the other in the center and the other almost to the extreme right .. what could you do to make them appear horizontally but be slightly separated?

here I leave the code without the modification 4 4 4, as this code shows me one on the other and in the web part of a mobile it also shows one on the other

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
 <div class="container">
    <div class="row">
      <div class="col">
          <button type="button" onclick='consultar()'>Solicitadas</button>
      </div>

      <div class="col">
          <button type="button" onclick='consultar2()'>Solicitadas</button>
      </div>

      <div class="col">
          <button type="button" onclick='consultar3()'>Solicitadas</button>
      </div>
    </div>
 </div>
</body>
</html>

html bootstrap

asked by Gabriel Uribe Gomez 01.06.2018 в 18:47

source

1 answer

avoid predictive text in html form How to know if a String contains any of the first 10 letters of the alphabet VB.Net

score 1 · Accepted Answer

You could use css. If you have other divs with the col class, you can add another class to the divs you want to separate and use that new class in the css instead of col.

.col {
  display: inline-block;
}

<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.3.1/jquery.min.js"></script>

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

<body>
 <div class="container">
    <div class="row">
      <div class="col">
          <button type="button" onclick='consultar()'>Solicitadas</button>
      </div>

      <div class="col">
          <button type="button" onclick='consultar2()'>Solicitadas</button>
      </div>

      <div class="col">
          <button type="button" onclick='consultar3()'>Solicitadas</button>
      </div>
    </div>
 </div>
</body>
</html>