Bootstrap Text

Bootstrap has a lot of utilities for controlling the styling and display of text content on web applications.

You can control the tex alignment, size, color and much more. Here we will be discussing all such features.

Bootstrap Text alignment

Firstly, let’s start with the text alignment. The horizontal alignment of the text can be controlled using four Bootstrap contextual classes namely:

  • .text-left: For left aligning the text
  • .text-right: For right aligning the text
  • .text-center: For center aligning the text
  • .text-justify: For a justified alignment (all lines with same width)

Check the code below for illustration:

To control the alignment as per the screen size you can use the text-* classes.

Here, the start can be replaced with sm for small, md for medium and lg for large screen size.

The following code snippet shows the use of this classes with left alignment.

Bootstrap Text wrapping and overflow

You can also prevent the text content from wrapping within a limited width. This can be done by using the .text-nonwrap class. For example:

You can also use the .text-truncate class for longer content.

This will truncate the text with an ellipsis.

Please note that display: inline-block or display: block is required for this to work properly.

Here’s the code for inline:

Bootstrap Text transform

You can transform some text for its case. In other words, Bootstrap provides you some utility classes that help you change the case of the , .

These classes are:

  • .text-lowercase: Transforms whole text into lower case
  • .text-uppercase: Transforms whole text into upper case
  • .text-capitalize: Transform only the first letter of each word to uppercase

Bootstrap Font weight and italics

So far we studied how Bootstrap helps us control the alignment, size, flow, and case of the text.

But as far as styling is concerned, there’s one more important thing that we need to know, It is called the text weight.

The text weight basically decides whether the text is bold, normal or light. The code below will show you the uses of the classes, .font-weight-bold, .font-weight-normal, font-weight-light for the same.

Another thing that you can see is italicising the text using the .font-italic class.

Have a look:

Bootstrap Vertical Alignment

The vertical alignment of the web-page components is a helpful styling feature.

You can align the positioning of the elements might not always go as expected especially when you’re using the different type of elements in one line (like text with image).

In such cases, altering the vertical alignment can help with a better neat positioning.

To understand the concept of Vertical alignment better, let’s have a look at the following CSS code:

From the above code, we can understand that  vertical alignment can be controlled using following basic properties:

  • baseline: Vertically aligning the element with the baseline of the parent element
  • text-top: Vertically aligning the element with the top of the parent’s font
  • text-bottom: Vertically aligning the element with the bottom of the parent’s font
  • sub: Vertically aligning the element with the subscript of the parent
  • super: Vertically aligning the element with the superscript of the parent

Now that, you are familiar with the basic ways in which an element can be vertically aligned then lets dive into the concepts of Bootstrap to know about its features and support for this.

Controlling Vertical Alignment in Bootstrap

With the help of Bootstrap, you can control the vertical alignment of the following elements:

  • inline
  • inline-block
  • inline-table
  • table cell elements.

Here’s the list of Bootstrap utilities for vertical alignment. You can easily draw similarities between these and the CSS properties we just saw:

  • .align-baseline: Vertically aligning the element with the baseline of the parent element
  • .align-top: Vertically aligning the element with the top of the element that is the tallest in the line
  • .align-middle: Vertically positioning the element in the middle of its parent element
  • .align-bottom: Vertically alignin the element with the element that is the lowest in the line
  • .align-text-bottom: Vertically aligning the element with the bottom of the parent’s font
  • .align-text-top: Vertically aligning the element with the top of the parent’s font

These utility classes will be used to control the vertical alignment of the element on the web page.

Let us now check out how different type of elements, are vertically aligned in Bootstrap:

Bootstrap Inline elements

The below code will illustrate vertical alignment for inline elements for baseline, top, middle, bottom, text-top and text-bottom

Table Cells

Bootstrap Float

The Float utility ensures the responsiveness of the content for the web-applications.

You can toggle floats on your web-page element making them more adaptable to the screen width for different devices.

Bootstrap offers responsive float classes at your service for a better responsive web page design.

Basically, float utility classes provided by Bootstrap are based on the CSS floats property.

They can float the element to the left or to the right or even disable the floating.

So, before we move on to the Bootstrap features of float, let’s have a quick recap of CSS float property.

CSS Float Property

In CSS the float property is there for the layout on the web-pages.

This property can be real useful when you want to wrap any text around images.

The float property for the <img> can be set for one side and the rest of the content will be positioned accordingly.

The permissible values for this property are as follows:

  • left – The float element will float to the left of the container
  • right– The float element will float to the right of the container
  • none – No float value specified. The element will be displayed as per its position in the text. The default value for the property is set to none
  • inherit – Inherit the float value from the parent element

The code below will show the float property applied on an image:

Now, that we understand the basic working of float, let’s get back to Bootstrap and see what it has to offer.

Bootstrap Float Classes

Based on the permissible values of the CSS float property, we have three basic Bootstrap classes:

  • float-left
  • float-right
  • float-none

The working of this classes is similar to the what we read about the respective values. The code below give an example of each for better understanding:

Apart from this, there are other utitlity classes as well, that we’ll discuss in this chapter.

Bootstrap Mixins

You can also toggle the floats using the Sass mixins. See the code below:

Bootstrap Responsive classes

There are also available, responsive classes for the different float values. Check the code below:

Bootstrap Clearfix

Bootstrap float utility is very helpful in positioning the components properly on the web-page.

But there are is an issue in this approach that needs to be addressed. Check out the code below to know about the same:

If you load this code on a browser, you can observer following points:

  • A <div> is created with a green border and some text content in it
  • The <img> added to this <div> is made to float to the right of the div
  • The image is overflowing from the <div> component

The third point is the float issue we were talking about.

When you make any element to float, it might flow around its containing element.

This is bad for the styling on the web page as the components not look very neat.

To fix this problem we have special hack in Bootstrap called the ‘clearfix’ hack.

Here we will understand what the ‘Clearfix’ hack is and how it can help us to solve the problem we discussed before.

Bootstrap Clearfix Hack

Basically clearfix, clears the overflowing float component.

You can add the clearfix to the containing element (like the <div> in this case) and will contain the floating element withing itself so it doesn’t overflow.

The code below explains how you can use clearfix in CSS.

Based on this knowledge, we will understand how we can use clearfix in Bootstrap.

Now that, we have understood the basic working of a clearfix, let’s move to Bootstrap.

Bootstrap Clearfix Utilities

So, we know that Clearfix quickly and easily clears the floated content within a container.

The basic classe used for this is the .clearfix. This is used with the parent element.

<div class="clearfix">...</div>

You can also use clearfix with Mixins

Bootstrap Borders

Borders are a popular styling element in web applications. They can be controlled for their colors, shapes, and appearance based on the developer’s style requirements.

Bootstrap has a lot of utility classes that can help you manage the borders around different elements on the web-page.

But before we get into that, let’s have look at the CSS borders to get a recapitulation of how the border property worked and what different values we could give to it.

CSS Borders

In CSS, the basic borders were controlled using the following properties:

  • border: Basic border class to set all the border properties in one goe
  • border-bottom: All the properties for bottom border
  • border-color: Color of all the four borders
  • border-left: All the properties for left border
  • border-radius: Radius for all the four borders
  • border-right: All the properties for right border
  • border-style: Style for all the four borders
  • border-top: All the properties for the top border
  • border-width: Width for all the four borders

There are other properties as well that can be used to style specific features for specific borders, but a little knowledge of the above ones will suffice in understanding the various Bootstrap features related to Borders.

Basic Bootstrap Border

As we know, Bootstrap has classes instead of properties to control the different features of the element.

Here, also we have the corresponding classes for the CSS properties we read before.

For example, here you can choose all the four borders using the .border class (just like the border property in CSS).

The code snippet below will illustrate the use of all the basic border-* classes:

Bootstrap Subtractive Border

The example you saw above shows the additive classes. This means that using each of these classes will add the specific (or multiple) borders. However using the border-*-0 classes will do the opposite and remove the respective borders.

Therefore, if you’re using the border-0 class, it will remove all the four borders while using the border-top-0 class remove only the top border.

See the code below for better explanation:

Bootstrap Border color

As we have seen in multiple occasions, Bootstrap has special utility classes for default colors indicating different status of the element.

Similarly, for borders too Bootstrap has the following contextual classes:

  • border-primary
  • border-secondary
  • border-success
  • border-danger
  • border-warning
  • border-info
  • border-light
  • border-dark
  • border-white

You can observe using the code below, how these classes provide different colors to the borders.

Bootstrap Border-radius

Following classes can be used for rounded borders with different radius:

  • rounded
  • rounded-top
  • rounded-right
  • rounded-bottom
  • rounded-left
  • rounded-circle
  • rounded-0

As you can guess, these classes can give rounded borders in different directions. Check the code below to understand their usage better.

Bootstrap Panels

more stuff on Bootstrap Panels like creating them and controlling their different aspects.

Bootstrap Basic Panels

Defining by the looks of it, a panel is just a bordered box that wraps around its content with some visible padding.

A basic panel can be created using following steps:

  • Firstly, like any other Bootstrap element that wraps around its content or holds some other elements in them, you need to create a <div>. In, fact here you need to two <div> elements. The inner <div> will hold the panel content
  • The two contextual classes that you need for creating a basic panel are:
    • .panel
    • .panel-body
  • The .panel class is will be used with the outer <div> while the .panel-body class will be used with the inner panel.

The code snippet below will give you a better understanding of what is discussed above:

You can also use the .panel-default class for styling the color of the panel above.

Bootstrap Panel Heading

The panel can have a header of its own. This can be used when you want to give a title to your panel content.

To create a panel heading, you can use the .panel-heading class. See the code below for example:

Bootstrap Panel Footer

Just like a panel header, you can also add a footer to your panel.

This is very useful when you want to ad a side note or a button related to some action for your panel content.

To add the footer to your panel, you just need to use the .panel-footer class with your <div>. See the code below for illustration:

Bootstrap Panel Group

Sometimes, there might be more than one side notes in your tutorial. In such cases, you can group multiple panels together.

In Bootstrap, the grouping of panels can be done you can wrap them inside a <div> with .panel-group class.

When used in such <div>, the panels loose their bottom margin. Check out the code below for a practical understanding:

Bootstrap Panels with Contextual Classes

Bootstrap provides a list of contextual classes to control the background colors of the panels. Below is the list of all these classes:

  • .panel-default
  • .panel-primary
  • .panel-success
  • .panel-info
  • .panel-warning
  • .panel-danger

See the code below to understand the use of all these classes:

Bootstrap Wells

Wells are getting popular with a lot of web applications these days.

Every now and then we come across some quiz where you select one of the four options and suddenly you feel a slight depth around your selected option making it different from the other ones.

This 3rd dimension is what wells are used for. Basically, these are special borders around a component with a slightly dark background giving you a 3 dimensional feel about the component.

Here, we will study all about the Wells and how you can use Bootstrap to control them.

Inset Effect

Inset effect is basically a styling feature in frontend development languages like Bootstrap and CSS where you give a sunken effect to a webpage component to for better styling.

This effect can also be provided using jQuery plugins.

You can use jQuery to put a border around the webpage elements (images in general). But these won’t be the usual CSS borders.

These are special borders that will cover the component (here, image) making it look like it is placed behind some kind of frame; hence, inset.

The code below illustrates the same inset effect on an image using the jQuery plugin. Have a look:

These are special borders that will cover the component (here, image) making it look like it is placed behind some kind of frame; hence, inset.

The code below illustrates the same inset effect on an image using the jQuery plugin. Have a look:

Here, the method insetBorder can have following parameters:

  • speed: This is the speed for the border toggle (generally when hovering over the element). The default value is 250 milliseconds
  • borderColor: Color for the border. The default value is white or #ffffff
  • inset: This will actually tell the sunken effect that the border will provide
  • borderType: The type of border being used like solid, dashed etc.

Although, these jQuery methods seem easy, the plugins might get a bit difficult to be integrated with your application. Thus, we require something easier.

Bootstrap wells use the same Inset effect to give a 3 dimensional effect to your webpage component. Let’s have a look.

Bootstrap Basic Wells

To create a basic well using Bootstrap, you need to follow these steps:

  • Create an element that you want to hold the well in. The most element we use for this purpose is the <div> element.
  • Next, you need to add the Boostrap class .well, to this <div> element.
  • The .well class will, actually, add a rounded border around the <div> element. Bakground color for a basic well is gray. We can also see some padding for a proper effect.

Check out the code below to understand this better:

Bootstrap Well Size

The size of the wells can be controlled using 2 contextual classes provided by Bootstrap:

  • .well-sm: This is for small sized wells
  • .well-lg: This is for large sized wells

If the class is not explicitly mentioned, the wells are medium/normal sized.

The code below shows the example for both the classes:

Background Color

As mentioned before, the background color by default is grey. However, you can change the background color using simple CSS code like below:

Bootstrap Jumbotron

Here we will discuss the uses and controlling of Jumbotron in Bootstrap.

Often used as page headers, Jumbotron is as its name suggests, the attention-magnet for you web-pages.

It can be used to attract the users notice towards some special content.

Creating a Bootstrap Jumbotron

In simplest words, jumbotron is just a big box with that can be used to highlight some content (text) on the web page.

Here’s what all you need to know about creating a shows for your webpages.

  • A basic jumbotron box is grey in color and has rounded corners.
  • The font size of the text content is considerably enlarged to attract the users attention
  • You can create a jumbotron for your page by using simple <div> element along with the Bootstrap class .jumbotron
  • You can put any valid HTML inside the Jumbotron. In fact, other Bootstrap elements can also be nested in it.

Let us now see, how we can put a Jumbotron inside a container.

  • In order to do this, you need to first create a <div> with class attribute set as “container”.
  • Next you’ll have to place your jumbotron component inside this <div>

The code below illustrates the same:

The advantage of putting a jumbotron inside a container is that the container avoids its extension to the edge of the screen.

If you want your jumbotron to take the width of the screen, you need to put it outside the <div class= “container”> element.

Check out the code below to understand more about this:

Bootstrap Jumbotron Page Header

Sometimes. The jumbotron might not go well with the rest of your webpage.

Sometimes you might need a more simple version of s page header to highlight your content.

For such cases, Bootstrap has a separate element known as a ‘Page Header’

Unlike, Jumbotron, page header is more like a section divider.

It is not a box that sticks at the top of your page to show text in the enlarged font.

It rather creates a neat section at the top of the page and shows the enlarged text there.

The neat section that we just told is displayed using s horizontal line.

This is different from a regular text underline in the sense that it provides some space to the header text making it look box with just a bottom border.

Here’s how you can create a page header for your web page:

  • First you need to create a <div> element. This will be the component to hold the header text
  • The class provided by Bootstrap for creating the page header is .page-header. Use this with your <div> and the page header is ready to be displayed.

See the code below for illustration:

Bootstrap Spacing

Filters are necessary to narrow down the data based on the required criteria.

It helps in searching data with the use of some string or other identifying variables.

A filter does not select the data for you, only provides you the most relatable option based on the criteria you set.

Bootstrap does not have a separate filtering component, but with the use of jQuery, we can design a mechanism to search for elements on the web pages.

Filter Tables

You can apply filters table data on your web-pages.

This is useful when the data is in tabular format (like a food menu with food name, picture, and price) and you can add the filter to select the desired data.

The below code illustrates the use of a jQuery filter for performing a case-insensitive search for items in a table:

Here’s the explanation for what just happened:

  • As mentioned earlier, we have used jQuery in the above code.
  • Now, here we are, basically, looping through all the rows in the table to search for the input text
  • We have used the toggle() method here. This ensures that the all the rows that do not match the input text are hidden (i.e. display: the none)
  • Another important method used here is the toLowerCase() method. As mentioned beforehand, this is a case-insensitive search. Therefore, all the input text is converted into the lower case making ‘VALUE’, ‘Value’ and ‘value’ same for the input search.

Filter Lists

Another element where a search or narrowing down of data might be needed is a list.

Here’s the code to perform the same case-insensitive search for items in a list:

Filter Dropdowns

Sometimes, the list of selectable options in the dropdowns other identifying variables too long to choose from.

Most often, this happens when you have to , from a list of colleges from all over the country while filling up your registration.

Therefore, simple code like below can help you create a filterable dropdown.

Here again, we are web pages case-insensitive search so that you can understand the example better:

Bootstrap Spacing

Bootstrap has a lot of features available for margins and padding. The various utility classes can be used to modify an element’s appearance.

How Bootstrap Spacing works

For a responsive-friendly margin or padding you need to assign the values to an element with the shorthand utility classes.

Bootstrap provides support for individual properties, vertical and horizontal properties and all properties.

The classes being used are built using a default Sass map that ranges from .25rem to 3rem.


The utility classes for spacing are applicable to all the breakpoints starting from xs and upto xl.

These classes have no breakpoint abbreviation in them. The reason being, these classes are applicable from the min-width value as 0 and upwards.

Therefore, they are not bound by any media query. However, there are breakpoint abbreviations available for the remaining breakpoints.

The naming format for these classes can be described as below:

  • {property}{sides}-{size} for xs
  • {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl

Here, the ‘property’ is replaceable with any of the following:

  • m – for classes responsible for setting the margin
  • p – for classes responsible for setting the padding

The ‘sides’ is replaceable with any of the following:

  • t – for classes responsible for setting margin-top or padding-top
  • b – for classes responsible for setting margin-bottom or padding-bottom
  • l – for classes responsible for setting margin-left or padding-left
  • r – for classes responsible for setting margin-right or padding-right
  • x – for classes responsible for setting both *-left and *-right
  • y – for classes responsible for setting both *-top and *-bottom
  • blank – for classes responsible for setting a margin or padding on all 4 sides of the element

The ‘size’ is replaceable with any of the following:

  • 0 – for classes responsible for eliminating the margin or padding by setting it to 0
  • 1 – (by default) for classes responsible for setting the margin or padding to $spacer * .25
  • 2 – (by default) for classes responsible for setting the margin or padding to $spacer * .5
  • 3 – (by default) for classes responsible for setting the margin or padding to $spacer
  • 4 – (by default) for classes responsible for setting the margin or padding to $spacer * 1.5
  • 5 – (by default) for classes responsible for setting the margin or padding to $spacer * 3
  • auto – for classes responsible for setting the margin to auto

More sizes can be added by adding entries to the $spacers Sass map variable.

See the code below for better understanding:


Bootstrap Horizontal Centering

For horizontal centering, Bootstrap provides class.  

This justifies the fixed-width block level content or, in other words, the content that has display property set as block and width by setting the horizontal margins to auto.

The code snippet below illustrates the same: