How can I understand bootstrap column settings

[terryfoster]

I have done loads of research and either the examples are not good enough or I'm incredibly thick.

I have tried to set up different samples myself to determine the differences between these column names and have found no change in characteristic between the xs column widths and the md column classes.

Basically I understand that there are twelve columns on any device whether it be a midget mobile or a 50 inch monitor - fair enough.

However I had my page split up with a heading for three columns of equal width.

I wanted it to be three across on a large screen, or single column on a mobile.

Hence I tried an example with <div class="col-xs-3 col-sm-3 col-md-6 col-lg-12">

I tried to do another page with a two column split with the left column two wide fixed and the other 10 being flexible .

I had the rest of the content in the right hand column all in divs set at 5 wide so that they overlapped and went to the next row if they did not fit.

What I do not understand is when to use the different prefixes xs/sm/md/lg and what purpose do they have when embedded? Can anyone set up any practical example to show the different results these rules give. Do the letters make any difference?

Thanks in advance for any feedback

Terry

[ALsp]

Hi Terry,

It sounds like you are fairly new to CSS. I'm not going to offer you advice on Bootstrap, as I believe it is bloated and simply not a good solution. I will, however, offer you an alternative. Our Harmony Page Builder is the most powerful and easy to use layout building tool ever created for Dreamweaver. If web design is your business, and you've got a small budget, you should seriously consider it. It will automate the task of making any type of modern, responsive layout, as well as providing you with unlimited email and phone support to get you over any unexpected speed bumps.

Here is the link, but understand that there are a few Bootstrap aficionados on this forum who might be able to assist you if you really want to use Bootstrap.

PVIIHarmony Flexbox for Dreamweaver

[Nancy OShea · Accepted solution]

You have it backwards.   Bootstrap is mobile-first and mobile devices are 1 column by default so you don't need to express it.

12 x 1 column = 12

6 x 2  columns = 12

4 x 3 columns = 12

3 x 4 columns = 12

<div class="container">

<div class="row">

<div class="col-sm-6 col-md-3">

COLUMN 1

</div>

<div class="col-sm-6 col-md-3">

COLUMN 2

</div>

<div class="col-sm-6 col-md-3">

COLUMN 3

</div>

<div class="col-sm-6 col-md-3">

COLUMN 4

</div>

</div>

</div>

[BenPleysier]

Just to add to the confusion, here is my take on why people are having a problem understanding the Bootstrap grid system. The problem stems from the naming convention of the col part in col-sm-6.

Yes, you are right when you say that, in Bootstrap, all screens, whether large or small, are divided into 12 Bootstrap-Columns.

When we look at the following from W3Schools

we see that a span-6 spans 6 Bootstrap-Columns. As such, the convention should have been span-6-sm, to say span 6 Bootstrap-Columns to show my content in 2 screen-columns when the device width is small and larger. Instead we have to put up with col-sm-6.

Furthermore, if no span (col) is stipulated in Bootstrap, the span will default to col-xs-12, meaning that all devices with a screen width of extra small and larger (all screens) will span 12 Bootstrap-Columns

[terryfoster]

Thank you Ben but I still do not understand why I see multiple classes called in one line -

hence:

<div class="col-xs-3 col-sm-3 col-md-6 col-lg-12">

If it means that the column defaults to 3 columns for Xs and Sm but 6 for Md and 12 for Lg

when all devices have the same number of columns... I do not understand.

Unless it should be:

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">

I would understand this as being use all 12 columns on small devices, 6 columns on medium and only 3 on large screens.

NOW - am I getting close???

[terryfoster]

I have put a sample of the website onto my private home page site.

http://www.tdrd.karoo.net

The problem I now have is that when I shrink the screen to a mobile, the left column stays fine but the right column goes underneath.

I am sure this is in the column definition somewhere.

Please can you advise.

Thank you

Terry

[BenPleysier]

<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">

What this means is that you start with 4 screen-columns in an XS device, override this with 4 screen-columns in an SM device, override this with etc.

This has the same effect

<div class="col-xs-3">

which means 4 screen-columns for all devices.

As an illustration, I want 1 screen-column for XS, 2 screen-columns for SM and MD and 4 screen-columns for larger screens. My classes would read

<div class="col-sm-6 col-lg-3">

1 screen-column is the default value, SM covers SM and larger.

[terryfoster]

Thank you everyone for all the feedback. I have decided to use bootsrtap for the main page content but then responsive widths for the two columns inside.

The problem I now have is that I set a div to 75% of the remaining space within a 12 column div in bootstrap.

Yet it does not cover to the end of the page.

I have tried removing the 15px margin but still I lose the right hand side of the page.

example on www.tdrd.karoo.net

click on artist1 and you will see what I mean.

Thank you

Terry

[BenPleysier]

Terry,

When you load the data, you are also loading the following

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" type="text/css" href="bootstrap/3/css/bootstrap.css">

<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>

<link rel="stylesheet" type="text/css" href="_css/styles.css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>East Hull Secret Artists</title>

<script type="text/javascript" src="bootstrap/3/js/bootstrap.js"></script>

<script type="text/javascript">

$(document).ready(function(){

// this part disables the right click

$('img').on('contextmenu', function(e) {

return false;

});

//this part disables dragging of image

$('img').on('dragstart', function(e) {

return false;

});

});

</script>

This is very confusing for a document that already contains the information.

I suggest that you remove the above from the data document so that you are left with the bare minimum.