CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
cssnoobie
cssnoobie

Reputation: 55

How to move a button under input?

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

Upvotes: 3

Views: 12715

Answers (7)

Lajos Arpad
Lajos Arpad

Reputation: 76464

You can:

1

button {
    display: block;
}

2

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

3

input {
    width: 100%;
}

4

etc.

Upvotes: 0

Decoolipascal
Decoolipascal

Reputation: 82

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>

Upvotes: 0

Dmytro Cheglakov
Dmytro Cheglakov

Reputation: 744

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>

Upvotes: 0

Beniamin
Beniamin

Reputation: 568

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.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115045

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>

Upvotes: 0

AKNair
AKNair

Reputation: 1587

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;
}

Upvotes: 1

Tural Ali
Tural Ali

Reputation: 23240

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>

Upvotes: 3

Related Questions