Simple Guide to Understanding a Bootstrap Grid System

Before you can dive too deeply into a technology or development tool, you should have at least a high-level understanding of what the product is – or is not.

Bootstrap is a technology tool created as a front-end framework for developing web pages and applications. It has become one of the most popular tools referenced on the GitHub website, garnering in excess of 100,000 stars from users of Bootstrap functionality.

Some of the factors contributing to the success of Bootstrap are:

  • Price (it’s free to download)
  • Platform – Bootstrap is open source
  • Flexibility – it contains HTML and CSS templates for quickly designing buttons, forms, and other website content
  • Optional JavaScript extensions available
  • Broad acceptance and utilization by website and web application developers
  • Continuous additions to functionality and responsiveness to the developer community

With such a growing user base and many developer contributors to the product, it’s no wonder Bootstrap has experienced an amazing level of adoption for designing web applications and websites.

Functionality and Simplicity Combined

Image via Pxhere

Bootstrap today serves as a full-featured development and web page design tool for developers of all skill levels.

By combining architectural features to support advancements in such in-demand technologies as Saas, JavaScript, and CSS with ease of use, Bootstrap has become one of the most recognized and popular frameworks for front-end website building.

The flexibility of Bootstrap lets you as a developer select the features and components that most suit the design of your web pages. Variables can be utilized for such functions as controlling padding, color, and settings of individual objects.

Bootstrap’s responsive design and grid-based functionality enable you to create multiple variations of web pages for use on low or high-resolution devices, whether developing for mobile devices, tablets, laptops, or PCs.

With its focus on a grid design, Bootstrap is a relatively easy tool to gain proficiency in, building full websites that adapt to the devices running your applications.

A Simple Guide to Understanding

the Bootstrap Grid System

The Grid Concept

Bootstrap builds your webpages utilizing a grid layout that you can utilize to format responsive web pages for multiple devices. The responsive attribute refers to the application recognizing the device in use, and resizing images appropriately.

In general, the Bootstrap grid is designed to facilitate a width of 12 columns, although you can group columns together creating fewer but wider columns, if your design does not call for all 12.

If you use more than 12 columns in your grid, Bootstrap will stack them. In addition, where a large display may accommodate 12 columns quite readily, small screens will provide better presentation when columns are stacked.

 

Options for Grid Classes

Bootstrap offers you multiple options in creating dynamic and responsive screen layouts:

  • Xl – for screens equal or greater than 1200px
  • Lg – for desktops and laptops with screens equal or greater than 992px width
  • Md – for smaller laptops with screen width equal or greater than 768px
  • Sm – stepping down to tablet-size screens equal or greater than 576px wide
  • Xs – sized for mobile devices such as phones, with screens less than 576px wide

Grid classes can be mixed to provide more flexibility in layout. Each class will also scale to the next larger class, so if you want to design a grid for small and medium display, you can simply specify small.

Basic Rules for Using Bootstrap Grids

There are a few specific rules to keep in mind when building grids with Bootstrap:

  • To assure the desired alignment and padding of rows, the rows must be placed in a .container-fluid (for full-width) or .container (fixed-width)
  • Your content must always be placed in columns
  • Columns must be the immediate children of rows
  • Rows can only be used to contain columns
  • If you attempt to provide over 12 columns on a grid, they will be stacked
  • Column widths are specified in percentages of total width, and are fluid, making them sized in relation to their parent elements
  • All rows should be placed in a container

Bootstrap provides predefined classes for quick generation of grids, such as .col-sm-4 and .row

How the Grid Works

coding with laptop

Image by Pixabay

Bootstrap’s grid is designed for responsive layout, utilizing the familiar concept of rows and columns.

Containers

Groupings of these rows and columns are placed in at least one container, but possibly more. In its simplest form, a grid can consist of a single container, with one row and column:

<div class=”container“>
<div class=”row“>
<div class=”col“>Here is the grid content!</div>
</div>
</div>

This example, of course, does not utilize the classes such as Flexbox, CSS, or JavaScript components.

The container is a key element of Bootstrap. It essentially controls the width of your layout and is the root of your grid. The container can contain any element of your layout – rows, columns, and other markup content.

You can include multiple containers on a page to suit your design preferences, and a container may contain multiple rows.

Proper use of containers will ensure optimal alignment on the page, due to the property of container padding that keeps rows aligned with 15px margins. Inserting rows without being included in a container will result in a horizontal scroll that you did not intend, and your viewers will not appreciate.

