#1
  1. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,397
    Rep Power
    221

    Bootstrap Twitter 4 images on the same line regardless of screen width.


    Hello;

    I want to achieve something in Bootstrap Twitter but I can't get it 100% the way I want.

    Code:
    <div class="row">
            			<div class="col-xs-1 col-sm-2 col-lg-1"></div>
            			<div class="col-xs-10 col-sm-8 col-lg-10">
    						    <div style= "display: flex;
    						  justify-content: space-between;">
    						      <img class="margin-right-5 img-responsive" src="https://productlaunchformula.com/workshop/images/thumb_1_color.jpg" alt="Responsive image">
    						      <img class="margin-right-5 img-responsive" src="https://productlaunchformula.com/workshop/images/thumb_2_color.jpg" alt="Responsive image">
    						      <img class="margin-right-5 img-responsive" src="https://productlaunchformula.com/workshop/images/thumb_3_color.jpg" alt="Responsive image">
    						      <img class="margin-right-5 img-responsive" src="https://productlaunchformula.com/workshop/images/thumb_4_color.jpg" alt="Responsive image">
    						    </div>
    						</div>
    					<div class="col-xs-1 col-sm-2 col-lg-1"></div>	
    					</div>
    But here it doesn't give me what I want here 100% the way I want it.
    I want the images to shrink and everything stays on the same line and they fill the page properly. Like this:


    This is what I want it to look like on Iphone and android

    This is what I want it to look like on desktop and Macbook

    And this is the webpage that currently does that (but it's not Bootstrap). You might have to put an email there.

    Would you please help me achieve that? I am using Bootstrap v3.3.7

    Thanks
    Last edited by English Breakfast Tea; July 7th, 2017 at 02:31 AM.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4308
    It looks like you've figured this out and decided to use CSS3 Flex. Those images are almost unusable with how small they are for 320px wide viewports though.

    By the way, flex-wrap defaults to "nowrap", so you don't need to specify it.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo