CODEWITHSUNDEEP
twitter-bootstrap-3
Bernd Wechner
Bernd Wechner

Reputation: 2133

Why is my bootstrap v3 column not 100% wide on my mobile phone?

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.

Upvotes: 0

Views: 163

Answers (1)

tfa
tfa

Reputation: 1699

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

Upvotes: 1

Related Questions