Designing a Bootstrap layout with twin divs adjacent to each other

I am trying to design a webpage with two Divs positioned side by side using bootstrap styles. However, the code I have been using is not yielding the desired outcome. Is there anyone who can offer me some guidance on how to achieve this?

Thank you.

 <style>
    .boxlayout {
    background-color: white ;

    border: 2px solid black;
    padding: 10px;
    margin: 10px;
}
</style>
<div class="border row boxlayout" style="float:left">
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
</div>
 <div class="border row boxlayout" style="float:right">
  <div class="border col-md-3">.col-md-3</div>

  

jqueryhtmlcsstwitter-bootstrap

Answer №1

In order to display two divs side by side, you need to arrange them in a row and assign each the appropriate number of columns. Bootstrap follows a 12-column layout system. To have two divs next to each other, the sum of their column numbers should be less than or equal to 12:

<div class="row">
    <div class="border row col-md-6 boxlayout">
      <div class="border col-md-3">.col-md-3</div>
      <div class="border col-md-3">.col-md-3</div>
      <div class="border col-md-3">.col-md-3</div>
      <div class="border col-md-3">.col-md-3</div>
    </div>
    <div class="border row col-md-6 boxlayout">
      <div class="border col-md-3">.col-md-3</div>
</div>

Answer №2

First Solution

To achieve the desired layout, you can apply the CSS property display: inline-block;

.boxlayout {
  background-color: white ;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;

  display: inline-block;
  vertical-align: top;
}
<div class="border row boxlayout">
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
  <div class="border col-md-3">.col-md-3</div>
</div>
<div class="border row boxlayout">
  <div class="border col-md-3">.col-md-3</div>
</div>

Second Solution

If you prefer a different approach, you can also use display: flex;

.container{
  display: flex;
  flex-direction: row;
}

.boxlayout {
  background-color: white ;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}
<div class="container">
  <div class="border row boxlayout">
    <div class="border col-md-3">.col-md-3</div>
    <div class="border col-md-3">.col-md-3</div>
    <div class="border col-md-3">.col-md-3</div>
    <div class="border col-md-3">.col-md-3</div>
  </div>
  <div class="border row boxlayout">
    <div class="border col-md-3">.col-md-3</div>
  </div>
</div>

Answer №3

If you're looking for a bootstrap-only solution, this snippet should meet your needs perfectly. Be sure to run it in fullscreen mode to see the layout properly. (Click "Expand Snippet" below)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-3">Left 1</div>
            <div class="col-md-3">Left 2</div>
            <div class="col-md-3">Left 3</div>
            <div class="col-md-3">Left 4</div>
       </div>
    </div>
   <div class="col-md-6">  
        <div class="row">
            <div class="col-md-3">Right 1</div>
            <div class="col-md-3">Right 2</div>
            <div class="col-md-3">Right 3</div>
            <div class="col-md-3">Right 3</div>
       </div>
  </div>
</div>

Answer №4

Exploring the possibilities of Bootstrap version 4.3.1 by referring to the documentation here and here:

<div class="container">
    <div class="row justify-content-between"> 
        <div class="col-8">
            <h1 class="font-weight-bold">Hello</h1>
        </div>
        <div class="col-sm d-flex justify-content-end align-items-center">
            <h1 class="font-weight-bold">World</h1>
        </div>
    </div>
</div>

Answer №5

<div class="row">
  <div class="col-md-3">left side</div>
  <div class="col-md-6">main content area</div>
  <div class="col-md-3">right side</div>
</div>

Kindly adhere to the grid layout style of Bootstrap

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display the JSON boolean value on the webpage using Ajax and Jquery

After using Ajax with a GET request to consume a REST web service, I now have the results displayed in my console. Here are some images related to the REST API I am consuming: However, when attempting to print the results inside a table, only one result ...

javascriptjqueryjsonajaxrest

There seems to be an issue with the <mat-form-field> where normal input functions correctly, but encounters an error when trying to use mat

I've searched through other inquiries, but none have provided the solution I am looking for. <mat-form-field> <mat-select matInput placeholder="Favorite food"> <mat-option *ngFor="let food of foods" [value]="food.value"> ...

htmlangularweb

Is it feasible to send a GET form to two separate views using two buttons?

On one view, I have a form that functions perfectly. http://myurl.com/myapp/filter_objects/?risk__worktask=1&craft=3 In another view, I need to export the filtered list to a PDF. Currently, I store the results in session and access the list from ther ...

htmldjangoformsget

Submit information from an HTML form to a PHP script and then send the response back to the client using AJAX,

Looking to run a PHP script using AJAX or JavaScript from an HTML form and then receive the results on the HTML page. This is what my changepsw.php file looks like: <?php // PHP script for changing a password via the API. $system = $_POST['syst ...

javascriptphpjqueryhtmlajax

"Can someone guide me on the process of transmitting data to a client using Node in combination with

I am new to web development and struggling to understand how to transfer data from the Node server to the client while also displaying an HTML page. I am aware that res.send() is used to send data, but I'm having difficulty maintaining the client disp ...

javascripthtmlnode.jsexpressweb-development-server

How can you use jQuery to display an image when hovering over text?

Looking for a tutorial or script that displays an image when hovering over HTML text with the mouse? ...

javascriptjqueryhtml

Displaying maximum number of items in each row using ngFor

Is there a way to automatically create a new row within the 'td' element after the ngFor directive has generated 10 image repeats? Currently, all the images are displayed in a single td and as more images are added, they start to shrink. <td ...

cssangularhtml-tablerepeat

Utilizing values from .properties files in Java with Spring for internationalization: A straightforward approach to handle Strings

Here is the code snippet I am using: @Value("${app.user.root}") private String userRoot; This code helps me to fetch a constant value from my application.properties file. Within my GetMapping method, I need to redirect to the error page and pass a S ...

javahtmlspringspring-mvc

Exploring NodeJS Express Routing Across Various URIs/URLs

In my application, there is a public folder that contains HTML/CSS3/JS code. This folder has two main parts: one with the public facing index.html inside public/web and another with an admin view exclusively for admins. Below is the basic layout: public ...

javascripthtmlnode.jsexpressmiddleware

Issue with Orgchart JS: The requested resource does not have the 'Access-Control-Allow-Origin' header present

Currently, I am developing a program to create organization charts using orgchart.js and simple PHP. This project does not involve any frameworks, but unfortunately, I encountered the following error: CORS policy is blocking access to XMLHttpRequest at & ...

javascriptphpjqueryajax

Utilize angular to call a function when navigating

Having an issue with ChartJS while creating a chart using angular. The problem arises when navigating to a new page and then back to the original one, as the JavaScript is not triggered again. Is there a way to automatically invoke a JavaScript function o ...

javascriptjqueryangularjs

Update the background image URL by setting it as the value of an input field

There are three elements in play here: an input field, a span element, and a div with a background image property. <span>Go</span><input id="ImageUrl"/> <div id="Image"></div> I am working on a script where when a user ente ...

jquerycssclickattr

Enhance your AngularJS skills by incorporating multiple conditions into the ternary operations of ng-class

I am struggling to apply multiple classes when the condition in the ng-class attribute evaluates to true. Here is the code I have attempted so far, but it doesn't seem to be working: <div class="col-md-4" ng-mouseover="hoverButton=true" id="plai ...

javascriptcssangularjsternary-operatorng-class

the angular-ui-tinymce directive allows for seamless image uploads using a file browser

Utilizing jQuery, we have the ability to incorporate local images into the tinymce editor similar to what is demonstrated in this jsfiddle, by following the guidelines provided in the documentation. The Angular module for tinymce can be found at angular-u ...

javascriptjqueryangularjstinymcetinymce-4

Troubleshooting jQuery.ajax - Why won't it function properly?

I've been struggling to get the ajax service functioning properly. I tried a simple $.get("http://google.com"), but it didn't work. Additionally, this code snippet failed as well: <html> <head> <script src="https://aja ...

javascriptjqueryajaxcross-browser

Adjustable DIV based on screen size

I am attempting to create a flexible div that will adjust its width and height proportionally based on the viewport size. However, in the example above, this method only seems to make the div expand horizontally without affecting the vertical height (wh ...

htmlcssheightpercentageexpandable

Submitting forms automatically with the help of jQuery

I am currently working on creating an autosubmit form similar to Google Instant. The script I am using right now looks like this: $(document).ready(function() { $('#string').change(function(){ var url = $(this).val(); $(&apos ...

jqueryajax

JavaScript and modifying the attributes of the nth child

I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item usi ...

javascripthtmlcss

Transmitting data using JavaScript to Spring server

I am facing a challenge of uploading an image to a server using Spring. The code snippet I am using to get the file is as follows: var file = $("#form-field-photo").get(0).files[0]; I have attempted several methods to post it, but so far, all my attempts ...

javascriptjqueryfilespring-mvcservlets

Tips for creating a vertical Angular Material slider with CSS

Attempting to modify the angular material directive to render vertically has been a challenge. I experimented with using transform:rotate in the CSS, however, it resulted in the slider behaving and rendering differently. md-slider { position: absolute ...

javascriptcssangularjshtmlangular-material