CSS: Aligning Two Divs Side by Side in Bootstrap

In this article, we’ll show you how to use CSS to align two divs side by side in Bootstrap.

Read more: CSS Tutorial

Using Bootstrap’s Grid System

Bootstrap is a popular front-end framework that provides a flexible grid system for easily creating page layouts. The grid system consists of a combination of rows and columns. In this grid system, the page is divided into 12 columns, and you can create different numbers and widths of columns within the rows.

To align two divs side by side, we need to use the appropriate classes within Bootstrap’s grid system. First, we need to create a row within a container. Adding a container to wrap the row ensures that the content is centered.

For example, we can create an HTML structure like the following:

<div class="container"> 
<div class="row"> 
<div class="col-md-6"> 
<div class="div1">Div 1</div> 
</div> 
<div class="col-md-6"> 
<div class="div2">Div 2</div> 
</div> 
</div> 
</div> 

In the example above, we created a container that contained a row and two columns within the row. Each column has the class col-md-6, meaning it takes up 50% of the row’s width. We created a div within each column and assigned it the classes div1 and div2, respectively.

Custom Styling

In addition to using Bootstrap’s default styles, we can also customize them to suit our needs. We can use CSS selectors to select and modify specific elements.

For example, we can create a CSS style like the following:

.div1 {
background-color: red;
padding: 20px;
color: white;
}

.div2 {
background-color: blue;
padding: 20px;
color: white;
}

In the example above, we define styles for the div1 and div2 selectors. We set properties such as background color, padding, and font color.

Demo

To better understand how to align two divs side by side, we can create a simple example. We’ll use the HTML structure and CSS styles mentioned above and add text to div 1 and div 2.

HTML code is as follows:

<div class="container"> 
<div class="row"> 
<div class="col-md-6"> 
<div class="div1">I am Div 1</div> 
</div> 
<div class="col-md-6"> 
<div class="div2">I am Div 2</div> 
</div> 
</div> 
</div> 

CSS code is as follows:

.div1 { 
background-color: red; 
padding: 20px; 
color: white; 
} 

.div2 { 
background-color: blue; 
padding: 20px; 
color: white; 
}

Running the above code in a browser, we’ll see div 1 and div 2 displayed side by side, with the styles we defined.

Summary

Using Bootstrap’s grid system and custom styles, we can easily arrange two divs side by side. First, create a row within a container and two columns within it, using the col-md-6 class to specify the width of each column. Then, add custom styles as needed, selecting and modifying the styles of elements using CSS selectors. Finally, we can use the example demo to verify our layout and styling.

I hope this article helps you understand how to arrange two divs side by side in Bootstrap!