# Bootstrap column alignment



## howard.a.s (Jul 22, 2005)

Please take a look at the following code.


```
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-4">
                        </div>
                        <div class="col-md-8">
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-4">
                        </div>
                        <div class="col-md-8">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```
If I place an image in col-md-4 and text in col-md-8, and when viewing the resulting page using Firefox Responsive Page Viewer, I notice that when reduced to the smallest of screen sizes that col-md-4 remains aligned more to the left of the text underneath in col-md-8. Is there a way for me to have col-md-4 become more centralized over col-md-8 when viewed in small screens and how would I alter my existing code to allow for this?


----------



## JiminSA (Dec 15, 2011)

Certainly, Howard ... put the class img-responsive in the img tag for your picture which will be in the col-md-4 div and then override it's inherant alignment by including this code in your css file:

```
.img-responsive {
    margin:0 auto;
}
```
Doing this will centralize all your images which use the img-reponsive class.


----------



## howard.a.s (Jul 22, 2005)

JiminSA said:


> Certainly, Howard ... put the class img-responsive in the img tag for your picture which will be in the col-md-4 div and then override it's inherant alignment by including this code in your css file:
> 
> ```
> .img-responsive {
> ...


I'll give this a try. As you say, it should solve this problem for me. I was doing a bit of research of my own into this last night and came across this https://stackoverflow.com/questions...ap-column-using-offset-for-small-devices-only and got to wondering whether I should be doing something like so that the 4 column moves right by 2 columns over the 8 column therefore centralizing over it, but only in small screens? Still, your way sounds much simpler, so fingers crossed.....

BTW. I'm still a bit uncertain as to the whole sm, md, lg, issue when it comes to specifying which I should use. Is it okay to use md when wanting the visible layout to scale up and down to the larger and smaller sized screens?


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> BTW. I'm still a bit uncertain as to the whole sm, md, lg, issue when it comes to specifying which I should use. Is it okay to use md when wanting the visible layout to scale up and down to the larger and smaller sized screens?


I tend to use only the md class which upsizes and downsizes nicely - *this link* may give you extra insight


howard.a.s said:


> so that the 4 column moves right by 2 columns over the 8 column therefore centralizing over it, but only in small screens? Still, your way sounds much simpler, so fingers crossed.....


You can certainly go that route, Howard, but bare in mind that offset only affects the left margin, so it will not centre the content, per-se. Which is fine for text but not for an undersized image. So in order to achieve centralization in your example you would be better using the modified img-respnsive class which is far easier


----------



## howard.a.s (Jul 22, 2005)

Unfortunately I'm still having no joy in centering left hand column image above right hand column text when viewed in smaller screen sizes, which I guess is likely due to my poorly structured source code.

Perhaps best for me to explain that not having been blessed with a good understanding of bootstrap, I used this https://startbootstrap.com/template-overviews/2-col-portfolio/as my starting point. After some alterations I ended up with this http://www.themetaldetective.co.uk/sandbox/31/index.html which is kinda like my initial layout idea, the main problem being that my coding is a mishmash of original and new, with styles having been added inline, which I realize is both sloppy and unacceptable, resulting in the layout failing to deliver when resized down, with the image over the text not centering in smaller screen sizes. I guess I'd be better off to start over from scratch, but not being confident with how to structure my code so as to ensure proper responsive layout, or how to go about adding my own external styles to source code (i.e rows/columns etc.) which already appears controlled by the bootstrap style sheet, I'm uncertain how to go about this. To this end, please can you suggest any already structured bootstrap starter templates that might offer me a better starting point when attempting to achieve this kind of layout? 

As always, any constructive advice gratefully received.


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> with the image over the text not centering in smaller screen sizes


I noticed that you had not included my suggestion to use an 'img-responsive" override to center the image over the text. But that fact notwithstanding, you still won't achieve the effect you want, because your image occupies 4 columns and your text occupies 8 columns.
In order to get the desired effect you would need to not only include my suggestion, but also to change your column split from 4:8 to 6:6, if you get my drift?


----------



## JiminSA (Dec 15, 2011)

Blimey here's me introducing .img-responsive overrides, when all you need to do is use the classes .img-responsive and _*.center-block*_ in your img tag to centre your image. Kindly disregard the override suggestion, but use the aforementioned classes like this:

```
<img class="img-responsive center-block" src="... etc.,
```


----------



## howard.a.s (Jul 22, 2005)

Okay. So I've tried "img-responsive center-block" but seem unable to get this to work. I've then tried "col-md-4 col-sm-offset-2" together with your suggestion of "img-responsive" and https://stackoverflow.com/questions/10989238/center-align-image-within-div-horizontally style="display:block;margin-left:auto;margin-right:auto" which, after a few other minor positioning tweaks, appears to have achieved the desired outcome. The first (top left) block uses the updated code, while the remaining 3 blocks remain as before. Please resize down the page and see what you think - http://www.themetaldetective.co.uk/sandbox/31/index2.html - There's probably several ways to achieve this visible layout, and while I'm convinced that this is not necessarily the right way, it certainly seems to do the trick. What do you think?


----------



## JiminSA (Dec 15, 2011)

I don't know why but .center-block is definitely not grafting
No matter, your inline styling has achieved what you wanted and I don't think that your col-sm-offset-2 comes into play at all, as you've not specified a col-sm setting, so you might as well take it out as it's superfluous.
Otherwise, nicely done


----------



## howard.a.s (Jul 22, 2005)

Okay, I'll try taking out the offset and see what happens. Incidentally, and for the sake of learning, what was it that I missed out when adding the offset?

It will probably take me a day or two to get to grips with all of the info and alterations that I need to make, both to this page and to my other page (the page into which my carousel will be inserted), and so I'll post back just as soon as I've got a little bit further in order to let you know how I'm getting on.

BTW. I did take a look at glyphicons, fontawesome, googlefonts etc. and am trying my best to absorb, understand and learn. 

Thanks a million for all your help and advice so far.


----------



## JiminSA (Dec 15, 2011)

howard.a.s said:


> Incidentally, and for the sake of learning, what was it that I missed out when adding the offset?


When you specified your offset:

```

```
you used col-sm-offset-2 without a corresponding col-sm-*, which kinda negates the offset I think ...


----------



## howard.a.s (Jul 22, 2005)

I think the error might lie in my interpretation of what I read, as I guess I took it that I should specify offset to apply only to the size of screen I wanted it to, and with col-sm-offset meaning only to be applied when viewed in the smallest screens? Here's the link to the page I got this idea from: https://stackoverflow.com/questions...ap-column-using-offset-for-small-devices-only - mind you, with my brain at the moment, this might apply only to those viewing in Cinemascope and who are wearing 3D specs!  Still, at least the current layout works, so I'll just chalk this up to experience and do my best to keep on learning.


----------



## JiminSA (Dec 15, 2011)

It's true that the offset will only apply to the grid size you specify (e.g. col-sm-*) but you need to give it a column width (col-sm-4) before it can apply the offset, within that width


----------



## howard.a.s (Jul 22, 2005)

So presumably I'd write 

```
<div class="col-md-4 col-sm-4-offset-2">
```
and having not yet tried altering or removing this, would you say it's probably best to leave this in or take it out. As you say, if it's not currently set properly then presumably it's not having any effect anyway?


----------



## JiminSA (Dec 15, 2011)

Yes, that code would place your text/image 2 columns in on a 4 column spread.
I would take it out as a) it's ineffective and 2) could be confusing
(That a) and 2) was a typo, but I like it )

Aargh! Just noticed it shouldn't be

```

```
it should be

```

```
OR

```

