1. A Change of Season
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Mar 2004
    Next Door
    Rep Power

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


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

    <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 class="col-xs-1 col-sm-2 col-lg-1"></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

    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
    USA (verifiably)
    Rep Power
    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