I have a quite weird problem, which I can't find solution on
So basically what I want is to make is to bring button under the input file (I'm using Bootstrap), but have no idea how to do that
<form>
<input type="text" placeholder="Numer pokoju" name="numerPokoju" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
<button type="button">
Sprawdź
</button>
</form>here's the visualization on CodePen
Simply, wrap the button and input inside form-group div and voila!
<div class="form-group">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</div>
<div class="form-group">
<button type="button">
Sprawdź
</button>
</div>
Button is an inline element. So what you can do is make it a block element.
Way 1: As you mentioned you are using Bootstrap. So add class d-block to button.
Way 2: In general add this to css file :
button {
display: block;
}
Bootstrap as help classes for that:
<form class="d-flex flex-column align-items-start">
.card {
background: rgba(18, 13, 33, .8)!important;
color: #d7eaf4;
box-shadow: 0 5px 15px #000000c0;
box-sizing: border-box;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">
text string
</h5>
<div class="subtitle mb-3">
by me
</div>
<form class="d-flex flex-column align-items-start">
<input type="text" placeholder="Numer pokoju" name="numerPokoju" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
<button type="button">
Sprawdź
</button>
</form>
</div>
</div>There are several ways to approach this, you can simply change input display to block eg:
input[type=text] {
display:block;
}
or more complex way is use flex for example:
.form-container {
display:flex;
flex-direction:column;
}
or just move the input field into <div> element.
Try to use Bootstrap classes from documentation
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>The button and the input fields are currently set to display:inline. If you want them to use the whole line you can use display: block
Bootstrap has a class called d-block which can be added to your element to change the display type to block.
<button type="button" class="d-block">
Sprawdź
</button>
You can:
button {
display: block;
}
<form>
<input type="text" placeholder="Numer pokoju" name="numerPokoju" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
<br>
<button type="button">
Sprawdź
</button>
</form>
input {
width: 100%;
}
etc.