CODEWITHSUNDEEP
cssbootstrap-4
sfarzoso
sfarzoso

Reputation: 1600

Set text alignment on the same line of left content

I need to set the text on the same line of the image, actually I have an image left to the text, but if you look at the text, it have an empty space on the top. Is possible align on the same line?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-pane active" id="product1">
   <div class="card">
      <div class="card-img-top d-flex align-items-center">
         <img class="img-fluid align-self-start" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
         <label>Checkbox:</label>
         <input type="checkbox" />
         <div class="card-body">
            <p class="card-text">Hello World. Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum</p>
            <p></p>
         </div>
      </div>
   </div>
</div>

enter image description here

Also as you can see the checkbox is not aligned at the bottom of the image..

Upvotes: 0

Views: 72

Answers (2)

Manu Joseph
Manu Joseph

Reputation: 81

i have made few changes in your html.

 1. moved the image inside card-body
 2. and used grid system for the alignment
hope this is what you are looking for


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-pane active" id="product1">
    <div class="card-body">
      <div class="row">
        <div class="col-3 text-center">
          <img src="http://via.placeholder.com/150x150/1f1a38 ffffff?text=Image" class="img-fluid align-self-start">
              <label for="checkbox">Checkbox:</label>
              <input id="checkbox" type="checkbox">
              
        </div>
        <div class="col-9">
          <p class="card-text">Hello World. Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri
            e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli
            di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum</p>
          <p></p>
        </div>
      </div>
    </div>
</div>

Upvotes: 2

Partho63
Partho63

Reputation: 3117

add padding-top: 0px; to your card-body like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tab-pane active" id="product1">
  <div class="card">
    <div class="card-img-top d-flex">
      <img class="img-fluid align-self-start" src="http://via.placeholder.com/150x150/1f1a38/ffffff?text=Image">
      <label>Checkbox:</label>
      <input type="checkbox" style="margin-top: 7px;"/>
      <div class="card-body" style="padding-top: 0px;">
        <p class="card-text">Hello World. Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa. Lorem Ipsum è considerato il testo segnaposto standard sin dal sedicesimo secolo, quando un anonimo tipografo prese una cassetta di caratteri e li assemblò per preparare un testo campione. È sopravvissuto non solo a più di cinque secoli, ma anche al passaggio alla videoimpaginazione, pervenendoci sostanzialmente inalterato. Fu reso popolare, negli anni ’60, con la diffusione dei fogli di caratteri trasferibili “Letraset”, che contenevano passaggi del Lorem Ipsum, e più recentemente da software di impaginazione come Aldus PageMaker, che includeva versioni del Lorem Ipsum</p>
        <p></p>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions