HTML Code doesnt display the intended result

user_17091299 0
Viewed 36

<!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

bootstrap-4 css html
2 Answers

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>

user_78368330

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>

user_142844750
Related