CODEWITHSUNDEEP
htmlcssbootstrap-4
user12742856
user12742856

Reputation:

How to align the button element below the label in bootstrap

So I am creating a form where we have an upload button in a card. The result was that the <label> and the image aligned properly but the <button> element was not shown below the label. I have even tried to use bootstrap classes such as ml-5 and such but still it doesn't work. I want the button to be placed below the label but the problem is: it comes on the same line as shown in the image:

enter image description here

I want it to look something like this:

enter image description here

Is there any way we can align the button below the label. It should look like the image above.

The code:

.img-wrapper {
    display: block;
    width: 6.4rem;
    line-height: 15px;
    margin-left: 6rem;
    float: right;
}

.img-wrapper img {
    display: inline;
    border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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="card bg-light mb-3">
                                <div class="card-body">
                                    <label for="profile">Upload a Profile image:</label>
                                    <button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
                                    <input type="file" name="profile" id="profile" hidden=""/>
                                    <div class="img-wrapper">
                                        <img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
                                    </div>
                                </div>
                            </div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>

Upvotes: 0

Views: 1363

Answers (4)

Anadkat Bhavik
Anadkat Bhavik

Reputation: 111

as you are using bootstrap, so it will be very easy for you to do this. let me show you how it ll work:

      <div class="row">
        <div class="col-8 col-md-8 col-sm-8 col-lg-8"> // here you can specify cols on your own
          <div class="row">
              //your label and ll go here
          </div>
          <div class="row">
            //button ll go here
            //it ll create a new line but within this parent div
          </div>
        </div>
        <div class="col-4 col-md-4 col-sm-4 col-lg-4">
          // your image code ll go here
        </div>
      </div>

it ll give you button at bottom of the label and also image ll be placed as before with using standard bootstrap 4 classes only...

Thank you! Happy coding!!

Upvotes: 0

CatLogic
CatLogic

Reputation: 1

You can change the button class to d-block from d-inline and put <div class="img-wrapper"> before it.

<label for="profile">Upload a Profile image:</label>
<div class="img-wrapper">
    <img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
</div>  
<button type="button" class="btn btn-primary d-block" id="upload">Upload</button>
<input type="file" name="profile" id="profile" hidden=""/>

Upvotes: 0

Mak0619
Mak0619

Reputation: 660

You can use this code: 

.img-wrapper {
    display: block;
    width: 6.4rem;
    line-height: 15px;
    margin-left: 6rem;
    float: right;
}

.img-wrapper img {
    display: inline;
    border-radius: 50%;
}
.card-body{
    display: flex;
    justify-content: space-between;
}
.card-content{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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="card bg-light mb-3">
                                <div class="card-body">
                                    <div class="card-content">
                                    <label for="profile">Upload a Profile image:</label>
                                    <button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
                                        </div>
                                    <input type="file" name="profile" id="profile" hidden=""/>
                                    <div class="img-wrapper">
                                        <img class="float-right" src="https://i.imgur.com/yPOQLQh.png" alt="Profile" width="100" height="100"/>
                                    </div>
                                </div>
                            </div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<!-- Bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>

Upvotes: 2

Fatemeh Qasemkhani
Fatemeh Qasemkhani

Reputation: 2042

Wrap these elements in a div:

<div style="display: inline-block">
  <label for="profile">Upload a Profile image:</label>
  <button type="button" class="btn btn-primary d-inline" id="upload">Upload</button>
</div>

and add display: inline-block to your button.

.d-inline {
  display: inline-block;
}

Upvotes: 0

Related Questions