Inserting Your Content – Columns

Formatting your content is never done in the rows of the grid. Content is placed in columns, and columns are placed in the rows.

With Flexbox implementation in Bootstrap 4, both vertical and horizontal alignment are accomplished with Auto-margin and Flex Utility classes.

Columns are invaluable in your layout design for multiple reasons:

  • Columns can vary in width automatically for responsive design
  • Columns create the horizontal placement and division across the display
  • Can contain other rows and columns through nesting
  • Will always be the same height as other siblings in the row
  • Columns create the horizontal separation across the display or viewport

Space generated between columns are referred to as the gutter.

Columns in a row will be spread horizontally across the row. When you include over the base 12 columns of the grid, the remaining columns will be stacked or wrapped vertically down, referred to as “column wrapping.” This may or may not be the effect you desire for your web page.

Flexbox introduces a new term for columns – Auto-layout columns. Flexbox offers additional controls over the alignment and justification of columns for your page layout.

 

Mobile Comes First

As part of this simple guide to understanding the Bootstrap grid system, you should also be aware that Bootstrap inherently puts mobile presentation first. This makes perfect sense, as you take a look around to see how website users are accessing your web pages – on phones and tablets.

With a “mobile first” approach to responsive design, xs (the smallest px value) is the default breakpoint in building your grid. Keep in mind that higher breakpoints will override smaller values. Size your columns accordingly, perhaps defining 3 columns for sm, but 4 columns when designing for md or higher values.

Grid Design Considerations

 

When designing your grid layout, keep these concepts in mind:

On smaller screen widths, columns will stack vertically and maintain their full width, unless you incorporate a specific class within your HTML markup details. Using such a specification will eliminate the possibility of stacking that you did not intend.

Smaller classes specified on your grid also apply to larger screens, so you truly only need to specify the smallest device/display you intend to support on your web pages.

Your columns will be equal height in the same row. Multiple options can be used to control formatting details, including Flexbox justify and alignment functions, auto-margins, and vertical centering.

Browser Support

Utilizing a design tool like Bootstrap would be all but useless if your browser did not support the results of your design. This is certainly not an issue with Bootstrap. Your web pages will be supported by nearly every popular browser that hits your website:

Browser Support

Mac

Chrome, Firefox, Opera, Safari

Windows

Chrome, Firefox, Internet Explorer (10+), Microsoft Edge, Opera

Mobile Devices

Android

Chrome, Firefox, Android Browser and WebView, Microsoft Edge

iOS

Chrome, Firefox, Safari, Microsoft Edge

A Brief History of Bootstrap

Initially developed by Jacob Thornton and Mark Otto as a framework to facilitate development for internal use at Twitter, Bootstrap (originally named Twitter Blueprint) grew from a tool to promote consistency in interface design into a full-function tool that was released in 2011 as an open source product for website developers.

Bootstrap 4 was released in January 2018, with an enhanced toolkit for developers that now supports the current migration to CSS flexbox and Sass.

Jacob, Mark, and a handful of developers continue to enhance and add functionality to Bootstrap, demonstrating their commitment to the on-going value of the product for current and prospective web developers.

 

Featured Image via Pxhere

 

The post Simple Guide to Understanding a Bootstrap Grid System appeared first on Programmer and Software Interview Questions and Answers.

find the cost of your paper

Sep 13, Grand Remembrances

Today is Grandparents Day in the United States. Being a Grand is a special honor. I feel very blessed that my wife and I have two grandchildren. We were able to visit them today. Yes, we are still being cautious with the coronavirus, but we also find it very difficult to not see them when they live so close. So today we did drop by to visit Jacob (age 10) and Sophia (age 7) along with their parents. We brought donuts and caught up with them. Our grandchildren are still pretty young and this is a precious time in their lives – and ours!

I wish I had known my grandparents better. We never lived in the same place. Dad was a career Air Force pilot, so we moved around a lot. But we did get to see them once in a while when they would visit us, or we them.

A Plague of Giants

There are five known magical ‘kennings’ or types: air, water, fire, earth, and plants. Each nation specializes in of these kennings, and the magic influences the society. There’s a big pitfall with this diversity of ability and locale–not everyone gets along.

