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

Modifying td background color according to values in a PHP array

Trying to update the background color of a td element with the code below. However, it seems that the code needs some adjustment as the color is not being applied. Any assistance or alternative solutions would be greatly appreciated. Snippet of PHP code: ...

javascriptphpjqueryhtmlcss

firefox is experiencing lag issues with react-spring and framer-motion

Encountering an issue with two animation libraries, react-spring and framer-motion. Attempting to create a basic animation that triggers upon the component's initial visibility (simplified version). <motion.div initial={{x: -25, opacity: 0}} anima ...

cssreactjsanimationreact-springframer-motion

Incorporate FontAwesome icons into table headers within an Angular framework

I am attempting to customize the icons for sorting in my table headers by following the guidelines laid out in the ng-bootstrap table tutorial. The NgbdSortableHeader directive plays a key role in changing the sorting of columns: @Directive({ selector: ...

htmlcssangularangular-fontawesome

Is there a way to customize the design of an HTML scrollbar to resemble the one often seen on Google search engine result pages

While casually browsing online, I stumbled upon something truly unique. The image below shows a Google search result in Firefox that I have never encountered before or since. This screenshot captured a search result that was scrollable within itself. Isn& ...

htmlcssscrollbar

Issue with parallax scroll feature on Mobile Safari not functioning as expected

I created a JavaScript code for parallax scrolling on an image at the top of a webpage. The code functions perfectly on Chrome, Firefox, Internet Explorer, Opera, and Safari on desktop. However, when I tested it on Safari on my iPad, the parallax effect wa ...

javascriptjqueryioscssmobile-safari

Performing condition checks within the foreach loop and displaying numerous results in a single row

I have a list of results from searching certain parameters and I need to print them out. When using a foreach loop to print the results, I want to ensure that if the purchase dates are the same, they should be printed in the same row. How can I achieve thi ...

phphtmlhtml-table

Updating tooltip text for checkbox dynamically in Angular 6

Can anyone help me with this code? I am trying to display different text in a tooltip based on whether a checkbox is active or not. For example, I want it to show "active" when the checkbox is active and "disactive" when it's inactive. Any suggestions ...

htmlangulartypescriptangular6

I'm trying to access my navigation bar, but for some reason, it's not allowing me to do so

Having trouble getting the navigation bar to open. I have set it up so that when clicked, it should remove the hide-links tag, but for some reason, it does not toggle properly and keeps the ul hidden. import React from "react"; import { NavLink } ...

javascriptcssreactjsnavigation

Custom JSX element failing to include children during addition

I have created a unique component in JSX, like this: const CustomComponent = ({content}) => { return <div className={content}></div>; } I am using it as follows: <CustomComponent content={"xyz"}> <p>Some additio ...

htmltypescriptnestedjsx

Java update query experiencing issues

This servlet is designed to add a new user entry into a database table. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String firstname = request.getParameter("firstname"); Str ...

javajqueryhtmlcssjsp

Executing JavaScript code from an external link

Currently, I am in the process of developing a horizontal parallax website. The functionality is working seamlessly; when I click on the menu, the slides smoothly transition horizontally and display the corresponding content. However, I have encountered a ...

javascriptjqueryhtmlparallaxhorizontal-scrolling

Changing the loading spinner icon in WooCommerce

Could someone help me change the loading spinner icon in WooCommerce? The current icon is defined in the woocommerce.css: .woocommerce .blockUI.blockOverlay::before { height: 1em; width: 1em; display: block; position: absolute; top: 50 ...

phpcsswordpresswoocommercespinner

Transmit data from list items in the HTML to a form

Based on my understanding, there are limited options available to style an <option> tag within a <select> dropdown and it appears quite plain. So I was thinking about creating a more visually appealing dropdown using <ul> <li> tags ...

htmlcssselecthtml-lists

Easily toggle between different content within the same space using Twitter Bootstrap Tabs feature. Display the tabs

I made a modification to the bootstrab.js file by changing 'click' to 'hover': $(function () { $('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { e.p ...

javascriptjquerycsshovertwitter-bootstrap

Unable to see or play local mp4 file in Ionic iOS application

I am facing an issue with my Ionic app where I am trying to show a video playing in the background. The Jaeger25 HTMLVideo plugin works perfectly for Android, but when it comes to iOS, the video simply refuses to play. The video file is located in the www/ ...

javascriptioshtmlionic-frameworkhtml5-video

Tips for implementing text-overflow ellipsis in an HTML input box?

On my website, I have input fields where I've added the following CSS styling: .ellip { white-space: nowrap; width: 200px; overflow: hidden; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } H ...

htmlcssellipsis

Establish a comprehensive background for your Angular project

I've been struggling to figure out how to set a background image for my entire angular project. I've tried using global css and the app.component.css file, but it only sets the background for the component area. Here is a snippet from my global ...

cssangularbackground-image

Adjust the width of the unordered list to match the width of its widest child element

I'm encountering a minor issue with displaying a ul element as I am just starting to learn CSS. My goal is to set the width of my ul to match the widest listitem it contains. Below is the HTML code I have used: <div id="sidebar"> <ul i ...

jqueryhtmlcss

JavaScript - Removing Content from an Element

I have a coding script that adds an image preview of uploaded images. The issue I am facing is that the previous image does not clear when the form is filled out again. The id of the div where thumbnail images are being displayed is "thumbnail". Can someo ...

javascriptphphtmldom

Utilize CSS to incorporate special characters as list markers

Is there a way to use CSS to make the list marker in an HTML list display as "►"? ...

htmlcsshtml-lists