CODEWITHSUNDEEP
htmlcsstwitter-bootstrapangular-material2
ErnieKev
ErnieKev

Reputation: 3021

Text goes out of alignment when screen size reduces with bootstrap 4 and AngularMaterial2

I have the following HTML code that looks fine when screen size is wide. However, when the screen is small, the check box goes out of alignment as shown in the image. I want to align the neatly towards the left edge when the screen is small.

If I change md-check box to normal labels the problem is not there so I believe it is the internal styling of the md-checkbox

I have tried adding paddings and margin the md-checkbox and they dont work. What could I try to resolve this

<div class="row">
    <div class="col-md-12">
    <md-checkbox>Some long Text</md-checkbox>
    <md-checkbox>Some other longer text</md-checkbox>
    </div>
</div>

large scren small screen

Upvotes: 0

Views: 475

Answers (1)

shyamm
shyamm

Reputation: 550

You need to enter class while giving column size 

 <div class="container">
  <div class="row">
  <div class="col-md-12">
  <form>
    <label class="checkbox-inline">
     <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> Some Text
    </label>
    <label class="checkbox-inline">
      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">Some Other text
    </label>

  </form>
  </div>
</div>
</div>

Upvotes: 1

Related Questions