Enter the Hathrim giants, or ‘lavaborn’ whose kenning is fire. Where they live the trees that fuel their fire are long gone, but the giants are definitely not welcome anywhere else. They’re big, they’re violent, and they’re ruthless. When a volcano erupts and they are forced to evacuate, they take the opportunity to relocate. They don’t care that it’s in a place where they aren’t wanted.

I first read Kevin Hearne’s Iron Druid books and loved them (also the quirky The Tales of Pell), so was curious about this new venture, starting with A PLAGUE OF GIANTS. Think Avatar: The Last Airbender meets Jim Butcher’s Codex Alera series. Elemental magic, a variety of races, different lands. And it’s all thrown at you from page one.

But this story is told a little differently. It starts at the end of the war, after a difficult victory, and a bard with earth kenning uses his magic to re-tell the story of the war to a city of refugees. And it’s this movement back and forth in time and between key players in this war that we get a singularly grand view of the war as a whole. Hearne uses this method to great effect.

There are so many interesting characters in this book that I can’t cover them all here. Often in books like this such a large cast of ‘main’ character can make the storytelling suffer, especially since they don’t have a lot of interaction with each other for the first 3/4 of the book–but it doesn’t suffer, thankfully. And the characterization is good enough, despite these short bursts, that by the end we understand these people and care about what happens to them.

If there were a main character it would be Dervan, a historian who is assigned to record (also spy on?) the bard’s stories. He finds himself caught up in machinations he feels unfit to survive. Fintan is the bard from another country, who at first is rather mysterious and his true personality is hidden by the stories he tells; it takes a while to understand him. Gorin Mogen is the leader of the Hathrim giants who decide to find a new land to settle. He’s hard to like, but as far as villains go, you understand his motivations and he can be even a little convincing. There’s Abhi, the son of hunters, who decides hunting isn’t the life for him–and unexpectedly finds himself on a quest for the sixth kenning. And Gondel Vedd, a scholar of linguistics who finds himself tasked with finding a way to communicate with a race of giants never seen before (definitely not Hathrim) and stumbles onto a mystery no one could have guessed: there may be a seventh kenning.

There are other characters, but what makes them all interesting is that they’re regular people (well, maybe not Gorin Mogen or the viceroy–he’s a piece of work) who become heroes in their own little ways, whether it’s the teenage girl who isn’t afraid to share vital information, to the scholars who suddenly find how crucial their minds are to the survival of a nation, to the humble public servants who find bravery when they need it most. This is a story of loss, love, redemption, courage, unity, and overcoming despair to not give up. All very human experiences by simple people who do extraordinary things.

Hearne’s worldbuilding is engaging. He doesn’t bottle feed you, at first it feels like drinking from a hydrant, but then you settle in and pick up things along the way. Then he shows you stuff with a punch to the gut. This is no fluffy world with simple magic without price. All the magic has a price, and more often than not it leads you straight to death’s door. For most people just the seeking of the magic will kill you. I particularly enjoyed the scenes with Ahbi and his discovery of the sixth kenning and everything associated with it. But giants? I mean, really? It isn’t bad enough fighting people who can control fire that you have to add that they’re twice the size of normal people? For Hearne if it’s war, the stakes are pretty high, and it gets ugly.

The benefit of the storytelling style is that the book, despite its length, moves along steadily (Hearne is no novice, here). The bits of story lead you along without annoying cliffhangers (mostly), and I never got bored with the switch between characters. It was easy to move between them, and they were recognizable enough that I got lost or confused. The end of the novel felt a little abrupt, but I guess that has more to do with I was ready for the story to continue, despite the exiting climax.

If you’re looking for epic fantasy with fun storytelling and clever worldbuilding, check out A PLAGUE OF GIANTS.

The post A Plague of Giants appeared first on Elitist Book Reviews.

The Artwork Of Gary Choo

Gary Choo is a concept artist/illustrator based in Singapore. I’ve know Gary for a good many years ( 17, actually ), working together in animation studios in Singapore like Silicon Illusions and Lucasfilm. Gary currently runs an art team at Mighty Bear Games, but when time allows he also draws covers for Marvel comics, and they’re amazing –

The Art Of Gary Choo
The Art Of Gary Choo
The Art Of Gary Choo
The Art Of Gary Choo
The Art Of Gary Choo

To see more of Gary’s work or to engage him for freelance work, head down to his ArtStation.

The post The Art Of Gary Choo appeared first on Halcyon Realms – Art Book Reviews – Anime, Manga, Film, Photography.

27