Using Bootstrap 4.0 to Manage Rows and Columns in Web Design

Introduction

CSS is a tricky aspect of programming a front end for a web site – there are inconsistencies on elements and properties which can cause bugs in a cross browser runtime environment, so much so that even the language itself contains instructions to use specifically for a given browser.  This is – in fact – a very sad state of affairs and represents the mess the computing industry as a whole is in – with browser developers fighting for dominance forcing language (CSS in this case) developers to actually write different instructions for each browser!!!!!

Additionally, there are very few accepted web design and coding standards which guide the programmer on how to best develop an efficient method to achieve any given task with CSS.

Take for example the use of variables within CSS – these are denoted as follows within a .CSS file which can be included in the referencing source code with a standard <LINK REL> tag :-

At the top of the CSS file, we enter…..

: Root {

   –maintextcolor : #606060;

}

Then, in our classes, we reference the variable as follows…..

.headingcolor {color : var(–maintextcolor); }

.smalltext {color : var(–maintextcolor); }

Here you can clearly see that in the event the color needs to be changed, a simple change to the variable maintextcolor will take effect across all classes in which it is referenced.  Imagine having text color specified in over 50 classes – you can see how useful this is!  Yet many developers still do this…..

.headingcolor {color : #606060; }

.smalltext {color : #606060; }

If you would like to learn more about web design, you can visit the Stockport Web Design Company at  Photon Flux Web Design where you can ask questions or get in touch via telephone!

Grid Management

No move on to the complex issue of writing responsive code for a completely custom website – in other words – a website which is NOT simply a botched word press upload, but a website with a brand new look and feel, designed to be unique to the company whom it is being written for.

Imagine grid control with no variables, where sizing is specified in percentages and pixels (and whatever else!!!) all over and throughout the .CCS class file and you will begin to get the picture of just how difficult it is to change the width of standard column widths across the entire project.

Enter Bootstrap 4.  Not only do we not even have to manage our own variables, but they have taken it one step further by standardising the screen layout into a NESTED manageable grid of 12 columns, which can be merged and separated at will, padded or marginalised, colored and scaled with ease.

Finally there has been recognition that standardisation is required and Bootstrap 4 is the answer.  It makes the developers life much easier, but more importantly, it means that a given developer can move from one Bootstrap based system to another with ease, without the need to understand complex and convoluted botched up CSS which has usually been created by “hook or by crook” rather than within a methodical design process.

Whilst the Bootstrap class library contains many features, we are going to take an overview of the way it allows us to create complex responsive screen layouts for any web design with ease and simplicity.

The Bootstrap 4 Grid System

To begin with, image a screen divided into 12 sections horizontally.  Each section is equal in width.
You will notice – that no matter how large or small the screen is. There will be 12 columns each of the same width due to the fact that Bootstrap uses percentage based measurements to split the screen – not fixed pixel widths.

Let’s look at the code to do this.

<div class=’row’>

   <div class=’col-xs’>

      <span>Hello</span>

   </div>

   <div class=’col-xs’>

      <span>World</span>

   </div>

</div>

Initially we specify a “row” – the height of the row is determined by the height of the content which is placed within the row.

Within the row, we specify that we want ONE column and it must occupy ALL 12 of the available 12 columns (we use col-xs).  In that column we place “Hello”.

We then specify another column, again – it must occupy ALL 12 of the available 12 columns (col-xs).  But what I hear you say?  Within this single row – we have already used up all 12 columns with the “Hello” span.  Fear not – Bootstrap knows this and will place the “World” span on the line beneath the “Hello” span, forcing the “World” span to also take up 12 columns.

That’s simple enough – now lets change things around and add in a little more complexity.

<div class=’row’>

   <div class=’col-xs col-md-6’>

      <span>Hello</span>

   </div>

   <div class=’col-xs col-md-6’>

      <span>World</span>

   </div>

</div>

You will notice that there is a new class specifier on the col div.  “col-md-6” and it is present on each of the data items.

What this means is that on an extra small screen (denoted with col-xs) all 12 columns are used for this div.  But on a MEDIUM screen – only 6 of the 12 columns are used for this div – thus creating a column of 12/6 or HALF of the screen in width.  This makes sense, because on a medium screen, you have more space to play with horizontally – so we can place our div side by side instead of on top of each other.  Bootstrap will detect the screen size and automatically place the div side by side on a medium screen – and above and below each other on an extra small screen such as a mobile phone or small tablet.

Thus – when the column containing the word “World” comes along on a MEDIUM screen – there are STILL 6 of the 12 left to use, so it creates a second single column taking up 6 of the smaller columns thereby filling the rest of the row!

Let’s fill it all in now with the following example…..

<div class=’row’>

   <div class=’col-xs col-sm-6 col-md-6 col-lg-12 col-xl-4’>

      <span>Hello</span>

   </div>

   <div class=’col-xs col-sm-6 col-md-6 col-lg-12 col-xl-4’>

      <span>World</span>

   </div>

   <div class=’col-xs col-sm-12 col-md-12 col-lg-12 col-xl-4’>

      <span>!</span>

   </div>

</div>

Now, to understand this, you have to read downwards as well as across the code.  You will more clearly that within the row, the col specifies begin to interact with each other more clearly.  This is extremely important. 

On an extra small screen – we get:-

Hello
World

!

On a small screen we get:-

Hello World

!

On a medium screen we get:-

Hello World

!

On a large screen we get:-

Hello

World

!

On an extra-large screen we get Hello World!

Once you have grasped the above example and why the output is the way it has been described, you are ready to move on to more complex Bootstrap layouts which can further enhance your web design skills and ability to produce extremely complex fully responsive web layouts.