grid layout with a stylish divider separating each column

Is there a way to create a bootstrap grid with one row containing 2 columns? The first column should be 9 col-md-9 in size and the second column 3 col-md-3 in size. I want the row and columns to maintain their structure regardless of the content length, with a nice border between them. How can this be achieved? It should resemble the following layout:

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

Not like this:

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

Here is a jsfiddle

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

htmlcsstwitter-bootstrap-3bootstrap-grid

Answer №1

A great solution would be to utilize flexbox for equal height columns.

Implementing this will ensure that your columns always maintain the same height.

For a practical demonstration, check out this fiddle: https://jsfiddle.net/Gt25L/1280/
(You may need to assign specific classes as opposed to generic ones like rows and cols, but the concept should be clear)

.row {
  display: flex;
}

.row > div {
  flex: 1;
  background: lightgrey;
  border: 1px solid grey;
}
<div class='row'>
  <div class="col-xs-9">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
 
  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>

Answer №2

It may not be the most polished solution, but you could experiment with using background color on the row instead of the columns and adding a border to just one column (assuming that the left column will always have more content).

Check out this JSFiddle for a visual example.

<div class="container">
<div class='row'>
  <div class="col-xs-9 border">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg

  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>
</div>
.row {
  background: lightgrey;
  border: 1px solid grey;
}

.border {
  border-right: 1px solid black;
}

Answer №3

To create borders and set background in the parent container, you have the option of using bootstrap4 with flexbox or experimenting with box-shadow:

Utilizing inset and outset shadows will cause them to overlap, making it difficult to determine which box is taller.

.row {
  background: lightgrey;
  border-top: 2px solid grey;
  box-shadow: 0 2px grey, inset 2px 0 gray, inset -2px 0 grey;
  overflow: hidden;
}

.row>div {
  box-shadow: 2px 0 grey, inset 2px 0 grey
}


/* for demonstration purposes*/

