One problem with placing Bootstrap columns inside another column

Currently, I am in the process of working on a website that requires a description section. To achieve this, I decided to use two Bootstrap columns – one with a size of 8 and another with a size of 4, totaling up to 12 grid units. Inside the column sized 8, my goal was to have two sub-columns; one for text on the left and the other for text on the right.

However, I encountered a problem as my attempted layout resulted in the second column appearing below the first one inside the column sized 8. It's not functioning as intended and I'm seeking assistance to troubleshoot the issue.

To provide more clarity, I have included images showcasing the current situation and the desired outcome:

.partLineDesc{
  margin-top: 30px;
  text-align: center;
}

.leftContDesc{
  margin-top: 20px;
  background-color:grey;
}

.rightContDesc{
  background-color:grey; 
  margin-top: 20px;
}

.cottonImg{
  margin-top: 15px;
  text-align: left;
}

.partLineDesc2{
  margin-top: 20px;
  text-align: center;
}

.securInfo{
  margin-top: 30px;
  text-align: center;
  background-color:#eff4f9;
  border-radius: 10px;
  border: 2px solid #dddddd;
  padding: 20px; 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  // Code snippet continues

htmlcsstwitter-bootstrappositioncss-position

Answer №1

It appears that the left and right DIV elements are wrapped around Bootstrap col-md-6 columns, causing them to not float next to each other. To ensure proper padding, always nest col-*s inside another row.

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="partLineDesc">
                <img />
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="leftContDesc">
                    <img />
                     </div>
                </div>
                <div class="col-md-6">
                    <div class="leftContDesc">
                    <p>

                    </p>
                    </div>
                </div>
            </div>
            <div class="partLineDesc2">
                <img/>
            </div>
        </div>
        <div class="col-md-4">
            <div class="securInfo">
            </div>
        </div>
    </div>
</div>

Demo:

Answer №2

It appears that your bootstrap columns are not properly aligned.

To resolve this issue, you should group the content you want to divide into columns within a parent div. By doing this, you are indicating that the main container occupies 12 columns of the grid and you can then specify how many columns each section inside should span.

Here's a quick example:

---

    .partLineDesc{
        margin-top: 30px;
        text-align: center;
    }
    
    .leftContDesc{
        margin-top: 20px;
        background-color:gray;
    }
    
    .rightContDesc{
       background-color:gray; 
       margin-top: 20px;
    }
    
    .cottonImg{
        margin-top: 15px;
        text-align: left;
    }
    
    .partLineDesc2{
        margin-top: 20px;
        text-align: center;
    }
    
    .securInfo{
        margin-top: 30px;
        text-align: center;
        background-color:#eff4f9;
        border-radius: 10px;
        border: 2px solid #dddddd;
        padding: 20px; 
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <div class="col-sm-8">
        <div class="partLineDesc">
          <img src="partDesc.png" alt="line separation" class="img-responsive" style="width:1000px; height:5px;">
        </div>
       </div>
    
        <div class="col-sm-12 col-md-12 col-lg-12">
        <div class="leftContDesc col-sm-4 col-md-4 col-lg-4">
            <p>
              text text text text text texttext text text text text text
              <br> text text text text text texttext text text text text text
            </p>
            <img src="cottonImg.png" alt="100% Cotton" class="img-responsive" style="width:100px; height:100px;">
        </div>
    
        <div class="rightContDesc col-sm-4 col-md-4 col-lg-4">
            <p>
              text text text text text texttext text text text text text
              <br> text text text text text texttext text text text text text
            </p>
        </div>
          
       <div class="col-sm-4 col-md-4 col-lg-4">
        <div class="securInfo">
        </div>
      </div>
          
    </div>
        <div class="partLineDesc2">
          <img src="partDesc.png" alt="line separation" class="img-responsive" style="width:1000px; height:5px;">
        </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

Alignment issue with React JSX background position; image not centered on the right in Material UI Grid item

I've recently completed a single-page website portfolio, but I'm encountering an issue with setting the background position of the home screen to center right. You can view my site here: Here is the link to my repository: https://github.com/Bolm ...

cssreactjsmaterial-uijsx

Invoking a function means calling another one simultaneously

There are two buttons in my code: The button on the right triggers a function called update(): <script> function update(buttonid){ document.getElementById(buttonid).disabled = true; event.stopPropagation(); var textboxid = buttonid.sli ...

javascriptjqueryhtmlcssajax

Achieve a Smooth Transition: Utilizing Bootstrap 3 to Create an Alert Box that Fades In upon Click and Fades Out

Incorporating AngularJS and Bootstrap 3 into my web app, there is an "Update" button that saves user changes. Upon clicking the "Update" button, I aim to trigger and display bootstrap's alert box with the message "Information has been saved," followed ...

javascriptjquerycssangularjstwitter-bootstrap

Tips for making your inner content as wide as possible

I'm currently working on developing collapsible tables, where an outer and inner table are displayed for every row that is clicked. This is the code I have implemented: HTML: <table class="table outerTbl mb-0"> <thead> <t ...

htmlcssbootstrap-4

How does HTML calculate the percentage-based size of a child element when the parent element has padding?

After analyzing the scenario presented, it appears that the outer yellow box is 240px wide (200 width plus 20 padding on each side). The red child inside has its width set at 50%. Surprisingly, when rendered, the red box measures 140px in width. You can v ...

htmlcss

Can a FontAwesome icon be used as a button in Bootstrap?

Hi there, I'm trying to use a fontawesome icon as a button in my code. Here is what I have so far: <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" ...

htmlcssbootstrap-4font-awesome

What is causing the issue of my oversized images not showing up on GoDaddy?

I recently uploaded my website on GoDaddy and I am facing an issue where some of my small images (sizes: 872 × 546px) are displaying perfectly fine, but the large ones (banners with a size of 2700 × 900px) aren't showing up. Does anyone have ...

htmlcsscpanelgodaddy-api

Align content vertically within a div container

I have encountered an issue where I am trying to center vertically the content within a div. Here is an example of the structure: <div class="container-fluid"> <div class="row restaurant"> <div class="col-md-6"> & ...

htmlcsstwitter-bootstrapcenter

Utilizing tag keys for inserting text and adjusting text sizes within a Web application

Creating an online editing interface for coursework where keyboard events are used. The goal is to have the tab key insert text, while also reducing the size of the text on that line. However, upon using getElementById, an error message pops up stating: ...

javascripthtmlcssevents

Displaying a specific division solely on mobile devices with jQuery

I need to implement a feature where clicking on a phone number div triggers a call. However, I only want this div to be displayed on mobile devices. To achieve this, I initially set the div to "display:none" and tried using jQuery to show it on mobile devi ...

javascriptjqueryhtmlcss

Images in Bootstrap 4 will automatically stretch beyond the column width if they exceed the default size

I am experiencing an issue with Bootstrap 4 alpha where my image, located in the same column as the text, is extending beyond the permitted width. To see a demo of this issue, check out: https://codepen.io/anon/pen/qmpPGO https://codepen.io/anon/pen/qmpPG ...

twitter-bootstrapbootstrap-4twitter-bootstrap-4

Ensure that the HTML image and text are positioned side by side, with the text appearing alongside the picture rather than below

Looking for a way to keep the text aligned to the right of an image, regardless of length? Check out this exercise: https://www.example.com/css/exercise-1 Is there a method to maintain the text layout next to an image while accommodating varying amounts o ...

htmlcss

What is the best way to trigger card opening - through clicking or hovering?

Once the Set tag/status button on the left is clicked, I aim to display a card similar to this one on the right side. What would be the best approach to achieve this in React? Should I use regular CSS, Material UI, or React-bootstrap? https://i.stack.img ...

cssreactjssassmaterial-uireact-bootstrap

What could be the reason for the absence of the CSS destination folder being generated by

My colleague has the exact same code and can run gulp without any issues, but I'm struggling to compile the css files using Gulp. Gulp isn't creating the css destination file or the css files themselves. However, it works perfectly fine for build ...

cssnode.jsnpmgulp

There are various IDs in the output and I only require one specific ID

I have a JSON fetcher that is functioning properly. However, whenever I request an ID, it returns all the IDs present in the JSON data. Is there a way to retrieve only the latest ID? This is my first time working with JSON so I am still learning. $(docu ...

javascripthtmljsonfetch

Extracting information from a hyperlink without the need to actually click on it

Hello, I have recently started learning JavaScript and I am looking to accomplish a specific task. Currently, I am navigating on A.com/. Within the content of A.com/, there is a link labeled as A.com/B. Upon clicking on the link A.com/B, I can see ...

javascriptjqueryhtmlajax

Issue encountered: difficulty with vertical alignment in table cell containing both text input and image

I am facing an issue with aligning two items (an input text and an image) within a cell of a table. Despite trying various methods like using vertical-align:middle, margin top, padding, and setting height to 100%, I haven't been able to achieve the de ...

htmlcssvertical-alignmentcss-tables

Styles brought in from external sources do not get applied to components

My goal is to create a separate file specifically for storing styles targeted at IE 9-11. In order to achieve this, I have created a file named InternetExplorer.scss and imported it into my main file styles.scss: @import "scss/InternetExplorer.scss"; The ...

cssangularsass

Creating a currency input field in HTML using a pattern textbox

In a project using HTML, Angular 2, and Typescript, I am working with a textbox. How can I ensure that it only accepts numbers along with either one dot or one comma? The input should allow for an infinite number of digits followed by a dot or a comma and ...

htmlangularjsdesign-patternstypescriptcurrency

What is the best way to format these div elements in order to create a functional comment section?

For the past few hours, I've been struggling to figure out what’s causing issues with the styling on my webpage. The layout should display a user post on one side and a comment-section along with the comment form on the other. Within the PostComment ...

phpcss