Guide to Bootstrap Columns: Examples, Tutorials, and Tricks

• Bootstrap, Guide
guide-to-bootstrap-columns:-examples,-tutorials,-and-tricks

Bootstrap •

Twelve Bootstrap columns, five breakpoints, and Flexbox are what underlies the iconic boilerplate’s bootstrap grid system. There are a dozen predefined classes, yet, these three stand behind the flexibility of the layout. They build a concrete foundation with responsive behavior for mobile-friendliness. As a result, developers can construct websites that look and function on different devices.

Read about Bootstrap buttons, Bootstrap grid, Bootstrap navbar, and Bootstrap modal.

Bootstrap columns do not come without a little help from rows and containers that hold everything together. The basic structure of every Bootstrap-powered website includes this quintessential trio. Columns break everything into digestible pieces creating order out of chaos.

Bootstrap Columns Fundamentals

First things first, understanding the fundamentals of Bootstrap columns is necessary to handle the framework properly. A dozen classes and utilities give you freedom of action. You can create any structure you want without drastic changes in the code.

  • Containers are must-haves. Use traditional .containerclass to create a layout with a responsive width or .container-fluid class to create a full-width structure on all devices regardless of dimension.
  • Rows are must-haves. They are wrappers for all your experiments with column organization. The immediate children of rows are columns. Rows and columns are inseparable.
  • You can change the column width depending on the screen size.
  • Columns can be reordered. You can change their position depending on the device.
  • Columns wrap and stack automatically.
  • You can use less than 12 columns in a row. Conversely, you can have more than 12 columns in a row, and the Bootstrap will deal with that on its own.
  • Columns can be broken into rows and columns. Nesting is a common thing.
  • Bootstrap 4 introduces auto-layout columns. Therefore, columns can “grow” and “shrink” on their own.
  • Ems or rems define the sizes of columns, thereby making them flexible. Note, pxs define breakpoints.

Dig a little deeper to refresh your memory about basic classes that are used for columns to create structures without any modifications in CSS files.

  • The column’s declaration indicates the number of columns that you want to merge. Thus, .col-4 means creating an area that occupies four columns.
  • In the fourth version, you are not obliged to specify the width of the column, since Flexbox does all the heavy lifting. Use .col class to create auto-layout columns. Note, you can mix and match it with classes that define the exact number of columns to merge (for example, .col-6).
  • Use col-{breakpoint}-auto (for example, .col-lg-auto) to create columns whose width will be set by the content inside.
  • Use traditional .col-* class to set the column width on the specific screen size.

o .col- are for devices whose screen is less than 576px;o .col-sm- are for devices whose screen is between 576px and 767px;o   .col-md- are for devices whose screen is between 768px and 991px;o .col-lg- are for devices whose screen is between 992px and 1199px;o .col-xl- are for devices whose screen is greater than 1200px. Use .w-100 class to break columns to a new line, thereby creating a multirow structure. Note, these lines will not have spaces between them. Use flexbox to align columns. You can go for.align-items-start, .align-items-center, align-self-start, and others. The same goes to horizontal alignment: use flexbox to your advantage.

Newsletter Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

  • Use .no-gutters class in a row to ditch all the gutters between the columns.
  • Use .offset-*-* classes to move the column to the left.
  • Use .mr-auto class to force sibling columns to move away from each other.

Reorder Bootstrap Columns

Bootstrap columns can be reordered depending on screen size. Moreover, with the fourth version, this process becomes elegant and hassle-free, thanks to Flexbox.

Several predefined classes allow changing the order of columns. First, you need to use .order class that is fully responsive. You can use breakpoints to set the order like this:

.order-sm-2.order-md-12

The line above means that the column will be the second one on small devices and the last one on the mid-sized devices. You can put any number from 0 to 12. Note, there are also two specific classes such as .order-first and .order-last. They do what they say.

Alternatively, for reordering, you can use baseline direction utilities inherent to Flexbox such as.flex-column-reverse.

Center Bootstrap Columns

Centering Bootstrap columns is easier in the fourth version, again thanks to Flexbox. All you need to do is to apply .justify-content-center class to the row.

As for centering the content inside the column, you can use a Flexbox class .align-self-center.

Different Layouts Made with Bootstrap Columns

We have compiled a collection of free themes and layouts that show the potential that is hidden inside this integral detail of the framework.

Bootstrap Template Builder

With Startup you can build a website online using the Bootstrap builder with ready-made designed and coded templates and themes.

Try FreeOther Products

Guide to Bootstrap Columns: Examples, Tutorials, and Tricks

Showcase by Startup

Showcase by Startup is an elegant HTML/CSS theme. It dishes up a bunch of content in a well-organized manner offering an eye-pleasing aesthetics. Here the layout has three equal columns and several rows. Each cell perfectly accommodates both visual and textual material serving as a perfect base for displaying portfolio pieces, blog posts, etc. If you want to modify the template, for example, change color or font, all you need to do is to use options panel on the left. There are standard settings that allow editing the appearance of the theme without modifying the code.

What’s more, the Bootstrap builder is packed with solutions where Bootstrap columns run the show. There is a businesslike “Our team” block and, compact yet informative, pricing table that are available for free.

Bootstrap Columns

Datta Able Bootstrap 4

Datta Able is a sterling admin panel that shows how to get the most out of Bootstrap columns. Here you can see a traditional left-sided layout where the right part accommodates the entire content. The latter features nesting with a varied positioning and width of the columns. Depending on screen size, the layout will shrink and change the order of blocks.

Unlike Showcase by Startup, Datta Able is a Bootstrap template that comes alone. If you want to customize it, you need to mess around with HTML, CSS, and JavaScript.

Material Dashboard

Material Dashboard

Material Dashboard is another admin template that easily handles the complexity of the structure. Much like in the previous example, the theme has two regular columns where the first one holds the navigation, and second contains content. The latter is presented as a perfectly organized grid. The key feature of this solution is Material Design principles that can be seen in every pixel.

Bootstrap Columns Fundamentals

Let’s move from admin dashboards to regular websites. Take a look at Rapid.

Rapid is a sleek and modern one-page multipurpose business template. It covers all the primary areas, including a portfolio for exhibiting work. Here you can see various types of layouts based on one, two, and three-column skeletons.

The Evenet

The Event

The Event template has mastered Bootstrap columns as well. Almost every other section is based on a grid system. There are two-, three-, and four-column layouts that efficiently accommodate the content. You can break it into pieces and use them in your projects to solve trivial issues.

Last, But Not Least

Without a doubt, the most popular area of putting Bootstrap columns in action is a portfolio that could not survive without a well-thought-out grid. Nevertheless, there are some other types of websites where this baseline component plays first fiddle; and, one of them is e-commerce.

Bootstrap Columns

Consider the Bootstrap eCommerce Template. This clean and neat theme has a five-column structure that is necessary to display products to potential customers without overwhelming them. The idea is simple, yet it does the trick. 

Conclusion

Bootstrap columns set the stage for the entire content. They are invisible, but you can not survive without them. While container and row perform a shaping role, columns create the whole structure, skillfully organizing and ordering various pieces of content. With Bootstrap 4, you can play with columns by applying predefined classes and utilities that are sprinkled with Flexbox magic.

Like what you’re reading? Subscribe to our top stories.

Using Bootstrap to Create Material Design Web Apps

• Bootstrap, Using
using-bootstrap-to-create-material-design-web-apps

Difficulty:BeginnerLength:MediumLanguages:

Google’s Material Design is ubiquitous in modern mobile apps. Perhaps it’s because most people today have come to love its bold colors, subtle shadows, and minimalist layouts. Wouldn’t it be great if you could easily apply the same design language to your websites and offer visitors a user experience they’re are well accustomed to? Well, with MDBootstrap, you can.

MDBootstrap, also known as Material Design for Bootstrap 4, is an opensource UI kit that allows you to use Bootstrap 4, a CSS framework you might already be familiar with, to create fully responsive websites that have a Material Design look and feel. It comes with over 500 components, dozens of animations, and support for several JavaScript frameworks, including jQuery, Vue, and React.

In this step-by-step tutorial, I’ll show you how to add the MDBootstrap UI kit to your web projects and use some of its components.

Or, if you want to get started right away with a professional Bootstrap theme, check out some of our ready-to-go templates.

1. Setup

MDBootstrap is available on cdnjs, and several other CDNs. Therefore, you don’t need to download it to your computer to be able to use it. But adding it to a web page—along with all its dependencies—does only take a few minutes.

Start by creating a new HTML document and opening it using your favorite text editor. Then add the following HTML5 boilerplate code to it:



  
    
    My Page

The MDBootstrap UI kit consists of just two minified files: mdb.min.css and mdb.min.js. It does, however, depend on Bootstrap, jQuery, and Font Awesome to provide several features.

So, inside the head tag of the HTML5 document, add the following link tags:

Next, towards the end of the body of the document, add the following script tags:

At this point, the web page is ready to display Material Design components.

2. Creating a Header

The first component of a Material Design web page is usually a header. It acts as a container for the navigation bar, in which you can not only display your company’s logo and name, but also add links to other important pages of your website. In the Material Design spec, the navigation bar is often referred to as the top app bar.

To create a header, all you need to do is use the header tag. Creating a navigation bar, however, is a little more involved.

First, you must create a nav tag and assign the navbar class to it. This creates a basic navigation bar with a white background. If you want to give it a color from the Material palette, you can use one of the many color classes available. They have intuitive names such as purple, red, and blue-grey.

Inside the tag, you can then use the navbar-brand class while specifying your company’s name or logo.

Note that when you’re using dark colors for the navigation bar, you should add the navbar-dark class to it to ensure that the text inside is readable.

Including links to other pages of your website is as easy as creating an unordered list having the navbar-nav class, with its items having the nav-item class.

In the above code, the ml-auto class pushes the links to the opposite end of the navigation bar.

If you try looking at the web page in a browser now, you should see a header that looks like this:

A purple navigation bar

3. Using the Grid

To add actual content to the web page, you’ll want to use the responsive grid system that Bootstrap offers. For the sake of a realistic example, let’s add two cards to the page, placed in a single row having two columns.

Start by creating a div element with the container class. It will serve as a container for all the rows and columns we add to this document. Inside it you can create rows and columns using the row  and col-md classes. Because all of this is going to be the main content of the page, it’s a good idea to wrap it in a main tag.

The col-md class ensures that both the columns have the same width and fit inside the row on screens whose width is at least 768 px. To target smaller or larger screens, feel free to experiment with the col-sm and col-lg classes.

You can now create cards inside both the columns using the card class. With MDBootstrap, your cards can have images, titles, buttons, and text. Here’s the code for a sample card that has all of them:



  
  
  

    
Cherry tomatoes to get costlier

    
With a no-deal Brexit, you're likely to 
    pay 10% more for cherry tomatoes next month.

    More

Similarly, go ahead and add another card to the page, this time in the second column. For best results, I suggest you use images that have the same dimensions.



  
  
  

    
Raw fruits and vegetables for breakfast?

    
Raw fruits and vegetables that have been thinly sliced are great way to start your day.

    More

As you may have noticed, the kit has intuitively-named classes, such as card-title and card-text, that help you quickly style the contents of your cards. Similarly, the btn and btn-primary classes help you give Material styles to your buttons.

With all the above changes, your web page should look like this:

Page displaying two cards

4. Creating a Form

Material Design forms have a very distinct look and feel. The design language goes into exhaustive detail about what each form element should look like, when it should be used, and where it should be placed.

MDBootstrap has styles for several HTML5 form elements. By using them, you can be sure that your forms conform to most of the guidelines of Material Design.

Let us now create a simple form your visitors can use to sign up for a newsletter. It shall have two text fields, one for a name and one for an email address. Additionally, it shall have a submit button.

The form will need its own row and column, so you must create them first. Because it’s alone, the column will stretch to fill the entire row by default. By qualifying the col-md class with a number, and by using the offset-md class, you can control the size and the position of the column in the row.

In the above code, the mt-4 and mb-4 classes give the row appropriate top and bottom margins.

Inside the column, create another card. It’ll serve as a container for the form and all the text associated with it. Optionally, you can use the card-header class to give a header to the the card, and thus the form too.


    
Subscribe to us

To create the form, all you need is the form tag. But you must remember to add the form-control class to each text field you add to the form. If you have a label associated with it, you must also wrap them both inside a div  element whose class is md-form. The following code shows you how:


    
Stay updated and get the latest 
        information about all our offers and discounts right
        into your inbox.

Here’s what the form should look like now:

The completed form

Conclusion

You now know how to create simple web pages using the Material Design for Bootstrap 4 UI kit. In this introductory tutorial, you learned how to use several important components offered by the kit, such as navigation bars, cards, and form controls. You also learned the basics of positioning the components using Bootstrap 4’s grid system.

To know more about MDBootstrap, do refer to the official documentation. 

Bootstrap 4 responsive navigation menu

• Bootstrap, Responsive
bootstrap-4-responsive-navigation-menu

Home
/
Snippets
/
Bootstrap 4 responsive navigation menu

Related Tags

navigation

menu

Recent Snippets



Bootstrap 4 responsive navigation menu snippet is created by sanjaysingh using Bootstrap 4.3.1, Javascript 3.2.1. This snippet is free and open source hence you can use it in your project.Bootstrap 4 responsive navigation menu snippet example is best for

Bootstrap navigation,

Bootstrap menu,

responsive.A great starter for your new awesome project with 1000 Font Awesome Icons, 4000 Material Design Icons and Material Design Colors at BBBootstrap.com.

Bootstrap Grid System Guide: Examples, Tutorials, and Tricks

• Bootstrap, System
bootstrap-grid-system-guide:-examples,-tutorials,-and-tricks

Bootstrap •

Bootstrap grid is at the core of the framework. It underlies everything. It is the heart and soul of the boilerplate and the main reason we choose it in the first place. In one word, it is where everything begins. If you want to embrace the power of the Bootstrap, you need to know it inside and out.

Read about Bootstrap navbar and Bootstrap modal.

When it comes to the Bootstrap grid, there is nothing complicated whatsoever. Like anything else, it obeys general rules and is built according to principles that stay consistent. Of course, you already know that it has 12 columns, unlimited rows, and requires a .container class to build a baseline layout.

However, there are still some things that you may find confusing. To eliminate these uncertainties, let’s clear things up a bit.

Startup Bootstrap Builder

Meaning of Numbers in Bootstrap Grid Main Classes

While the principles of the Bootstrap grid are evident, it can be a little confusing to get the grasp of the meaning behind the numbers. Let’s break the code behind .col-sm-3.

.col-sm-3

  • col – means a column
  • sm – means a type of screen size; there are four different types
    • sm – small screens: Majority of mid-sized cell phones with monitor size lies between 576px and 767px
    • md – medium screens: Desktops with monitor size between 768px and 991px
    • lg – large screens: Standard monitors with a size between 992px and 1199px.
    • xl – extra large: Screens that are greater than 1200px
  • 3 – means the number of Bootstrap grid columns to merge and form one area; you can put any number from 1 to 12

Note in Bootstrap 4, “xs,” the breakpoint that covers mobile phones whose monitors are less than 768px, was dropped. Instead, you should use .col-. It is applicable for layouts with less than 576px wide.

While a number at the end of a class is self-explanatory, the “sm” abbreviation may confuse some. So why do you need it? This classification of monitors, or to put it in other words range of breakpoints, allows developers to control the layout and change its behavior in order to make the website look just the way they want. This mechanism stays behind the flexibility of the Bootstrap responsiveness. For instance:

Online HTML Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before. Try now for free!

Learn MoreOther Products 

Column 1

This code means that Column 1 will take 1/2 width on cell-phones but 1/3 width on tablets, large desktop monitors, and even cell phones with monitors greater than 576px.

Also, it is vital to note that you are not obliged to list all the grid classes since the classes that define the behavior on the smaller screens set the behavior on larger screens until they are overridden. In our particular case, you do not need to specify .col-md-4, .col-lg-4 and col-xl-4 since col-sm-4 did it.

Vertical Alignment in Bootstrap Grid v3 and v4

If you are struggling with Bootstrap 3, vertical alignment still can be a nightmare. If you need to center a column, there are two methods.

First, you can benefit from the offset classes. The markup may look like this

The second method implies the utilization of time-proven margin: auto technique. The markup is this

.col-centered{
    float: none;
    margin: 0 auto;
}

As for other lucky guys who prefer the fresher, more updated and advanced version of the boilerplate (aka the 4th one) everything is done with just several lines of code thanks to Flexbox.

Use align-self-center like this


           

                
 
                    Center
                

           

           

                
 
                    Center

You can also employ in-built display utils such as display:table, display:table-cell, display:inline to center things. The markup may look like this


    

        

            I am centered vertically

How to Create 5 Equal Columns in the Bootstrap Grid

This one is tricky yet very exciting. Even though the Bootstrap grid is based on 12 columns, it is still possible to create a structure that uses an odd number of columns. If you are using the latest version of the boilerplate, everything is easy peasy. Thanks to Flexbox, you define five columns, and they divide the area into equal portions. The code snippet looks like this


   

      1 of 5
   

   

      2 of 5
   

   

      3 of 5
   

   

      4 of 5
   

   

      5 of 5

However, if you are still working with the third version, you need to create a special class where you set the specific width to each column and add it to your general stylesheet. The class should look like this

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

After that, you can freely use it in the document like this


    

       ...

Helpful Resources for Bootstrap grid

Although Bootstrap grid is not responsible for the decorative part of the website since its job lies in silent support of the entire interface, nevertheless, there are still some valuable tools that help to handle it efficiently.

Bootstrap Grid Generators

Shoelace is a popular tool to build Bootstrap grids. Manipulate rows and columns as well as switch between phone, tablet, desktop, and large desktop previews to edit each of these layout versions.

Shoelace

Layoutit

Unlike the previous example that specializes in the third version of the boilerplate, the team behind Layoutit follows updates. Therefore, their visual Bootstrap grid builder is centered around the fourth version. Here you can build the foundation as well as populate it with baseline components, both static and dynamic bringing about a wireframe of the future website.

Layoutit

Speaking of which, if the Bootstrap grid generators are not enough then we recommend taking a look at Bootstrap builders. Not only do they help to create a solid foundation for the future website but also design the entire interface from scratch using beautiful hand-crafted components.

Bootstrap Builders

Startup

Bootstrap Builders

Startup is a popular free Bootstrap builder for themes. It covers a large number of components that stand out with a modern design, businesslike nature, and pleasant user experience. Along with using predefined elements, developers are welcome to customize every inch of the interface; therefore, building fully-working templates that meet their expectations without much trouble.

Mobirise

Mobirise

Mobirise is another Bootstrap builder that runs on your local PC. It is available for Windows and Mac users. Much like Startup, it also does not require any coding skills. There is a handy interface where everything can be created by dragging and dropping.

Bootstrap Studio

Bootstrap Studio

Bootstrap Studio is a desktop application that focuses on building websites using Bootstrap grid. Much like the Startup, the visual editor is continuously updated so that you can benefit from the latest enhancements in the framework. It comes with numerous components that will please you with its custom design. 

Bootstrap Grid Templates for Designers

Where for developers everything begins with mixing and matching classes and utilities, for designers everything starts with a clean canvas in one of the popular graphic design programs. And, if you want to create a compatible Bootstrap template, you need a properly-aligned mockup that includes all the tiny details like gutters, viewport sizes, etc. Here is a small list of freebies to address this issue.

Bootstrap Grid Templates for Designers

What’s more, we have a small collection of Free Bootstrap Grid PSDs for Crafting Excellent Website Designs in our magazine as well.

Conclusion

Knowing Bootstrap grid well is a crucial skill. It is a foundation that might not be visible with the unaided eye, yet it is here, and it supports everything. If it goes wrong, it will take lots of time, effort, and money to fix the problem. Who wants that? Before jumping into the whole designing and decorating thing, you need to nail Bootstrap grid first.

Make sure a layout works on all screen sizes, and the structure complies with requirements. And, if you still feel insecure about handling the grid, you can always seek aid from visual builders like Startup that will solve problems quickly and efficiently.

Like what you’re reading? Subscribe to our top stories.

Advanced Bootstrap Blocks

• Advanced, Bootstrap
advanced-bootstrap-blocks

This plugin adds flexible Bootstrap 4 blocks to the WordPress editor which allow content-creators to build their own custom page layouts using the Bootstrap grid and helper classes.

The following Bootstrap components are currently available:

  • Container – fixed-width or fluid, inline background image
  • Row
  • Column
  • Button

This plugin provides 3 blocks.

advanced-bootstrap-blocks/column
Column (BS4)
advanced-bootstrap-blocks/row
Row (BS4)
advanced-bootstrap-blocks/container
Will this plugin apply Bootstrap styles or scripts available to my theme?

No. Bootstrap 4 styles have been included in the Gutenberg editor but need to be added to your theme for these blocks to appear correctly on your public-facing website.

This plugin is developed, tested, and is intended to be used with Understrap.

This plugin is giving me trouble. Can you help?

Yes. This plugin is under active development and maintenance–your feedback is important.

Please submit issues, feature requests through the support page, or browse the source at https://gitlab.com/helpful.dev/advanced-bootstrap-blocks.

Nice work – with this plugin and the power of Bootstrap I am finally convinced using the new Gutenberg Editor.


Read all 1 review

“Advanced Bootstrap Blocks” is open source software. The following people have contributed to this plugin.

Contributors

1.1.0

  • Added Card, CardHeader, and CardBody blocks
  • Added Bootstrap Classes inspector utility for toggling BS4 classes

1.0.10

  • Added background size, repeat, and position settings to Container Background Image settings
  • Fixed namespacing and inheritance issues with editor-specific Bootstrap grid styles
  • Removed unneeded wrapping div from around Container in WP editor

1.0.9

  • Fixed bug with Container save markup
  • Fixed bug with Button text state

1.0.8

  • Added background-image selector to Container block (adds style="background-image:url();" to Container markup)

1.0.7

  • Refined Button block (add URL picker, button text is directly editable)
  • General UI improvements

1.0.6

  • Made column .offset-* classes available in editor
  • Updated Button editor UI (per standards in WP editor handbook)
  • Improved block selection w/ CSS pointer-events

1.0.5

  • All Bootstrap styles now included in editor by default (this may change in the future)
  • Fixed bug with omission of custom container classNames in editor
  • Increased padding around main container layout

1.0.4

  • Added basic Button component (with style, block, size, outline, new-window settings)
  • Minor README changes