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?

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

Top tip for combating form misuse in Django applications

HTML SVG text elements styled with varying background shades

Having trouble getting your Raspberry Pi web server to display the background image?

I'm looking for a Visual Studio add-in that can identify and flag any unused CSS classes or IDs within the entire solution

Alignment dilemmas

Why is the inline-block element in the list displaying on two lines? The text contains a number, but does it affect the layout?

How can you center a div at the top of another div?

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

Using Angular 4 for HTML 5 Drag and Drop functionality

Preventing Past Dates from Being Selected in JQuery Date Picker

Is your JQuery Gallery experiencing issues with the next button function?

JavaScript Navigation Bar Error: The value of 'undefined' is not recognized as an object

Tips for deciding on the appropriate CSS for an Angular 6 navbar component

What is the standard size for PHP files, or the suggested maximum limit?

Navigate post Ajax call

Adjust Font Size inside Circular Shape using CSS/jQuery

Incorporate h:outputText into your JavaScript code segment

My attempts to decrease the volume of an HTML5/CSS3 Audio element have been unsuccessful

Restore checkbox to default setting

I am encountering an issue with the Link tag from next/link that is throwing an error. The error message states: "React.Children.only expected to receive a single React element