align two images and text on the same line boostrap

Question

i basically have an text in between and two images around it one on right and the other on left but when ever i try to align it either one of the images gets to the next line whereas i want them on the same line here the code

   <div style="background-color:#ddb56c;clear: both; " class="container">

    <div class="col-lg-3 col-xs-3 col-sm-3 col-md-3">

    </div>

    <div class="col-lg-6 col-xs-6 col-sm-6 col-md-6" >
        <div class="clearfix">
            <img class="img-responsive pull-left" src="images/Homepage_03.png" style="max-width: 100%;"/>
            <h1>Maroon Decor</h1>
            <img class="img-responsive pull-right" src="images/Homepage_05.png" style="max-width: 100%;" />

        </div>
    </div>
</div>

Possible duplicate of http://stackoverflow.com/questions/11900457/align-image-to-left-of-text-on-same-line-twitter-bootstrap — Mistalis, Aug 03 '16 at 10:14
i was reading this post actually my is different because i have two images the left image and text are perfectly aligned but the issue arises in the right image that goes to the second line — uneeb meer, Aug 03 '16 at 10:16
What do you want actually? Image+h1+Image? Like this in screen? — Mr. Perfectionist, Aug 03 '16 at 10:18

score 0 · Answer 1 · answered Aug 03 '16 at 10:19

0

You can display the header inline.

<style>
h1 {
    display: inline;
}
</style>

answered Aug 03 '16 at 10:19

RemanBroder

117
1
6

well that was exactly what i want just one more thing the things are aligned but the text is at the top looking pretty i tried to gave some padding but it wont come down possible way to get it centered vertically? – uneeb meer Aug 03 '16 at 10:23

Mr. Perfectionist · Accepted Answer · 2016-08-03T10:32:17.793

0

You have to do this actually. You have to divide your screen in 3 + 6 + 3. Put one image in div 3 then text in div 6 and then another image in div 3

**If you use all col-lg-x col-xs-x col-sm-x col-md-3 then it will be same design for all device.

    <div class="col-lg-3 col-xs-3 col-sm-3 col-md-3">
      <img class="img-responsive pull-left" src="images/Homepage_03.png" style="max-width: 100%;"/>
    </div>

    <div class="col-lg-6 col-xs-6 col-sm-6 col-md-6" >
        <div class="clearfix">

            <h1>Maroon Decor</h1>


        </div>
    </div>

    <div class="col-lg-3 col-xs-3 col-sm-3 col-md-3">
      <img class="img-responsive pull-right" src="images/Homepage_05.png" style="max-width: 100%;" />
    </div>
</div>

edited Aug 03 '16 at 10:32

answered Aug 03 '16 at 10:21

Mr. Perfectionist

2,605
2
24
35

it did the job but the mobile view gets messed up – uneeb meer Aug 03 '16 at 10:25
that did the trick! thanks man unfortunately can't Up vote Your solution – uneeb meer Aug 03 '16 at 10:32

align two images and text on the same line boostrap

2 Answers2