2

I am trying to get a grid that allows me to have a center carousel with corners for icons etc.

The code I have is using Bootstrap 3 @ http://www.bootply.com/Mbi11Tfvq5#

I can't get the center cell to respond and pull in to allow the bottom row to show up. The image creates a scroll bar.

What I am doing wrong ?

<div class="container">
  <div class="row">
      <div class="col-sm-1 f">ax</div>
      <div class="col-sm-10 f">b</div>
      <div class="col-sm-1 f">ay</div>
  </div>

    <div class="row">
      <div class="col-sm-1 f">am</div>
      <div class="col-sm-10 f">
        <img class="img-responsive" src="http://dummyimage.com/3200x3200.png">
      </div>
      <div class="col-sm-1 f">an</div>
  </div>

    <div class="row">
      <div class="col-sm-1 f">ah</div>
      <div class="col-sm-10 f">b</div>
      <div class="col-sm-1 f">ai</div>
  </div>
 </div>

css

    /* CSS used here will be applied after bootstrap.css */
.f {
    border-style: solid;
    border-width: 1px;
    border-color: #000 ;
  }

.y {
  background: yellow ;
  }

.x {
    hight: auto;
  }

I am hoping to create the following structure in the page: Layout

Zenexer
  • 18,788
  • 9
  • 71
  • 77
hypermails
  • 726
  • 1
  • 10
  • 28

1 Answers1

0

If you're not too concern about supporting legacy browsers, you can use CSS3 Flexible Box layout for the second row. The defining aspect of the flex layout is the ability to alter its items' width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Your second row would look something like this:

  <div class="row flex">
      <div class="col-sm-1 blue">am</div>
      <div class="col-sm-10">
        <img class="img-responsive" src="http://dummyimage.com/3200x3200.png">
      </div>
      <div class="col-sm-1 blue">an</div>
  </div>

Then set the display value for .flex to something like:

.flex {
  display: flex;
}

This will get you something similar to your illustration. Here's a fiddle demo for you to review. http://jsfiddle.net/yongchuc/xbjca5z1/

Chris Yongchu
  • 789
  • 3
  • 8
  • But the jsfiddle does not make the image smaller when I resize the browser. the goal was to have the center cell image be responsive – hypermails Aug 27 '15 at 23:43
  • Works in the fiddle for me. – Chris Yongchu Aug 27 '15 at 23:45
  • *the goal was to have the center cell image be responsive*. The `img-responsive` class should have done that for you. – Chris Yongchu Aug 27 '15 at 23:46
  • Chris, thanks for the suggestion. the responsive tage enables the image only when the broswer is set at certain size and not at all other time - I assume that is a function of the image size. either way. – hypermails Aug 28 '15 at 01:55