Steps to resolve columns wrapping around the screen too tightly instead of properly fitting into place

I am currently working on a website and trying to display an image preview alongside a block of text using Bootstrap 4. However, I am facing an issue where the columns wrap around the screen, resulting in a row that appears two columns tall.

Despite my attempts at modifying the classes of the div elements (specifically for centering), I have not been able to resolve this issue.

html,
body {
  overflow-x: hidden;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.constrain-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.container-notfull {
  padding: 15px;
  width: 100%;
}

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <br><br><br>
  <img class="d-block w-100 background-cover" src="http://placehold.it/700x500">
  <div class="container-notfull">
    <div class="row">
      <div class="col-md-12 text-center">
        <h2>
          Summer Camps 2019
        </h2>
        <br>
        <h3>Curriculum</h3>
        <p>
          In this camp... text
        </p>
        <br>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-md-6 align-self-center constrain-img">
        <img class="h-75 img-center" src="http://placehold.it/700x700">
      </div>
      <div class="col-md-6 text-center align-self-center">
        <h3>
          There will be an entertaining camp... text
        </h3>
        <h4><a href="/css/img/flyer.pdf" download>Here</a> is a download to the flyer</h4>
        <br>
        <h3>Details</h3>
        <p><b>Place:</b></p>
        <p><b>Time:</b></p>
        <p><b>Days:</b></p>
        <p><b>Price:</b></p>
        <p>Maximum of 10 people per day</p>
        <br>
        <h4>Register now</h4>
      </div>
    </div>
  </div>
</body>

Although the total column widths equal 12, leading me to expect them to fit horizontally, they are instead overflowing and wrapping around to the bottom of the row.

htmlcssbootstrap-4

Answer №1

One issue is that your image has a `block` setting, but no specific `width` defined, causing it to always display at full size.

To solve this problem, add `width: 100%` and `height: auto` to the `.img-center` class for the image.

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  height: auto;
}

For a working example, view the Fiddle here: https://jsfiddle.net/2g0kebs4/

html,
body {
  overflow-x: hidden;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.constrain-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.container-notfull {
  padding: 15px;
  width: 100%;
}

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<br><br><br>
<img class="d-block w-100 background-cover" src="http://placehold.it/700x500">
<div class="container-notfull">
  <div class="row">
    <div class="col-md-12 text-center">
      <h2>
        Summer Camps 2019
      </h2>
      <br>
      <h3>Curriculum</h3>
      <p>
        In this camp... text
      </p>
      <br>
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-6 align-self-center constrain-img">
      <img class="h-75 img-center" src="http://placehold.it/700x700">
    </div>
    <div class="col-6 text-center align-self-center">
      <h3>
        There will be an entertaining camp... text
      </h3>
      <h4><a href="/css/img/flyer.pdf" download>Here</a> is a download to the flyer</h4>
      <br>
      <h3>Details</h3>
      <p><b>Place:</b></p>
      <p><b>Time:</b></p>
      <p><b>Days:</b></p>
      <p><b>Price:</b></p>
      <p>Maximum of 10 people per day</p>
      <br>
      <h4>Register now</h4>
    </div>
  </div>
</div>

Answer №2

Give this a try, it might be beneficial for you. Specify a width for the image and 

html,
body {
  overflow-x: hidden;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.constrain-img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.container-notfull {
  padding: 15px;
  width: 100%;
}

.img-center {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<br><br><br>
<img class="d-block w-100 background-cover" src="http://placehold.it/700x500">
<div class="container-notfull">
  <div class="row">
    <div class="col-md-12 text-center">
      <h2>
        Summer Camps 2019
      </h2>
      <br>
      <h3>Curriculum</h3>
      <p>
        In this camp... text
      </p>
      <br>
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col-6 align-self-center constrain-img">
      <img class="h-75 img-center" src="http://placehold.it/700x700">
    </div>
    <div class="col-6 text-center align-self-center">
      <h3>
        There will be an amusing camp... text
      </h3>
      <h4><a href="/css/img/flyer.pdf" download>Here</a> is a link to download the flyer</h4>
      <br>
      <h3>Specifics</h3>
      <p><b>Location:</b></p>
      <p><b>Time:</b></p>
      <p><b>Days:</b></p>
      <p><b>Cost:</b></p>
      <p>Limited availability of 10 spots per day</p>
      <br>
      <h4>Sign up today</h4>
    </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

What is the CSS technique to make text wrap around an image, similar to the layout seen in certain newspapers?

I am looking for a way to have my images wrap with text align in this specific layout: <html> text text text text text <br> text text text text text <br> ______________ text text text <br> image | text text text <br> i ...

htmlcssimagealignmentword-wrap

Display a symbol retrieved from the backend server

After receiving a response from the backend server for my Angular 2/4 application, I am presented with an attribute called "connectionStatus". This attribute indicates the status of a database connection, either as "UP" or "DOWN". In order to display this ...

htmlangulartypescripticons

Tips for validating html:options collection in Struts 1.3?

A Treemap is populated with values from a database using the following Java code: Map<String, String> treeMap = new TreeMap<String, String>(map); Iterator mapIterator = mapSet.iterator(); while (mapIterator.hasNext()) { Map.Entry mapEntry = ...

javahtmljspstrutsstruts-1

Positioning a div beyond the visible area without altering its original width, with the assistance of the Skrollr plugin

I'm currently experimenting with a parallax website using Skrollr. My goal is to achieve a curtain effect where two divs slide open left and right as I scroll down. The issue I'm facing is that when I scroll, the divs extend beyond the 100% widt ...

htmlcssskrollr

Tracing a path with a snapping motion using my thumb

Before we begin, let's take a look at the example below. The functionality of this component should mimic that of an input type range. However, I am facing some challenges in calculating the step value and snapping the thumb onto the trail based on t ...

javascripthtmlreactjsvue.jsdom-events

Display the list items when the page first loads

I currently have this code snippet: <nav> <ul class="sel"> <li> <a href="#LINK1" data-title="A">A</a> </li> <li> <a href ...

javascriptjqueryhtmlcss

Shaky parallax movement

I recently created a website with a parallax effect, but I'm experiencing some performance issues with jittery movement. The page uses CSS3 transform scale to zoom in and out, and automatically resizes on page resize with JavaScript/jQuery. For the ...

javascriptjquerycss

"Adjust the orientation of a video and ensure it properly fills the screen with CSS styling

Below is the CSS style being used: video { position: absolute; transform: rotate(90deg); width: 100%; height: 100%; z-index: 4; visibility: visible; } This code snippet demonstrates a video element: <video id="myVideo" ...

htmlcssvideomp4

Why are the links in the navgoco slide menu failing to function properly?

I utilized a demo from jQueryRain to create a collapsible menu using jQuery. However, after completion, I discovered that none of the links were functioning properly. Upon visiting the documentation page, I noticed that many users were encountering the sam ...

javascriptjqueryhtml

Expanding a dropdown list on the fly using vanilla JavaScript

I am restricted to using Vanilla JavaScript only, without any additional libraries like jQuery. Initially, I attempted to store all registered items in a global array and then use a forEach loop to append an <option> child to the <select>. How ...

javascripthtml

.value not being grabbed from options of selected index

I have a form that includes a select field with the id of "to". My goal is to retrieve the selected value within a JavaScript function. Interestingly, the first time I execute this function, it fails to capture the selected value. However, upon running t ...

javascripthtml

Solving the issue of IE7 div overflow-y: scroll causing content to be obscured by the scrollbar

I am facing an issue with a table inside a div (#body) that scrolls along the y-axis. Specifically, in Internet Explorer, the scrollbar is hiding part of the last table cell behind it, causing a shift in the layout of the table columns. This problem does n ...

cssinternet-explorergoogle-chromevertical-scrolling

Ways to update the UI dynamically in Angular without the need to refresh the entire page

On my page, I have multiple charts and I'm facing an issue where the chart UI does not update immediately when I try to make a delete call by clicking the delete button. I always have to refresh the browser to see the changes. I have provided the ful ...

htmlangulartypescriptangular-materialeventemitter

Angular: Implementing a Dark and Light Mode Toggle with Bootstrap 4

Looking for suggestions on the most effective way to incorporate dark mode and light mode into my bootstrap 4 (scss) angular application. Since the Angular cli compiles scss files, I'm not keen on the traditional method of using separate css files for ...

javascriptangulartypescriptbootstrap-4sass

Maintain parent hover effect while child is being hovered over

After exploring various solutions to fix an issue, I've hit a roadblock. Adding CSS and jQuery code seemed promising at first, but upon refreshing the browser, a new problem emerged. The parent element retained its hover state background color, but th ...

jqueryhtmlcsshoverparent-child

What is the best way to make floating images fill the entire space?

I'm looking to create a grid layout with fixed-sized images, but I'm having trouble getting them to fill up the space properly. Here's what I want: Unfortunately, this is what I'm currently getting: Any suggestions on how I can make t ...

htmlcss

Issue with bottom margin on the last flex item located at the end of the container is not being applied

My button is currently touching the end of the container, but I want to create some space between them. However, adding a margin bottom to the button does not seem to be working as expected. Below is the CSS and HTML code: .events{ height: 100%; d ...

htmlcssflexbox

Special CSS rule for targeting an active state of a specific child element

My issue involves a div with the :active selector effect. Within this div, there is a smaller child div that contains some buttons. Currently, when either the parent div or one of the buttons within the child div is clicked, the :active effect is triggere ...

htmlcsscss-selectors

Angular application experiencing issues with fixed headers not scrolling correctly

I've been working on implementing a fixed header for one of my pages in an Angular application, but I'm having some trouble getting it to work as expected. Currently, when the user expands the accordions on the page and scrolls down, the headers ...

htmlangular

Is it possible to insert clickable links within the content of a Twilio text message?

Currently, I am utilizing Twilio and Express to send programmable SMSs to the users of my web application. I'm curious if it's possible to include hyperlinks within the body of these text messages. Is there a method to achieve this? I have attem ...

javascripthtmlnode.jsexpresstwilio