Emmanuel
Emmanuel

Reputation: 10870

What is the best way to make this responsive in bootstrap?

enter image description here

So I have a layout that I want to make responsive in bootstrap according to the device. What I want to know is how I can execute it in a way that is shown in the image. I have tried using table cells and bootstrap column/rows but to no avail.

I want the elements above availability and Link 1 to fall to the left of the words. How can I do this?

Here is my HTML and CSS:

<div class="col-md-12" style="border:black solid 1px;">
    <div class="row vertical-align">
        <div class="col-sm-2">
            <div class="row">
                <div style="padding:5px;" class="col-xs-4">
                    <input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
                </div>
                <div class="col-xs-8">
                    <img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
               </div>
           </div>
        </div>
        <div class="col-sm-3">
            <div class="row">
                <div class="col-xs-12">
                    <div><strong>Name:</strong>Bob</div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div><strong>Agency:</strong>AFDM</div>
               </div>
           </div>
        </div>
        <div class="col-sm-3">
            <div class="row">
                <div class="col-xs-12">
                    <div><strong>Stack:</strong>ADCM</div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <div><strong>Grade:</strong>C</div>
               </div>
           </div>
        </div>
        <div class="col-sm-1">
            <div class="row">
                <div class="col-xs-12">
                    <div class="led-red-trans"></div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>Available</strong>
               </div>
           </div>
        </div>
        <div class="col-sm-1">
                <div class="row">
                <div class="col-xs-12">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>Link</strong>
               </div>
           </div>
        </div>
        <div class="col-sm-2">
                    <div class="row">
                <div class="col-xs-12">
                    <a data-toggle="collapse" href="#collapseme"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <strong>More</strong>
               </div>
           </div>
        </div>
     </div>
     <div class="row">
         <div class="col-sm-12">
             <div id="collapseme" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">One</li>
                    <li class="list-group-item">Two</li>
                    <li class="list-group-item">Three</li>
                  </ul>
                </div>
            </div>
     </div>
</div>

CSS:

.vertical-align {
  display: flex;
  align-items: center;
}   

.led-red-trans {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}

  /* Large Devices, Wide Screens */
    @media (min-width : 1200px) {
        .vertical-align {
            display: flex;
            align-items: center;
        }   
    }

    /* Medium Devices, Desktops */
    @media (min-width : 992px) and (max-width : 1199px) {

        .vertical-align {
            display: flex;
            align-items: center;
        }   
    }

    /* Small Devices, Tablets */
    @media (max-width : 768px) and (max-width : 991px) {
        .vertical-align {
            display: flex;
            align-items: center;
        }   

    }

    /* Extra Small Devices, Phones */ 
    @media (max-width : 767px) {

        .vertical-align {
            display: block;
            align-items: center;
        }   

    }

    /* Custom, iPhone Retina */ 
    @media (max-width : 480px) {

        .vertical-align {
            display: block;
            align-items: center;
        }   

    }

And a CODEPEN: http://codepen.io/nilerafter24/pen/VPYpqq

Upvotes: 0

Views: 125

Answers (3)

Frogger
Frogger

Reputation: 185

My suggestion would be to break it into 3 columns. And then split those columns into sub columns. Like so..

large screen
      l4                      l4                                 l4
|             |       l6      |       l6        |        l6          l6    |
|    Image    |  |Name, Agency| |Stack, Group|  |  |Availability| |Link 1| |

medium screen 
       m4             m4               m4
|             |       m12       |      m12
|             |  |Name, Agency| |  |Availability| 
|             |       m12       |      m12
|             |  |Stack, Group| |    |Link 1|

small screen everything will be sm-12

a simple implementation - codepen

Upvotes: 1

Dixit
Dixit

Reputation: 1379

this will help you some how with pure bootstrap classes.

