0

I've read a lot about bootstraps breakpoints and grid system now and perused many stackoverflow questions but remain bamboozled.

I have a simple bootstrap v3 container like this:

            <div class="container">
                <div class="row col-md vertical-align">
                    <div class="col-md-5">
                        image
                    </div>
    
                    <div class="col-md-7 d-flex">
                        text
                    </div>
                </div>
            </div>

And in a web browser this renders beautifully, but on my phone the image and text continue to occupy one row with no break and the image is thus scaled tiny and ugly and I'd like Bootstrap to do what it does best, render that image at the full phone width and the next beneath it, that is, break these two columns.

A live sample is her, at present:

http://hobart.gamessociety.info/

and I would be most grateful if anyone with experience could lend some insight into why this doesn't render as I'd like on my phone.

As I understood bootstrap it's phone first, and md says apply the 5/7 split on medium and larger screens and on smaller ones do what it does sensibly, i.e. not scale that image to tiny proportions and show both columns side by side, but break between them and show one above the other.

Bernd Wechner
  • 1,854
  • 1
  • 15
  • 32

1 Answers1

1

The class "vertical-align" adds the css style "display:flex" if you remove that you will see the items behaving as you currently desire (I think). Use chrome and inspect to add/remove css styles.

You could just add col-xs-12 to each div class.

       <div class="container">
            <div class="row col-md vertical-align">
                <div class="col-md-5 col-xs-12">
                    image
                </div>

                <div class="col-md-7 col-xs-12 d-flex">
                    text
                </div>
            </div>
        </div>

Here is an alternative to your second question

create a css class

.myClass {
    float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

And add it to the inner divs

<div class="container">
    <div class="row">
      <div class="col-md-5 myClass">
        image
      </div>

     <div class="col-md-7 myClass">
        text
     </div>
    </div>
</div>

Found the answer here Twitter Bootstrap 3, vertically center content

tfa
  • 1,643
  • 16
  • 18
  • That is indeed the case. Thank you kindly. But removing causes a secondary problem. In that the text in the right box is not long vertically centered relative to image, but at top and looks gruesome. vertical-align was the solution to that problem. Any other way to center the text vertically? – Bernd Wechner Oct 17 '20 at 00:37
  • Thanks that (sort of) worked. I have to put !important on the float which is fro some reason ignored without it (and browser debuggers show that but don't tell why). Now it centers and it renders fine on the phone. Thanks enormously! I don't understand it though. Take the "margin-right:-4" out and it doesn't work. – Bernd Wechner Oct 17 '20 at 01:38