CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Ahmet Poyraz Akçal
Ahmet Poyraz Akçal

Reputation: 65

Inline Checkbox and Input Element in Bootstrap

I'm trying to inline input and checkbox using Bootstrap

My code is:

<!-- Bootstrap-3.4.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">


<!-- Body -->
<form class="form " style=" width:250px; height:250px;">
  <div class="form-group">
    <input class="form-control " id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;">
    <label style="width:100%;"> <input class="form-control" maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label>
  </div>
  <div class="form-group">
    <input class="form-control" id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;">
    <label style="width:100%;"><input class="form-control  date-picker" id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label>

  </div>
  <div class="form-group">
    <input class="form-control " id="manifestDateCheck" type="checkbox" style="height: 34px;width:20px;">
    <label style="width:100%;"><input class="form-control  date-picker" id="txtManifestDate" maxlength="50" placeholder="Manifesto Tarihi" type="text" disabled /></label>
  </div>
  <div class="form-group ">
    <a class="btn btn-success">Güncelle</a>
  </div>
</form>

But it looks like this:

enter image description here

Upvotes: 1

Views: 2308

Answers (2)

jeremy-denis
jeremy-denis

Reputation: 6878

.form-group {
  position: relative;
}

label {
  position: absolute;
  top: 0;
  left: 35px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">



 <form class="form " style=" width:250px; height:250px;">
            <div class="form-group">
                <input class="form-control " id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;">
                <label style="width:100%;"> <input class="form-control" maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label>
            </div>
            <div class="form-group">
                <input class="form-control" id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;">
                <label style="width:100%;"><input class="form-control  date-picker" id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label>

            </div>
            <div class="form-group">

Upvotes: 1

Sunderam Dubey
Sunderam Dubey

Reputation: 8837

Just set display:inline-flex !important;

<style>
    form div.form-group{
        display:inline-flex !important;
    }

</style>

Upvotes: 4

Related Questions