.row {
  margin: auto!important;
  max-width: 80%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class='row'>
  <div class="col-xs-9">
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg

  </div>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
</div>
<div class='row'>
  <div class="col-xs-3">Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
  <div class="col-xs-9">
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br> <br>Hifgdfgsdfg

  </div>
</div>

Learn more about Bootstrap 4's flexbox at 

.row>div {
  background: lightgrey;
  border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class='row'>
    <div class="col-9 col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg

    </div>
    <div class="col-3 col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
    </div>
  </div>
  <div class='row d-flex'>
    <div class="col-3 col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
    </div>
    <div class="col-9 col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg
   <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br> <br>Hifgdfgsdfg

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

Answer №4

To create an offset in your text without the need for additional CSS, you can utilize 

<div class="col-xs-offset-1">
. Here is a sample snippet:

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-xs-9">
     <div class="col-xs-offset-1">
      <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>  <br>Hifgdfgsdfg
  </div>
  </div>
  <div class="col-xs-3">
     <div class="col-xs-offset-1">
        Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>Hifgdfgsdfg
    <br>
  </div>
  </div>
</div>

Answer №5

If you are open to specifying the width of one element, you can utilize negative margins followed by increasing the width based on the margin amount.

.row > div {
  background: lightgrey;
  border: 1px solid grey;
}

.row > div:last-child {
  margin-left: -1px;
  width: calc(25% + 1px);
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class='row'>
    <div class="col-xs-9">
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>
      <br>Hifgdfgsdfg

    </div>
    <div class="col-xs-3">Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg
      <br>Hifgdfgsdfg

      <br>
      <br>Hifgdfgsdfg
    </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

Vanilla JavaScript error: Unable to access property

I am working on implementing a header with a logo and navigation that includes a menu toggle link for smaller viewports. My goal is to achieve this using Vanilla JS instead of jQuery. However, when I click on the menu toggle link, I encounter the followin ...

javascripthtmltypescript

Buttons and JavaScript: A Comprehensive Compilation

I'm facing an issue with my HTML buttons and JavaScript. When a button is clicked, an AJAX call should be triggered to display data. However, JavaScript seems unable to detect the button. Below is the HTML code: <ul> <li><input ...

javascripthtmlajax

The functionality of CSS3 animations may sometimes be unreliable following the onLoad event

Here is a snippet of code to consider: $(function() { $('#item').css({ webkitTransform: 'translate(100px, 100px)' }); }); The element I am attempting to move has the following CSS properties: transform: translate3d(0 ...

javascriptjquerycsstransform

Learn how to efficiently transfer row data or an array object to a component within Angular by utilizing the MatDialog feature

My goal is to create a functionality where clicking on a button within a specific row opens up a matDialog box displaying all the contents of that row. Below is the HTML snippet: <tr *ngFor="let u of users"> <td data-label="ID& ...

javascriptcssangulartypescript

What could be causing my data toggle to malfunction in Bootstrap?

When I click in mobile mode, I can see the icon but it is not working. Here is the code I am using: <nav class="navbar navbar-expand-sm bg-success navbar-dark"> <a class="navbar-brand" href="#"> DreamTeam </ ...

htmlangularbootstrap-4

I'm not sure if I'm doing this right, the image seems to be overlapping the border

Just dipping my toes into the world of HTML/CSS, so feel free to point out any major errors in my code. The issue I'm facing is illustrated in this image (Apologies for the black boxes covering up some content; focus is on the top image). Check out ...

htmlcssimageborder

Content will adjust to the screen size after a specific re-sizing

When the width is under 1024, I want the body of the page to scale to fit the user's screen without a scrollbar. My goal is to adjust the entire body so that it fits within the browser window without a scrollbar when the width is under 1024. I attempt ...

javascriptjqueryhtmlcsstwitter-bootstrap

Show submenu upon hovering and make sure it remains visible

Is there a way to keep a submenu displayed and the background color changed even after moving the mouse away from the menu item onto the submenu? This is my HTML: <div class="shoplink"><a>Online Shop</a></div> <div id="shop-men ...

jquerycss

Angularjs: Adding Negative and Positive Numbers

How can I extract negative numbers and positive numbers separately from JSON data obtained from the server using the $http.get method? One of the fields in the data is called Credits, which contains both negative and positive values. Can anyone help me wit ...

javascriptjquerycssangularjswordpress

The header is visible above the navigation bar when scrolling on mobile, but it should be hidden

I am facing an issue with fixed content on mobile positioned above a Bootstrap navbar. The problem arises when scrolling down, causing the navbar to move up by 50px (the height of the content above the navbar). Everything seems to work fine initially, but ...

jqueryhtmlcss

Ensure Navbar elements remain on a single line

I need my Bootstrap Navbar elements to remain on a single line regardless of the screen width. Although I have searched for a solution to this issue numerous times and tried different approaches, none have proven effective in my case. Below is the code s ...

htmlcsstwitter-bootstrap

Searching for the precise draggable grid line position in rulerguides.js - tips and tricks!

Currently, I am utilizing rulerguides.js in my project. I have customized it for a specific div to display rulers and grid lines. You can refer to this FIDDLE. The rulers are functioning properly, but the draggable grid lines are being calculated based on ...

javascriptjqueryhtmlgridlinesrulers

What is the best way to vertically center my text on the right and left sides of an image?

I am struggling to align the text on the left and right side of my image to the vertical center. It seems like my containers are not recognizing their height. How can I resolve this issue? Here are the CSS and HTML snippets for your reference: .footer { ...

csshtml

Locate the unique identifier for the initial product with a special badge on an online retail platform through the use of Selenium

To complete the task of finding the top-selling women's socks on Amazon, I attempted to locate the item labeled as a "Best Seller" after searching for "Socks for women" on the website. However, I am struggling with the logic to identify and click on t ...

javahtmlcssseleniumselenium-webdriver

What is the method for adjusting the body width based on the screen resolution using JavaScript?

Is there a way to adjust the body width based on screen resolution using JavaScript? I attempted to set it with document.body.style.width = screen.width;, but I can only specify a fixed width like 1920px. What I'm aiming for is to have a fixed scree ...

javascriptjqueryhtmlcss

Ways to center your attention on the Textbox

I am currently developing a chat program using JavaScript, HTML, and CSS. How can I set the focus on the input field for typing messages? Is it usually done with CSS code? Here is the current CSS styling for my message input field: Code: #messageField ...

javascriptcss

How can I modify the background color of the hamburger menu?

I attempted to modify the background color of the hamburger icon from black to yellow, but unfortunately, I couldn't achieve it. Here's what I tried: //hamburger $(".hamburger").toggleClass("is-active"); var $hamburger = $(".hamburger"); ...

javascripthtmlcss

What steps can I take to implement a functional 'echo' command within a Jquery terminal?

Trying to create an echo command that displays what the user types in a JQuery terminal. Here is the code snippet: <link href="https://unpkg.com/jquery.terminal/css/jquery.terminal.min.css" rel="stylesheet" /> <script src="https://cdnjs.clou ...

javascripthtmljqueryterminaljquery-terminal

Television Mount for Precise Video Placement

Seeking assistance for a unique positioning challenge I am facing. I have a Video that needs to be placed on the home page with a TV-like image "frame" around it, and they should scale together. https://i.sstatic.net/2pLhi.png What I've attempted i ...

htmlcss

The image fails to appear

Check out my website at www.wostokhr.pl I am having trouble getting the picture "pics/hero.jpg" to show up in the "div id="hero"" section with a JS parallax function. I have double-checked the HTML and CSS validators and everything seems to be correct. An ...

htmlcss