Two boxes each taking up half of the width, with content placed inside a container

Question

Two boxes each taking up half of the width, with content placed inside a container

How can I achieve the appearance seen in this image?

https://i.sstatic.net/2oZW8.png

The layout consists of four columns using regular Bootstrap code. The first two columns should have a white background within a .container, while the other two columns should have a black background that stretches all the way to the end.

View on CodePen

<div class="container">
<div class="col-md-3">
  <p>First column</p>
  </div>
<div class="col-md-3">
  <p>Second column</p>
  </div>
<div class="col-md-3">
  <p>Third column</p>
  </div>
<div class="col-md-3">
  <p>Fourth column</p>
  </div>
</div>

html css twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

utilize the linear-gradient property within the body, with your .container as the parent element, without any additional wrapper around .container

Apologies for the inconvenience, but what I intended was to position the image in this manner image.prntscr.com/image/78940c8115c943a186500ac24556758b.jpeg

Add a new parent div (as a child of body) and apply a background-image to that div

body {
  background: linear-gradient(to right, white 0%, white 50%, black 50%, black 50%, black 100%);
}
#wrap {
  background: url(//lorempixel.com/200/200) no-repeat  66.6% 0 / 25% auto
}
.container {
  border: 1px solid #f01;
}
[class^="col-"] p {
  color: white;
  height: 75px;
  background-color: blue
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrap">
  <div class="container">
    <div class="col-xs-3 col-md-3">
      <p>First column</p>
    </div>
    <div class="col-xs-3  col-md-3">
      <p>Second column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Third column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Fourth column</p>
    </div>
  </div>
</div>

Answer 2

utilize the linear-gradient property within the body, with your .container as the parent element, without any additional wrapper around .container

Apologies for the inconvenience, but what I intended was to position the image in this manner image.prntscr.com/image/78940c8115c943a186500ac24556758b.jpeg

Add a new parent div (as a child of body) and apply a background-image to that div

body {
  background: linear-gradient(to right, white 0%, white 50%, black 50%, black 50%, black 100%);
}
#wrap {
  background: url(//lorempixel.com/200/200) no-repeat  66.6% 0 / 25% auto
}
.container {
  border: 1px solid #f01;
}
[class^="col-"] p {
  color: white;
  height: 75px;
  background-color: blue
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrap">
  <div class="container">
    <div class="col-xs-3 col-md-3">
      <p>First column</p>
    </div>
    <div class="col-xs-3  col-md-3">
      <p>Second column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Third column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Fourth column</p>
    </div>
  </div>
</div>

Answer 3

Answer №2

To achieve a stylish look, consider implementing a linear gradient background on a parent element.

I have implemented a media query to accommodate narrow views. It's unclear what specific changes you are looking for in this scenario.

For an expansive view, switch to fullscreen mode:

.container {
  border: 1px solid #f01;
}
.col-md-3 {
  border: 1px solid #333;
}
.bg {
  padding: 30px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 49%, #ffffff 50%, #000000 50%, #000000 100%, #000000 100%);
}
@media (max-width: 992px) {
  .bg {
    padding: 30px;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 49%, #ffffff 50%, #000000 50%, #000000 100%, #000000 100%);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="bg">
  <div class="container">
    <div class="col-md-3">
      <p>First column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
    <div class="col-md-3">
      <p>Second column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
    <div class="col-md-3">
      <p>Third column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
    <div class="col-md-3">
      <p>Fourth column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
  </div>
</div>

Answer 4

To achieve a stylish look, consider implementing a linear gradient background on a parent element.

I have implemented a media query to accommodate narrow views. It's unclear what specific changes you are looking for in this scenario.

For an expansive view, switch to fullscreen mode:

.container {
  border: 1px solid #f01;
}
.col-md-3 {
  border: 1px solid #333;
}
.bg {
  padding: 30px;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 49%, #ffffff 50%, #000000 50%, #000000 100%, #000000 100%);
}
@media (max-width: 992px) {
  .bg {
    padding: 30px;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 49%, #ffffff 50%, #000000 50%, #000000 100%, #000000 100%);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="bg">
  <div class="container">
    <div class="col-md-3">
      <p>First column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
    <div class="col-md-3">
      <p>Second column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
    <div class="col-md-3">
      <p>Third column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
    <div class="col-md-3">
      <p>Fourth column</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia recusandae omnis praesentium dolorum soluta aperiam iste eum, neque necessitatibus pariatur. Neque nam modi mollitia in autem molestiae corporis harum placeat quos quaerat, labore ex
        ratione, possimus quod quo soluta libero, quis dolor! Porro similique natus eius et voluptatibus autem dolores.</p>
    </div>
  </div>
</div>

Answer 5

Answer №3

To solve this issue, simply nest one more level:

<div class="container">
<div class="col-md-6">
<div class="col-md-3">
  <p>First column</p>
  </div>
<div class="col-md-3">
  <p>Second column</p>
  </div>
</div>
<div class="col-md-6">
<div class="col-md-3">
  <p>Third column</p>
  </div>
<div class="col-md-3">
  <p>Fourth column</p>
  </div>
</div>
</div>

Consider assigning an ID to the md-6 class element for color management.

Answer 6

To solve this issue, simply nest one more level:

<div class="container">
<div class="col-md-6">
<div class="col-md-3">
  <p>First column</p>
  </div>
<div class="col-md-3">
  <p>Second column</p>
  </div>
</div>
<div class="col-md-6">
<div class="col-md-3">
  <p>Third column</p>
  </div>
<div class="col-md-3">
  <p>Fourth column</p>
  </div>
</div>
</div>

Consider assigning an ID to the md-6 class element for color management.

Two boxes each taking up half of the width, with content placed inside a container

Answer №1

Answer №2

Answer №3

Similar questions

Tips for integrating CSS with Material UI TableContainer

Choose an Option that Does Not Allow PHP as a Value

Dilemma: Overlapping Dropdowns on a Bootstrap Navbar Floated right

Initiate a CSS animation only when a different animation has completed

Click event triggers nested bootstrap collapse

How can I arrange the "elements" within a bootstrap container?

What is the best way to show input choices once an option has been chosen from the 'select class' dropdown menu?

PHP allows for creating dropdown lists where the values are dynamically dependent on the selection of another dropdown list within the same form

Using input masking to restrict user input to only numbers and English alphabet characters

Utilizing Jquery to transform characters into visual representations

Exploring jQuery's selection techniques involving filtering and excluding elements

Mastering Excel Automation

What is the most effective way to add images to a table using JavaScript?

Switching icon with jQuery upon clicking

What is the best way to generate an extensive table with HTML and AngularJS?

Detecting collisions using CSS animation

Stop the stacking of 'display:table' specifically on Android devices

Ways to create a scrollable div with the help of Javascript

Acquiring the `=` symbol within email HTML

Creating a JavaScript function using jQuery to calculate the total sum of textboxes with two specified classes