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.
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>CodePudding user response：
You can do something like that:
/* target the div's you want to style and set it display to flex */
.col-md-12 > div:not(.sec-title2) { display: flex; }
/* put extra padding for readability */
.col-md-12 > div:not(.sec-title2) > i {padding-right: 10px;}<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>