Home » bootstrap

Category Archives: bootstrap

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 webpage 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.

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.

You can also use clearfix with Mixins

// Mixin itself

Check the code snippet below to understand how clearfix can be used in Bootstrap in a typical webpage

Please follow and like us:
error

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.

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.

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:

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

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:

Please follow and like us:
error

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:

Inline elements

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

Table Cells

Please follow and like us:
error

Bootstrap Sizing

Bootstrap has a separate set of utilities for controlling the size of the element.

You can manage the width and height of the element as per the requirement.

Here, we will talk about the Boostrap Sizing utilities and discuss the various Bootstrap classes for the same.

, we will talk about the Bootstrap Sizing utilities and discuss the various Bootstrap classes for the same.

To understand the working better, we can first have a look at the CSS sizing properties.

These properties are used to control the normal height and width as well as maximum height and width.

So let’s have a look at the CSS sizing properties before we dive in to the Bootstrap concepts.

CSS Properties

CSS has following properties to control the sizing of the components:

  • height: For controlling the height of the element
  • max-height: For setting the maximum height of the element
  • max-width: For setting the maximum width of the element
  • min-height: For setting the minimum height of the set the element
  • min-width: For setting the minimum width of the element
  • width: For controlling the width of the element

Check the code below to get a good understanding of these properties:

Now that, you understand the basic sizing features in CSS. Let us get back to Bootstrap.

Bootstrap Sizing

Bootstrap lets you easily control the elements for its width or its height.

You can set these parameters relative to the parent components. Let’s check out some points that you need to know for Bootstrap Sizing utilities:

  • You can manage the width and height of the components using the $sizes Sass map present in the _variables.scss.
  • For width, we have the w-* classes and height we have the h-* classes. Where the * is replaceable by appropriate numbers
  • By default, Bootstrap supports the sizing for 25%, 50%, 75%, and 100%. Therefore, the * in the above point can be replaced with 25, 50, 75 or 100.

Modify those values as you need to generate different utilities here

Max-Width and Max-Height

Similarly, the max-width and max-height properties of CSS can also be controlled by following bootstrap clases:

  • mw-*: Sets the maximum width with the * value.
  • mh-*: Sets the maximum height with the * value.

The below code will illustrate the use these classes to control the maximum width and height for the value of 100%

Please follow and like us:
error

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 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.

Mixins

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

Responsive

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

Please follow and like us:
error

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 webpage as the components not look very neat.

To fix this problem we have special hack in Bootstrap called the ‘clearfix’ hack. In this chapter we will understand what the ‘Clearfix’ hack is and how it can help us to solve the problem we discussed before.

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

Please follow and like us:
error

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:

Subtractive

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:

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.

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.

Please follow and like us:
error

Bootstrap Containers

Here, we will check out the Containers, one of the most basic web page layouts employed by Bootstrap to design the web pages.

But before we move into that, let us first understand what a layout is and how a typical layout is made to come to real-world page.

Webpage Layout

A webpage layout is basically the template that helps you understand the sizing, positioning and styling of all its components.

More or less, every layout takes care about the following points:

  • Header: The top part of the webpage. It usually contains your website’s logo or name.
  • Navigation Section: This is the section of the page where all the Navbars are present. These can be normal navigation menus or drop-down carrying sub-menu of the selected menus.
  • Content Section: The content section contains all the necessary stuff for that web page.
  • Footer: The footer section of the web-page generally contains links to official stuff about the website or web application. You can find the links for Privacy Policy, About Us and Available Downloads from this part of the page.

This is the basic layout of any web page you’ll come across. A code below will show you a typical web page using the above mentioned layout:

Try the above code Run It

Bootstrap Container

The Bootstrap container layout is one of the most basic layouts for a webpage.

When you’re using the grid-system for your webpage, Bootstrap Container layout can help you the best.

Above-mentioned we’ll have to choose from a fixed-width/ fluid-width, responsive containers that suit best for our webpage vision.

The code below will illustrate the Bootstrap container’s usage on the web-page:

You can also use .container-fluid for use a full-width container that will span in the entire width of the viewport.

Please follow and like us:
error

Bootstrap Panels

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

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.

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:

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:

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:

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:

Please follow and like us:
error

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.

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:

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:

Please follow and like us:
error