Clever Geek Handbook

How do you center a templated display control in Bootstrap while still being responsive?

I have a templated display control that I am trying to set to a grid in Bootstrap. I can control the HTML and styles on the display template, but not the surrounding HTML, grid dimensions, and image source.

The template contains a left-justified header with a responsive image:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae mattis diam. Aliquam sodales urna non urna accumsan, eget tempus arcu viverra. Vestibulum dui risus, eleifend vel aliquam ...
            <!-- Start repeated code element -->
            <div id="center-me" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">
                <h4 id="must-be-lined-up-with-image">Left Justified Header</h4>
                <img id="must-be-responsive" src="http://i.imgur.com/ISRUCaV.jpg" class="img-responsive">
            </div>
            <!-- End repeated code element -->
            Ut fermentum neque elit, nec ultricies est ultrices ac. Ut luctus purus ac mi euismod sodales. Aliquam auctor posuere sodales. Proin sed nulla condimentum, tempor arcu ut, congue elit. Cras ... 
        </div>
    </div>
    <div class="row">
        <div class="col-xs-4">
            <!-- Start repeated code element -->
            <div id="Div1" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">
                <h4 id="H1">Left Justified Header</h4>
                <img id="Img1" src="http://i.imgur.com/ISRUCaV.jpg" class="img-responsive">
            </div>
            <!-- End repeated code element -->
        </div>
        <div class="col-xs-4">
            <!-- Start repeated code element -->
            <div id="Div2" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">
                <h4 id="H2">Left Justified Header</h4>
                <img id="Img2" src="http://i.imgur.com/ISRUCaV.jpg" class="img-responsive">
            </div>
            <!-- End repeated code element -->
        </div>
        <div class="col-xs-4">
            <!-- Start repeated code element -->
            <div id="Div3" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">
                <h4 id="H3">Left Justified Header</h4>
                <img id="Img3" src="http://i.imgur.com/ISRUCaV.jpg" class="img-responsive">
            </div>
            <!-- End repeated code element -->
        </div>
    </div>
</div>

There are additional requirements for the template itself:

  • The title must be left aligned and aligned with the image
  • Image cannot exceed 100%
  • Container for header and image should be centered on the page
  • If the image is larger than the grid size, it must shrink appropriately to fit into the grid

This screenshot is the exact layout to be achieved.

In Chrome, it looks great:

Chrome

But it doesn't work at all on Firefox or IE:

Firefox

I created an example from Bootply of what I am trying to achieve: http://www.bootply.com/ZSNbC15oyA

+3


source to share


4 answers


After you couldn't find a suitable pure-CSS solution, I found one using jQuery that works in these browsers:

$(document).ready(function() {
  $(".img-responsive").each(function (index, element) {
        $(element).css("max-width", $(element).closest("div[class^='col-'],div[class*=' col-']").innerWidth());
    });
});


(Note: A real implementation will use a better selector than ".img-responsive")

0


source


Well, the answer is very simple: you just remove the elements DIV

you added to kill the responsiveness of the column grid.

<div id="Div1" style="margin-left: auto; margin-right: auto; display: table; border: 1px solid blue;">

and since we are at it you can remove the same id for all images and replace the classes for easier manipulation, so add the following CSS

.col-xs-4 .myBox, .col-xs-12 .myBox{border: 1px solid blue; margin:10px auto; width:90%}
.must-be-responsive{width:100%; height:auto;}


Anyway, take a look at this bootply I forged from your example

Explanation:

Usually people are tempted to get confused with Bootstrap's positioning system when in fact the strength of Bootstrap is the positioning system, so when we think in layout we have to think about BS grids whereas we want to style those grids.

If we need an extra style with margins and spacing, we know that margins will affect the grid system, so the likelihood that this style will come from additional elements added inside the grids. So in this particular case, I added a div with a class .myBox

that has a blue border, 90% width, and a horizontal margin property auto

to make sure it will fit any width

+1


source


Your problem comes from the display: table CSS property ; ... Browsers have some differences in rendering tables, so unless you need it for something specific, it is useless when you only need a CSS grid since you are using bootstrap columns.

0


source


Add .img-centered class to your img tag

.img-centered{
       margin:0 auto;
       float : none;
       display:block;
}

he centered your image

0


source






More articles:


All Articles