Issue
<!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
Solution
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>Answered By - deepakchethan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.