What is the best way to split a Bootstrap col-md div in half vertically?

I am attempting to create the following layout using the Bootstrap grid system. Within a container <div class="row">, there are two divs occupying half of the width each (<div1> and <div2>). The height of <div1> will vary based on the content size. Additionally, <div2> should contain two child divs (<div2-1> and <div2-2>), each occupying half of the height of <div1>. How can I achieve this layout using the Bootstrap grid system?

https://i.sstatic.net/HyBxT.png

I have attempted the following approach, but it is not functioning as expected: 

<div class="row">
    <div class="col-md-6" id="div1">
        Some content...
    </div>
    <div class="col-md-6" id="div2">

        <div id="div2-1" style="height:50%;">

        </div>
        <div id="div2-2" style="height:50%;">

        </div>
    </div>
</div>
csstwitter-bootstrap

Answer №1

Give this a try...

div {
  border: 1px solid black;
}
#div2-1,
#div2-2 {
  height: 50%;
  border: 1px solid red !important;
}
#div1,#div2{
  height:50px;

  }
#div2.col-xs-6
{
  padding:0px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6" id="div1">
      Some content...
    </div>
    <div class="col-xs-6" id="div2">

      <div id="div2-1">

      </div>
      <div id="div2-2">

      </div>
    </div>
  </div>
</div>

Answer №2

Implementing Bootstrap 4 with Custom Styling

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-md-6 bg-primary" style="min-height: 500px;"></div>
  <div class="col-md-6">
    <div class="row h-100 flex-column">
      <div class="col-md-6 mw-100 bg-danger"></div>
      <div class="col-md-6 mw-100 bg-success"></div>
    </div>
  </div>
</div>

<style>
  /* custom styling for better display */
  
  [class*='col'] {
    min-height: 200px;
  }
</style>

Answer №3

If you'd like the height of a column to adjust automatically and have the inner divs take up half of that space, you can utilize jQuery.

However, it's advisable to set the overflow-y property to auto for the divs in case one of them contains more content than it can display.

$(document).ready(function() {

  var totalHeight = $("#col").height();

  $("#div-1").css("height", totalHeight / 2);
  $("#div-2").css("height", totalHeight / 2);

})
body * {
  color: #ccc;
}
#div-1,
#div-2 {
  overflow-y: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div class="row">
    <div class="col-sm-6" id="col">
      <div id="div-1" style="background-color:red;">
        Content
        <br>Content
      </div>
      <div id="div-2" style="background-color:blue;">

        Content
        <br>Content
        <br>Content
        <br>Content
        <br>Content
        <br>Content
        <br>Content
        <br>Content

      </div>
    </div>
    <div class="col-sm-6"></div>

  </div>

</body>

Answer №4

Greetings! Feel free to test out the fiddle below. Additionally, you can incorporate custom styles as you see fit.

<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6">
        <div id="navigation">
            <label>Side Column</label>
        </div>           
    </div>
    <div class="col-xs-6 col-sm-6">
        <div id="text1">
            <label>First Divider</label>
        </div>
        <div id="text2">
            <label>Second Divider</label>
        </div>
    </div>      
</div>
</div>

Check out the fiddle demo

Answer №5

//Give this a try...

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<section>
<div class="col-md-12 bg-warning" border="1">
<div class="row" border="1">
    <div class="col-md-6" border="1">
        <h3>First Column</h3>
    </div>
        <div class="col-md-6" border="1">
        <div class="row bg-danger">
            <h3>Second Column First Row<h3>
            </div>
            <div class="row bg-success">
            <h3>Second Column Second Row</h3>
            </div>
        </div>
    </div>
</div>
</section>
</body>
</html>

Answer №6

 <!DOCTYPE html>
<html>

<head>
  <script src="shared/jquery.js" type="text/javascript"></script>
  <script src="shared/shiny.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
</head>
<style>

.cn {
    background-color: antiquewhite;
    height: 50%;
    top: 50%;
    position: relative;
}
.video-player-container{
    height: 500px;
    background-color: gray;
}
.video-container{
    min-height: 350px;

}

    </style>
<body>

  <h1>Custom HTML UI</h1>
<div class="col-lg-12 video-player-container">
    <div class="cn"></div>

  </div>
</body>
</html>

Answer №7

Unbelievably simple thanks to Bootstrap 5 flex. There might be something I'm overlooking.

   <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239273925">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row">
  <div class="col-md-6 bg-primary" style="min-height: 500px;">Some main content</div>
  <div class="col-md-6">
    <div class="row h-100 flex-column">
      <div class="flex-fill bg-danger">Part 1</div>
      <div class="flex-fill bg-success">Part 2</div>
    </div>
  </div>
</div>

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

Half of the sections will not stack on mobile devices

UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue. Everything looks per ...

htmlcsslayoutheightresponsive

Having difficulty incorporating external SASS styles into my React.js project

In most of my projects, I follow a similar process for importing SASS styles. First, I create my react app and then install SASS using the command npm install node-sass. Next, I import my SASS file into my app components as shown below: import React from & ...

javascriptcssreactjssass

Safari on the iPad does not support opening debugging through the HTML tag

Currently, I am attempting to debug a website using Safari on a MacBook connected to an iPad. However, I am facing an issue where the tags cannot be opened for inspecting the content. When I try to open the wrapper, it does not expand to reveal the content ...

ioscssipaddebuggingsafari

The CSS styles on my GitHub Pages website are not being reflected on the HTML page

I've been struggling for a while now to host my Portfolio CV on GitHub and I can't seem to get my CSS styles to apply correctly on the URL. - This is how I have linked it in the HTML document: <link rel="stylesheet" type="text/ ...

htmlcssgithubgithub-pagesweb-hosting

Using jQuery to toggle sliding the information above a div

I am facing an issue with my customized sliding menu. The menu slides over the image but not over the content-div, pushing it aside. I have tried to fix this problem but haven't found a solution yet. My goal is for the menu to slide over all divs and ...

javascriptjqueryhtmlcss

How to center text both horizontally and vertically in HTML

I am struggling with centering a background image along with a 1-line text vertically and horizontally inside a div. Although I have successfully centered the image, the text remains misaligned. I attempted using vertical-align: middle without success. Be ...

csshtml

Having trouble displaying the selection menu when using Angular Strap?

//test.js const dropdownMenu = document.querySelector('.dropdown-menu'); dropdownMenu.addEventListener('click', (event) => { alert(`You clicked on ${event.target.textContent}`); }); // index.html <div class="dropdown"> ...

javascriptangularjstwitter-bootstrapangularjs-directiveangular-strap

Troubleshooting issue with changing class based on input values

It appears that there is an issue with the functionality when switching values on page load. Initially, I was able to make it work for a single switch, but now that there are multiple switches on the page, toggling affects all of them. How can I modify it ...

javascriptjquerycss

Expansive dropdown options in the navigation bar

Can someone help me create a menu similar to the one in this screenshot? I am looking for a solution where hovering over a cursor will open a large submenu with two sections. Any examples or suggestions would be greatly appreciated. Thank you all in advan ...

htmlcssnavbar

What's the best way to make sure my table fits perfectly within its container's width?

I've encountered an issue with a table: If you want to see how the table was created, check it out on jsFiddle I attempted to modify the CSS like this : table{ width:100%; } td span { float:right; width:20%; text-align:center ...

jqueryhtmlcsstwitter-bootstrap

Is it possible for images underneath to receive focus when hovering over them?

I'm struggling with a layout of thumbnails on my page. We'll refer to them as A, B, C, etc. They are currently displayed like this: A, B, C, D, E, F, G, H, I, J, K, L, M, N... and so on. When you hover over one thumbnail, it enlarges by 2.5 t ...

javascriptjqueryhtmlcss

Utilizing jQuery and CSS to make an entire div clickable, and activate an 'a' tag hover state upon hovering

Looking to create a clickable link for the .wrapper div that directs users to the location of a.icon. Want the .wrapper div to activate the a.icon:hover state when hovered over, not just when hovering over the icon itself. Any assistance would be highly a ...

javascriptjquerycss

Updating ListItemText styles in MUI when active with react-router

I am currently using ListItem from Material-UI. I am attempting to increase its font weight when it is active, but for some reason the font-weight property does not seem to have any effect. Below you will find the code snippet: <List component=&a ...

cssreactjsmaterial-ui

"Customizing the properties of an Angular Material mat-slide-toggle: A step-by-step

<mat-slide-toggle>Slide Me!</mat-slide-toggle> https://i.stack.imgur.com/p1hzD.png https://i.stack.imgur.com/aCzs1.png Is it possible to customize the toggle-thumb-icon to increase its length and position it at the end of the bar? ...

cssangularsassangular-material2angular8

CSS selector for detecting elements with empty or whitespace-only content

A special selector called :empty allows us to target elements that are entirely devoid of content: <p></p> However, in some cases, the element may appear empty due to line breaks or white spaces: <p> </p> In Firefox, a workar ...

htmlcsscss-selectors

What methods can I use to toggle between different divs using navigation buttons?

There are 4 divs on my webpage that I need to toggle between using the up and down arrows. Despite trying an if else statement, it doesn't work as intended. <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.c ...

javascriptjqueryhtmlcss

Personalize the hover effect of CardActionArea

I'm attempting to personalize the hover effect of material-ui's CardActionArea for a specific component in my React application. Unfortunately, I am struggling to locate detailed documentation on how to style it effectively. Even after experimen ...

cssreactjsmaterial-ui

How to make Firefox create a new line in a contenteditable field

I am working with a contenteditable div that is within a parent div with a floating width of 50%. My goal is to set the max width of the content editable to match the container, even if the text spans multiple lines. Here is the CSS I tried: .editable-con ...

htmlcssfirefoxcontenteditable

Center the div and make it position fixed

Is there a way to position a div in the center of the screen or its parent div, and have it fixed so that it does not shift when its width changes? I have a div containing a table, as shown below: https://i.sstatic.net/OVh2y.png I'm unsure if the oute ...

htmlcss

Looking for a solution to fix the VueJS calculator that only works once?

My calculator project using VueJS, HTML and CSS is almost complete. However, I'm facing an issue where it only works once. For example, if I input 6x3, it correctly gives me 18. But if I then clear the result and try to input a new calculation like 3 ...

javascripthtmlcssvue.jscalculator