I'm trying to force a search box to take up the entire width of the container, but I can only ever get it to take up roughly half the width. Here is some representative code:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
<div class="input-group-append">
<button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
</div>
</div>
</div>
</div>
And a link to JSFiddle: http://jsfiddle.net/ovLab58u/
I've followed every one of the answers listed here, and nothing seems to be working: Bootstrap 4 inline form full width
Just add display: block style to the div having class input-group either as inline style or as external css class
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group" style="display: block;">
<input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
<div class="input-group-append">
<button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
</div>
</div>
</div>
</div>
I just add bootstrap v4.4 CDNs from https://getbootstrap.com/docs/4.4/getting-started/introduction/ to your code and also add a "div closed tag" that you did not closed in your code. and it works correctly. like the code below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<input id="submitted_word" type="text" class="flex-fill mr-2 form-control" placeholder="Enter Words Here">
<div class="input-group-append">
<button id="submit_button" class="btn btn-primary" type="button">Submit Word</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Related
I'm currently using Bootstrap 4 for a project in a JavaScript course im following, and im doing the HTML, but i've run into an issue with the input-group-addon class on a span. It's not showing like the icon is showing in the tutorial
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<title>Loan Calculator</title>
</head>
<body class="bg-dark">
<div class="contr">
<div class="row">
<div class="col-md-6 mx-auto">
<div class="card card-body text-center mt-5">
<h1 class="heading display-5 pb-3">Loan Calculator</h1>
<form id="loan-form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span id="input-group-addon">%</span>
<input type="number" class="form-control" id="interest" placeholder="Interest Rate">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
Your structure and class names are a little bit off. You need a span.input-group-text nested inside a div.input-group-prepend
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="number" class="form-control" id="amount" placeholder="Loan Amount">
</div>
</div>
.input-group-addon does not appear in the v4.0 documentation that was for v3.
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Closed 2 years ago.
So i want this form which is in a card to be in the middle of the whole web page and responsive.I tried changing the height of everything to h-100 and align-items-center and nothing seems to work.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
html,body{
height: 100%;
}
</style>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100 ">
<div class="col-md-6 h-100 ">
<div class="card">
<div class="card-body">
<div class="card-title"><h3>Log In</h3></div>
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" value="Username" placeholder="Donald Trump...">
</div>
<div class="form-group">
<label for="username">Password</label>
<input class="form-control" type="password" name="password" value="Password" placeholder="**********">
</div>
<input class="btn btn-primary" type="submit" name="" value="LogIn">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
I was expecting this:
enter image description here
but i get this:
enter image description here
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
html,body{
height: 100%;
}
</style>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container h-100">
<div class="d-flex justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="card">
<div class="card-body">
<div class="card-title"><h3>Log In</h3></div>
<form method="post">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" value="Username" placeholder="Donald Trump...">
</div>
<div class="form-group">
<label for="username">Password</label>
<input class="form-control" type="password" name="password" value="Password" placeholder="**********">
</div>
<input class="btn btn-primary" type="submit" name="" value="LogIn">
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
For more information: https://getbootstrap.com/docs/4.0/utilities/flex/#align-items
Like i say in the title why cant i get the input-form to stick with my button?
I am using bootstrap with my django site.
<div class="container" style="margin-top: 20%; margin-bottom: 20%";>
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1 style="font-size:500%";>Zaira.io</h1><p style="font-size:120%";>Test</p>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control input-lg" type="text" name="search" placeholder="Input Website Url" required/>
<span class="input-group-btn">
<button class="btn btn-success btn-lg" type="submit">
<i class="glyphicon glyphicon-search" aria-hidden="true"></i> Search
</button>
</span>
</div>
</div>
</form>
</div>
</div>
</div>
Website Screenshot
It looks like you're trying to create an input group. If so, then on the line that reads <span class='input-group-btn'>, change the class input-group-btn to input-group-append. Here's a fiddle to demonstrate the change.
Check out this page https://getbootstrap.com/docs/4.0/components/input-group/ to learn more about input group with bootstrap. Also, you should avoid using span in this case as it is an inline element and not a block element to position obj. To position, use input-group-prepend and/or input-group-append as needed for buttons and more.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Input Website Url" aria-label="Input Website Url" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Search</button>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1 style="font-size:500%";>Zaira.io</h1>
</div>
<form role="form" id="form-buscar">
<p style="font-size:120%";>Test</p>
<input id="1" class="form-control input-lg" type="text" name="search" placeholder="Input Website Url" required/>
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</form>
</div>
</div>
</div>
</body>
</html>
Using Bootstrap 3 and the simplified code from below, I cannot figure out why the first form shifts a bit to the top compared to the other two forms in the row:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- our own css -->
<link rel="stylesheet" href="{% static 'style.css' %}" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="container-fluid text-center">
<div><h1><b>bohoo</b></h1></div>
<br />
<hr>
<div class="row">
<div class="form-group">
<div class= "col-sm-3 col-md-3 col-lg-3 col-lg-offset-1 col-md-offset-1 col-lg-offset-1 gray">
<h3>here's a title</h3>
<form action="." method="post">
{{numberform}}
<p> </p>
<input type="submit" class="btn btn-primary" name="x" value="A value">
<input type="submit" class="btn btn-warning" name="y" value="A value">
</form>
<br>
</div>
</div>
<div class="form-group move-right">
<div class= "col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 gray">
<h3>here's a title</h3>
<form action="." method="post">
{{textform}}
<input type="submit" class="btn btn-primary" name="z" value="A value">
<input type="submit" class="btn btn-warning" name="y" value="A value">
</form>
<br>
</div>
</div>
<div class="form-group move-right">
<div class= "col-sm-3 col-sm-offset-1 col-md-3 col-md-offset-1 col-lg-3 col-lg-offset-1 gray">
<h3>uuu a title</h3>
<form action="." method="post" enctype="multipart/form-data">
{{fileform}}
<input type="submit" class="btn btn-primary" name="a" value="A value">
<input type="submit" class="btn btn-warning" name="b" value="A value">
</form>
<br>
</div>
</div>
</div>
<div class="row">
<div class="text-center">
<hr>
<h3><b>Result:</b></h3>
<div class="col-sm-10 col-md-10 col-lg-10 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
{{result}}
</div>
</div>
</div>
</div>
</body>
</html>
Here is the result in Chrome, tested on multiple screens and sizes:
And here is my style.css:
.gray {
background-color: #f2efef;
border-radius: 15px;
}
.move-right {
padding-left: 200pt;
}
I cannot figure out what could cause the first form from the left to shit to the top a bit. I tried all sorts of gimmicks to fix this, but padding, adding a margin-top, and even adding <br>s did not help.
Thanks.
The form-group class is messing it up. You've wrapped all the 1/3 width div's with full width "form-group" div's.
Take the form-group classes off those div's and add the form-group class to it's child div. The div's with the col-md-3, etc. You could probably get rid of those wrapping div's entirely.
Not sure why that's happening but would this override work?
.gray{
margin-top:0px;
}
I want to place the search button in the column next to the input form using the Bootstrap grid, but since both the "input" tag and "button" tag must be in the div with the "form-group" attribute, this makes things difficult.
This is my original code:
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
And this is my failed attempt with nested columns:
<div class="row">
<div class="col-md-12 formMove">
<div class="row">
<div class="col-md-10">
<form id="getposts_form" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div> <!--I want this closing tag to close "col-md-10", but its closing the "form-group"-->
<div class="col-md-2">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
<br><div id="errors"></div>
</div>
</form>
</div>
</div>
</div>
</div>
Thanks in advance.
I could not understand why do you need button and input within the same form-group class, as you can use separate form-group class for them.
The approach through which in line forms are achieved is using .form-inline class with the<form> tag. As you wanted an answer using grid system I have provide a snippet for that also.
I have added two snippet
using .form-inline class
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="form-group">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
<br><div id="errors"></div>
</form>
</div>
</div><!--end row-->
</body>
</html>
using bootstrap grid system
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="row">
<div class="col-md-12 formMove">
<form id="getposts_form" class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-md-8 col-lg-8 col-sm-8 col-xs-8">
<input type="text" class="form-control searchBar" id="search" name="search" placeholder="">
</div>
<div class="col-md-4 col-lg-4 col-sm-4 col-xs-4">
<button class="btn btn-default searchBtn" type="submit" id="submit ">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></button></div>
</div>
<br><div id="errors"></div>
</div>
</form>
</div>
</div><!--end row-->
</body>