CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Foolish Coder
Foolish Coder

Reputation: 405

How to align this bootstrap radio button?

PAGE IS HERE

I created radio button using following code and the button & the text comes next to each other. That's fine but it is not VERTICALLY middle aligned to the text input field which is placed left to the radio button.

<div class="col-md-3">
    <div id="edit-donation-frequent" class="form-radios form-group">
        <div class="form-item form-type-radio form-item-donation-frequent">
            <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />  
            <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
         </div>
    </div>
</div>
<div class="col-md-3">
    <div class="form-item form-type-radio form-item-donation-frequent form-group">
        <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />  
        <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
    </div>
</div>

PAGE IS HERE

I put .form-item label.option { vertical-align: middle; } but still the same result. Then I tried margin-top and some other css styles but could not get what I want.

I want the both radio buttons(monthly, onetime AND Landline) look like following screenshot. enter image description here

and

enter image description here

how can I adjust the page like screen shots.

[UPDATE]

Code for the section (row) as per Rachel's request (Anyhow by visiting this page you can have a look at the source code):

<div class="row">
    <div class="col-md-3">
        <div class="form-item form-type-textfield form-item-donation-amount form-group">
            <input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount"/>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-item form-type-select form-item-donation-currency form-group">
            <select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
                <option value="DKK">DKK</option>
                <option value="GBP">GBP</option>
                <option value="USD">USD</option>
                <option value="EUR">EUR</option>
            </select>
        </div>
    </div>
    <div class="col-md-3">
        <div id="edit-donation-frequent" class="form-radios form-group">
            <div class="form-item form-type-radio form-item-donation-frequent">
                <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />  
                <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
             </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-item form-type-radio form-item-donation-frequent form-group">
            <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />  
            <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
        </div>
    </div>
</div>

Upvotes: 0

Views: 1482

Answers (1)

AceWebDesign
AceWebDesign

Reputation: 589

Ok, firstly you need to put the surrounding div around the Land line element like you do with the monthly/one time fields and also make the wrappers for the monthly/one time so they are the same

<div class="row">
    <div class="col-md-3">
        <div class="form-item form-type-textfield form-item-donation-amount form-group">
    <input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount">
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-item form-type-select form-item-donation-currency form-group">
    <select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
      <option value="DKK">DKK</option>
      <option value="GBP">GBP</option>
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
    </select>
    </div>
    </div>
    <div class="col-md-3">
        <div id="edit-donation-frequent" class="form-radios form-group">
            <div class="form-item form-type-radio form-item-donation-frequent">
            <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio">  
            <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
        </div>
    </div>
    </div>
    <div class="col-md-3">
  <div id="" class="form-radios form-group">
        <div class="form-item form-type-radio form-item-donation-frequent form-group">
        <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio">  
        <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
        </div>
</div>
        </div>

and

<div class="col-md-4">
  <div class="form-item form-type-radio form-item-donation-frequent form-group">
    <input type="radio" id="edit-donation-land-line" name="landline" value="landline" class="form-radio">  
    <label class="option font-size-sixteen" for="edit-donation-land-line">Land Line</label>
    </div>
</div>

Then create a new css rule

.form-item.form-type-radio {
    padding-top: 0.5em;
    margin-top: 0;
}

and this should fix your issues. Hope that helps

Upvotes: 1

Related Questions