Adjusting css for one specific tab content

I’m using a bootstrap for this development. But I’m having a hard time in adjusting … Read more Adjusting css for one specific tab content

I’m using a bootstrap for this development. But I’m having a hard time in adjusting the bootstrap CSS. I want to make all the text sit nicely and align and most importantly the text should not sit under the exclamation mark icon. If the text are too long it will go sit under the exclamation mark which I want to avoid it.

enter image description here

If possible can I do my own css for this particular tab content ? If so how would u suggested it ?
Below is what I have tried but the text still goes under the exclamation icon.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="tab-pane fade show active" id="homepage" role="tabpanel">
  <div class="col-lg-12">
    <div class="row">
      <div class="col-md-12">
        <div class="sec-title2 mb-25">
          <h2 class="title small2">INFORMATION</h2>
          <span style="font-size: 80%;"><i>PLEASE READ ALL THE TERMS AND CONDITION BEFORE PROCEEDING IT ! </i></span>
        </div>

        <div style="text-align: justify;"><i class="fa fa-exclamation-circle" style="color:red"></i> Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</div>
        <div style="text-align: justify;"><i class="fa fa-exclamation-circle" style="color:red"></i> Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</div>
        <div style="text-align: justify;"><i class="fa fa-exclamation-circle" style="color:red"></i> Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna</div>
        <div style="text-align: justify;"><i class="fa fa-exclamation-circle" style="color:red"></i> Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</div>
        <div style="text-align: justify;"><i class="fa fa-exclamation-circle" style="color:red"></i> Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</div>
        <div style="text-align: justify;"><i class="fa fa-exclamation-circle" style="color:red"></i> Change in the volume of expected sales Lorem ipsum dolor sit amet, consectetur adipiscing lit, sed do eiusmod data tempor incididunt ut labore et dolore magna.</div>



        <div class="col-md-12">
          <button type="button" class="btn btn-md btn-primary ml-2 button-icon rounded-small f-r" id="startReg" data-toggle="tooltip" data-placement="top" title="Register><i class=" las la-plus m-0 "></i>Register Now</button>
                                                            </div>
                                                        </div>
                                                
                                                    </div> 
                                        </div>
                                </div>

Source: CSS – Stack Overflow


Categories: NewsTags: ,

Tags: ,


Leave a Reply

Your email address will not be published. Required fields are marked *