Greetings from South Devon! I'm new to BackdropCMS (from the D7 world) and am trying to create a subtheme of Bootstrap_lite. So far, so good. However, Instead of the 25% - 50% - 25% column layout for two sidebars and main content, I want to alter to something like 20% - 60% - 20%.

I'm new to Bootstrap also and could do with a pointer to where I would make this change most effectively. Is it Bootstrap? Is it Layouts?

I'm learning on the fly so anyone with wise words would be most welcomed!

Thanks,

Martin

Accepted answer

For example, if you are using the Harris layout, you can change the number of columns that are used...

The layout is based on 12 columns, so it would be a multiple of 1/12th...  

So one way would change the 3 to 2 and the 6 to 4 (that's a guess) it may be 8 :) ...

The col-pull-6 and col-push-3 do as the name suggests... push or pull a column into position. 

In the Harris layout you would change this file: layout--harris.tpl.php

Comments

Hi from South Yorkshire.

What layout are you using... It's normally the layout that sets the columns.

Regards

Steve

For example, if you are using the Harris layout, you can change the number of columns that are used...

The layout is based on 12 columns, so it would be a multiple of 1/12th...  

So one way would change the 3 to 2 and the 6 to 4 (that's a guess) it may be 8 :) ...

The col-pull-6 and col-push-3 do as the name suggests... push or pull a column into position. 

In the Harris layout you would change this file: layout--harris.tpl.php

One way to inspect the CSS is to copy and paste the CSS from the theme into a webpage that will UnMinify the code.

I use https://unminify.com

Copy the contents of the file bootstrap.min.css

and paste it into the website and you get the CSS properly formatted.

So, the md part in col-md-6 relates to the overall width of the webpage.

The following are taken from the CSS

xs = 100% page width
lg = min-width: 1200px
md = min-width: 992px
sm = min-width: 768px

So if you want less space at either side on bigger screens change md to lg 

Hope this helps.

Superb - thanks for such a quick response @DrAlbany. That's enough for me to get on with.

 

You could also do CSS overrides in your theme...

For example...

.col-md-3 {
    width: 20%;
}
.col-md-6 {
    width: 60%;
}

.col-md-push-3 {
    width: 20%;
}

.col-md-push-6 {
    width: 60%;
}

.col-md-pull-3 {
    width: 20%;
}

.col-md-pull-6 {
    width: 60%;
}

.col-md-offset-3 {
    width: 20%;
}

.col-md-offset-6 {
    width: 60%;
}