Search code examples
htmlcsstwitter-bootstrapbootstrap-grid

How can I make a text appear strictly on the bottom of an image aligned with the left side borer of the above Image-regardless of parent alignment?

I am trying to implement a view in HTML/CSS/Bootstrap where There is an image and some text immediately below the image BUT STRICTLY THE TEXT MUST START AT THE LEFT-SIDE BORDER OF THE IMAGE REGARDLESS OF THE LENGTH OF THE TEXT!

here is the required view: enter image description here

Problem is If I apply text-alignment:center; to the divs of the bootstrap columns (I am using bootstrap grids here) the picture goes to the center of the div but the alignment of the texts below the pic also come centrally below the picture but as I stated earlier I wanted to align the text to the bottom left no-matter what parent css is!

Here is what I tried(I am including only one column of the bootstrap grid used as others also contain similar information):

<div class="container main-div">    
        <div class="row"> 

            <div class="col-auto col-md-3 col-xs-6 col-sm-4">
                <div class="card-d">
                    <img src="pics/tea.jpg"  alt="tea">
                    <div class="desc">
                    <span><h4>Tea | 1 Kg</h4></span>
                    <p>The price is : 56.0</p>
                    <button>View</button>
                    </div>
                </div>  
            </div>

CSS:

    .main-div{
    width:90%;
    background-color:white;
    padding:5% 1%; 
    text-align:center;
    margin-left:auto;
}

.col-auto{
    position:relative;
    border:1px solid blue;
    margin:10px auto;
    padding-left:6%;
    padding-bottom:4%;

}
.col-auto > .desc{
    width:100%;
    justify-content:left;
    font-family:Arial;
    text-align:left;        

}

.col-auto img{
    width:140px;
    height:100px;
    padding:5px;
    display:inline-block;
    margin:0 auto;
    border: 1px solid #088837;
}
button{
    background-color:green;
    color:white;
    font-size:1em;
    border:0.1px;
    border-radius:3px;
    padding: 5px 10px;
}

After repeated try its the same I am getting:

enter image description here

Here is my Fiddle:

https://jsfiddle.net/vrw7ph13/

Solution

  • The problem is that in your css you have been targeting the direct children, when you write > it takes the direct children, but your .desc is not direct child of col-auto.

    check my modified version of jsfidle https://jsfiddle.net/752bkhj9/3/

    You have written 

    .col-auto > .desc

    but you don't have direct child .desc in your .col-auto, check your html

    And the text-align rule is inheritable, it inherits the styles from parent, you thought you were overwriting this rule using col-auto > .desc, but using > you were targeting non existing element.