Issue in text alignment in grid items

user_14897182 0
Viewed 45

I have an issue with text I need to separate text and money part and also have to align text in such a way that whenever I view in smaller text the money part to to next line

.adventure-card {
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  height:auto;
  justify-content:center;
  align-items: center;
  border-radius: 10px 10px 10px 10px;
  position:relative;
  line-height: 1.7;
}
.adventure-card img {
  /* TODO: MODULE_ADVENTURES_GRID */
  /* 1. Fill in the required properties. */
  width: 100%;
  height: 25vh;
  border-radius: 10px 10px 0px 0px;
}
 <div class="container">
    <div class="content">
      <!-- TODO: MODULE_ADVENTURES_GRID -->
      <!-- 1. Create the grid of adventures by adding child elements as required. -->
      <div class = "row">
        <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
          <a href = "resort/index.html">
            <div class = "adventure-card  border bg-light">
              <div class = "adventure-card img-responsive">
                <img src ="/assets/adventures/resort.jpg" alt = "tower.jpg">
              </div>         
                <p>Resort</p>
                <p>&#8377;1,200 </p>
            </div>
          </a>
         </div>
     
        </div>
        <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
         <div class = "adventure-card  border bg-light">
           <div class = "adventure-card img-responsive">
             <img src ="/assets/adventures/mount.jpg" alt = "Skiing.jpg">
           </div>
             <p> Skiing</p>
             <p>&#8377;1,900 </p>
         </div>
        </div>
      </div>
      <div class = "row">
       <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
        <div class = "adventure-card  border bg-light">
          <div class = "adventure-card img-responsive">
            <img src ="/assets/adventures/canopy.jpg" alt = "tower.jpg">
          </div>         
            <p>Canopy</p>
            <p>&#8377;1,800 </p>
        </div>
       </div>
       <div class="col-6 col-sm-6 col-lg-3 mb-4 d-flex align-items-stretch px-md-4">
         <div class = "adventure-card  border bg-light">
           <div class = "adventure-card img-responsive">
             <img src ="/assets/adventures/beachside.jpg" alt = "canopy.jpg">
           </div>
           <p mb-0>Beach Getaway</p>
           <p>&#8377;2,200 </p>
         </div>
        </div>
     </div>
    </div>
  </div>

Could anyone help me out? The text and money part is centered which is as expected but unable to separate text and money part

bootstrap-4 css html
3 Answers

Please refer to my code which is added below, is there any doubt the please let me know.


<div class="adventure-card  border bg-light">
  <div class="adventure-card img-responsive">
    <img src="/assets/adventures/resort.jpg" alt="tower.jpg" />
  </div>         
  <div class="text-center">
    <h5 mb-0>resort</h5>
    <span>&#8377;1,200</span>
  </div>
</div>
user_116255020

Use this:

 <p style="padding-left:20px">&#8377;1,200 </p>

add inline CSS with you currency P tag.

user_76489490

Add "flex-direction: column;" to your CSS:

.adventure-card {
  display:flex;
  flex-wrap: wrap;
  width: 100%;
  height:auto;
  justify-content:center;
  align-items: center;
  border-radius: 10px 10px 10px 10px;
  position:relative;
  line-height: 1.7;
  flex-direction: column;
}
user_149071370
Related