HTML Code doesnt display the intended result-CodePudding

<!DOCTYPE html>
<head>
  <link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <h1>Kalyan The Coder</h1>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="container">
      <div class="row">
        <form class="form">
          <div class="col-xs-8 col-md-10">
            <input type="text" id="TextBox1" placeholder="Enter your query">
          </div>
          <div class="col-xs-4 col-md-2">
            <button type="submit" class="button">post</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

I ran this code and the Button doesn't show up next to the input box. Its under the text input box which is not the way it is supposed to work. Any ideas I have the buttons inside the form and still no luck

CodePudding user response：

You have used bootstrap classes but not linked/imported them into your html. Add the following:

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

It should show up in the same line:

<!DOCTYPE html>
<head>
  <link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <h1>Kalyan The Coder</h1>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="container">
      <div class="row">
        <form class="form">
          <div class="col-xs-4 col-md-8">
            <input type="text" id="TextBox1" placeholder="Enter your query">
          </div>
          <div class="col-xs-4 col-md-2">
            <button type="submit" class="button">post</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

CodePudding user response：

You put the two form elements in separate divs, which made them block elements. Just put them on one:

<!DOCTYPE html>
<head>
  <link href="https://fonts.google.com/specimen/Poppins?preview.size=20" rel="stylesheet">
</head>
<body>
  <header class="header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-12">
          <h1>Kalyan The Coder</h1>
        </div>
      </div>
    </div>
  </header>
  <div class="main">
    <div class="container">
      <div class="row">
        <form class="form">
          <div class="col-xs-8 col-md-10">
            <input type="text" id="TextBox1" placeholder="Enter your query">
            <button type="submit" class="button">post</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
</html>