```


----------



## howard.a.s (Jul 22, 2005)

Returning to my earlier question, as to how to move all of my inline styles to an external style sheet, would you consider this necessary, or is it okay to just leave as-is? As for those classes already defined in the bootstrap css, for instance

```
div class="col-md-4"
```
, and to which I've added my own custom inline styling, for instance

```
<div class="col-md-4" style="padding:5px 0 14px 0;border:0;margin:0 0 10px 0;">
```
 is this considered bad practice? Should I be achieving this in a different way, and if so, how? As to a) and 2), I think it was Chevy Chase in National Lampoons Vacation who said something similar. I love that movie


----------



## JiminSA (Dec 15, 2011)

The chief objective of a style sheet (.css file) is to make styles commonly accessible across a site for the sake of uniformity. But it's use is not written in stone. I use inline styling periodically, when I want to do something different. So I see nothing wrong with it. Obviously if you want the same inline style to be applied to other parts of your site then you would make a class of it and put it in a .css file. But for necessary one-off styling, it's perfect.


----------



## howard.a.s (Jul 22, 2005)

Fair enough. I'll settle for that. I'll post back to this thread again over the course of the next few days once I've had the opportunity to tinker around with this page some more, and so as to let you know whether I have any further questions. Thanks again for now and enjoy your weekend.


----------



## howard.a.s (Jul 22, 2005)

Just a quick update. I've removed the offset and retested my page, which continues to function regardless. Clearly the offset, having been incorrectly entered, was making no difference. The layout now seems good, with left-hand column image centering above right-hand column text when resized in to smaller screens. Your comments and suggestions with regards to inline versus external styles are noted. As this is just one single page, as opposed to an entire multi-page website where global changes via an external style sheet might be preferable, I shall leave as-is.


----------



## JiminSA (Dec 15, 2011)

Cool


----------



## howard.a.s (Jul 22, 2005)

Here's a link to the page with the offset removed from the top left hand block - still resizing and centering properly http://www.themetaldetective.co.uk/sandbox/31/index3.html


----------



## howard.a.s (Jul 22, 2005)

and just for interests sake I've also uploaded a version of my page using the

```
"col-md-4 col-md-4-offset-2"
```
 and with the

```
img class="img-responsive" style="display:block;margin-left:auto;margin-right:auto"
```
 changed back to just

```
img class="img-responsive"
```
 but this still refuses to center the image - not that it matters now anyway 'cos my page works just fine using the previous format, but I wanted to try it out anyway. Not sure why this isn't working, probably my fault, durhh....


----------



## JiminSA (Dec 15, 2011)

When I inspect the img html I see

```
<img class="img-responsive" style="display:block;margin-left:auto;margin-right:auto"; src="img/fruit+veg.jpg" alt="" />
```
??? Did you change it back ???


----------



## howard.a.s (Jul 22, 2005)

Ooops.... apologies for the confusion. Here's a link to the page running the alterations to which I refer - the alterations that appear still not to work http://www.themetaldetective.co.uk/sandbox/31/index4.html
http://www.themetaldetective.co.uk/sandbox/31/index4.html
As I say, this doesn't matter now, as with your help I've finally got a fully functional page with centering images, but out of interest I just wondered what I might have done wrong in order for the offset approach not to work when used.


----------



## JiminSA (Dec 15, 2011)

Well now! It appears to me that in order for offset to work, we must declare the entire line and compensate by reducing the column by the offset!
Check out _*this SO thread*_


----------



## howard.a.s (Jul 22, 2005)

Makes sense. This would certainly explain why my attempts at this have so far failed. I'll try again and let you know how I get on.


----------



## howard.a.s (Jul 22, 2005)

Still experimenting with this and will post back with an update as soon as possible.


----------



## howard.a.s (Jul 22, 2005)

Emmm.... seems I've now tried just about every possible permutation I can come up with, but still unable to successfully implement the column offset approach to make my image position centrally over my text when sizing down to smaller screens. Nevertheless, as my existing layout now works properly using the other method previously described, I guess I'm probably going to have to admit defeat (for now) and come back to this again when I have a bit more spare time. Should I manage to discover where I'm going wrong with this, I'll post back to this thread with my findings.


----------