<div class="col-md-12" style="border:black solid 1px;">
    <div class="row vertical-align">
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="row">
                <div style="padding:5px;" class="col-xs-4">
                    <input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox" />
                </div>
                <div class="col-xs-8">
                    <img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg" />
               </div>
           </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="row">
                <div class="col-xs-12 col-lg-6">
                    <div><strong>Name:</strong>Bob</div>
                </div>
            <div class="col-xs-12 col-lg-6" >
                    <div><strong>Stack:</strong>ADCM</div>
                </div>

           </div>

            <div class="row">

            <div class="col-xs-12 col-lg-6">
                    <div><strong>Agency:</strong>AFDM</div>
               </div>
                <div class="col-xs-12 col-lg-6">
                    <div><strong>Grade:</strong>C</div>
               </div>
           </div>
        </div>
        <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
            <div class="row">
                <div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
                    <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
                </div>
                <div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
                    <span class="glyphicon glyphicon-lamp" aria-hidden="true"></span>
                </div>

                <div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
                    <strong>Available</strong>
                </div>

                <div class="col-xs-6 col-lg-6 col-sm-6 col-md-6">
                    <strong>Link</strong>
                </div>
            </div>
        </div>
     </div>
     <div class="row">
         <div class="col-sm-12">
             <div id="collapseme" class="panel-collapse collapse">
                  <ul class="list-group">
                    <li class="list-group-item">One</li>
                    <li class="list-group-item">Two</li>
                    <li class="list-group-item">Three</li>
                  </ul>
                </div>
            </div>
     </div>
</div>

Upvotes: 2

Chris Happy
Chris Happy

Reputation: 7295

This is the theory behind how I would do your code:

enter image description here

  • Surround each of the sections in a div and float:left them or display: inline-block them.
  • Use media tags to add float: none or display: block when the times comes.

Note Do not use table for responsive design, it's the worst to deal with.

Rough Example:

.first,
.second,
.third {
    width: 33%;
    padding: 1%;
    display: inline-block;
}

img {
    max-width: 100%;
}


.vertical-align {
  display: flex;
  align-items: center;
}

.led-red-trans {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
}


/* Large Devices, Wide Screens */

@media (min-width: 1200px) {
}


/* Medium Devices, Desktops */

@media (min-width: 992px) and (max-width: 1199px) {
}


/* Small Devices, Tablets */

@media (max-width: 768px) and (max-width: 991px) {
    
}


/* Extra Small Devices, Phones */

@media (max-width: 767px) {
}


/* Custom, iPhone Retina */

@media (max-width: 480px) {
  .vertical-align {
    display: block;
    align-items: center;
  }


  .first,
  .second,
  .third {
    width: 100%;
  }
}
<div class="col-md-12" style="border:black solid 1px;">
  <div class="row vertical-align">
    <div class="col-sm-2 first">
      <div class="row">
        <div style="padding:5px;" class="col-xs-4">
          <input style="margin:40px 0 0;" class="form-inline form-control" type="checkbox">
        </div>
        <div class="col-xs-8">
          <img class="img-responsive" src="https://img-new.cgtrader.com/items/109741/84b639735c/human-stylized-head-bust-base-3d-model-ztl.jpg">
        </div>
      </div>
    </div>
      <div class="second">
    <div class="col-sm-3">
      <div class="row">
        <div class="col-xs-12">
          <div><strong>Name:</strong>Bob</div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div><strong>Agency:</strong>AFDM</div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="row">
        <div class="col-xs-12">
          <div><strong>Stack:</strong>ADCM</div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <div><strong>Grade:</strong>C</div>
        </div>
      </div>
    </div>
          </div>
      <div class="third">
    <div class="col-sm-1">
      <div class="row">
        <div class="col-xs-12">
          <div class="led-red-trans"></div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>Available</strong>
        </div>
      </div>
    </div>
    <div class="col-sm-1">
      <div class="row">
        <div class="col-xs-12">
          <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>Link</strong>
        </div>
      </div>
    </div>
    <div class="col-sm-2">
      <div class="row">
        <div class="col-xs-12">
          <a data-toggle="collapse" href="#collapseme"><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span></a>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12">
          <strong>More</strong>
        </div>
      </div>
    </div>
  </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <div id="collapseme" class="panel-collapse collapse">
        <ul class="list-group">
          <li class="list-group-item">One</li>
          <li class="list-group-item">Two</li>
          <li class="list-group-item">Three</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions