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

Creating pathways in AJAX with Rails

Issue at hand: undefined variable article_id. The objective: Setting up the correct route for AJAX and Rails. What I require: The format articles/1/comments/2. Main goal: To specifically load comment through AJAX, not article. In the current AJAX scrip ...

javascriptjqueryruby-on-railsajax

Is it advantageous to employ several wrapper-divs inside section elements when working with HTML5 and CSS?

Back in the day, I learned how to create a website by enclosing all content below the body tag within a div with the class "wrapper." This approach made sense as it allowed for easy vertical and horizontal alignment of the entire content. Just yesterday, ...

htmlcss

Exploring methods for testing an HTML page that utilizes jQuery for DOM manipulations

Recently, I was tasked with creating an HTML page that utilized jQuery DOM manipulations. For instance, upon clicking the submit button, a success or error message should be displayed. Testing these functionalities is something I'm familiar with in An ...

javascriptjqueryhtmlnpm

Utilizing Jquery's .load function will temporarily deactivate all other functions

Season's Greetings everyone! I have a unique personal messaging system on my website that utilizes jQuery for message display and manipulation. Let's delve into the specific file that controls this functionality: <!-- Fetching and displaying ...

javascriptjqueryload

I am interested in utilizing Selenium to interact with a hyperlink within an HTML table

I am currently using the code snippet below to fetch data from the HTML structure provided: //findTables(driver); WebElement content = driver.findElement(By.id("tblTaskForms")); List<WebElement> elements = content.findElements(By.className("form-nam ...

htmlangularjsseleniumselenium-webdriver

Adjust the quantity of divs shown depending on the value entered in a text input field

It seems like I am on the right track, but there is something simple that I am missing. I'm currently utilizing the jQuery knob plugin to update the input field. $('document').ready(function() { $(".knob").knob({ c ...

javascriptjqueryhtmlfilter

Customizing product prices with unique icons

I have successfully integrated a 'Latest Products' row on the Homepage of my WooCommerce enabled WordPress Website. Now, I am looking to enhance it by adding an icon on each side of the price entry. Although I know how to manually insert <i c ...

phpjquerywordpresswoocommerceproduct

HTML code for an admin login form

Looking for a way to create a login form without PHP in HTML for an administrator account, so the admin information remains secure and cannot be easily accessed from a database. Any suggestions or tips on how to achieve this? ...

html

arranging texts in a vertical stack with wrapping

Looking to change the orientation of my horizontally wrapped list items from vertical to horizontal. Take a look at my code snippet: HTML <ul> <li>Long text goes here.</li> <li>Another Longer Text Goes Here</li> < ...

htmlcsswhitespaceword-wrap

Removing a Dynamic Element in ReactJS

--CustomFieldSection.js-- import React, { Component } from 'react'; import CustomField from './CustomField.js'; class CustomFieldSection extends Component{ constructor(props){ super(props); this.stat ...

javascripthtmlreactjs

When the browser size shrinks, turn off the drop-down navigation menu

I'm currently working on a responsive website, and I have encountered an issue with a dropdown menu. When the browser size is reduced to 900px, the menu shifts all the way to the left side. To address this, I added some left padding to keep it off the ...

htmlcssdrop-down-menuresponsive-designnav

How to trigger a submit action on a different page from an iframe using PHP

Is there a way to submit the iframe page using the modal's submit button in Page1.php to trigger the submit button of Page2.php? I need help executing this efficiently. The purpose of having the submit button in a modal is to perform multiple functio ...

javascriptphpjqueryform-submit

Guide to selecting a date using JavaScript in Selenium with Ruby

I'm having some trouble selecting a date from a date picker field using JavaScript in Selenium WebDriver. I've attempted the code below, which does navigate to the date window successfully, but I can't figure out how to execute the JavaScrip ...

javascriptjqueryrubyselenium

Only make an AJAX request for suggestions with jQuery Autocomplete if the item does not match any data from the previous request

I am currently working with jQuery Autocomplete functionality. The issue I am facing is that it triggers an AJAX request every time a key is pressed, which is not desirable. Ideally, if the data from a previous AJAX request already matches the search query ...

javascriptjqueryajax

Preventing the removal of a choice by disabling it in the selector

I have a unique selector that is designed like this: <select id="patientSelector"> <option disabled selected style='display: none;' id="select0"> New Patients to Come</option> <option id="select1"></opt ...

javascriptjquery

Developing interactive checkboxes for individual rows through React.js

Within a form, I have rows containing two inputs each. Upon clicking "add", a new row is created. For the second row onwards, by clicking "add" a checkbox labeled 1 should be added to indicate dependency on the previous row. In addition, for the third row, ...

javascripthtmlarraysreactjsdictionary

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Is there a way to show HTML tags like <a> in a textview? As an example, here is some code: Hello good morning <a href=\"1\">USER1</a> and <a href=\"13\">USER2</a> ...

htmliosattributestextview

Express Form Validation: Ensuring Data Accuracy

I have recently learned that client-side form validations may not be sufficient to prevent malicious actions from users. It is recommended to also validate the form on the server-side. Since I am new to using express, can someone provide guidance on what s ...

javascripthtmlnode.jsexpress

The implementation of SetInterval within nested functions in JavaScript appears to be malfunctioning

I am a beginner in the world of JavaScript and I am currently attempting to incorporate the setInterval method within functions in Js. JavaScript Code: var tar = document.getElementById("sample"); function dataSample(tar) { //setInterval ...

javascripthtml

What is the best way to center the image on a page?

How can I center an image on the screen with a caption? <div id="team-area"> <div class="container"> <div class="row"> <div class="col-12"> <h3 class="main-title">Our Team</h3> < ...

htmlcsstwitter-bootstrap