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

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,246
    Rep Power
    220

    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 03:31 AM.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,109
    Rep Power
    4307
    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.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    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