Having trouble aligning two divs horizontally on the same line in Bootstrap 4

I am facing an issue with my HTML code where I have two div elements that are supposed to be horizontally aligned, but the second div is appearing underneath the first one. To fix this, I tried using bootstrap classes for alignment.

<div class="container">
     <div class="row">
        <div class="col-lg-12 mx-auto col-sm-12 col-md-12 mb-4 text-center">
        <div class="wow fadeInUp">
           <h2 class="section-head mb-5">Invite trainees  </h2>
           <div class="col-lg-6 col-sm-12 col-md-12">
              <p class="mb-5 mx-auto b-500"> 
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.  
              </p>
           </div>
           <div class="col-lg-6 col-sm-12 col-md-12">  
              <img src="images/vector.png" class="img-responsive">
           </div>
          
        </div>
        </div>
     </div>
  </div>
csstwitter-bootstrapbootstrap-4

Answer №1

To ensure the parent div has the correct styling, make sure to add the class **row** as shown in the code snippet below:

`<div class="container">
    <div class="row">
    <div class="col-lg-12 mx-auto col-sm-12 col-md-12 mb-4 text-center">
        <div class="wow fadeInUp row">
           <h2 class="section-head mb-5">Invite trainees  </h2>
           <div class="col-lg-6 col-sm-12 col-md-12">
              <p class="mb-5 mx-auto b-500"> 
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
              bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
              </p>
           </div>
           <div class="col-lg-6 col-sm-12 col-md-12">  
              <img src="images/vector.png" class="img-responsive">
           </div>
          </div>
        </div>
    </div>
</div>`

Answer №2

To ensure proper structure, any div with the class .col should be nested within a parent div with the class .row. Here’s an example of how your code should look:

   <div class-'row>
               <div class="col-lg-6 col-sm-12 col-md-12">
                  <p class="mb-5 mx-auto b-500"> 
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  </p>
               </div>
               <div class="col-lg-6 col-sm-12 col-md-12">  
                  <img src="images/vector.png" class="img-responsive">
               </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

Embedding a video element results in an unexpected increase in height

When I insert an HTML5-Video element into a div, it results in the wrapper having a height larger than the video itself. The wrapper is 7px taller than the actual video source, without any min-height set. Check it out! (Scroll down to the Video) The vide ...

htmlcsshtml5-video

Changing the color of the Bootstrap-Vue b-dropdown button when it is open

When it comes to customizing the button color and hover effect, the code below does the job perfectly. However, there seems to be an issue where the button color reverts back to gray when the menu is open and the cursor moves away from the button. How can ...

htmlcsstwitter-bootstrapvue.jsbootstrap-vue

Ways to align text in a table row in a way that it remains positioned at the center of the screen's visible area

Can anyone assist me with this task? I need help centering text within a table row ('Some text here...') so that it always appears in the middle of the screen. The table will have horizontal scrolling. .compare-content { max-width: 480px; ...

jqueryhtmlcsshtml-tablerow

What sets apart element.class from element .class in CSS?

I've been puzzled trying to figure out why my CSS was not applying when I had mydiv .myclass { font-size: 24px !important; } But then I randomly decided to try mydiv.myclass { font-size: 24px !important; } and surprisingly it worked perfectly. Wh ...

htmlcss

Firefoxy can't seem to get through the navigation keys within an element that has a hidden

Check out this fiddle I created: http://jsfiddle.net/c11khcak/13/. My goal is to hide the scrollbar of an element while still allowing it to be scrollable using the mouse wheel and up/down navigation keys. I've been able to achieve this using some bas ...

htmlcssfirefoxscroll

Reposition DIV elements using only CSS styling

I'm attempting to switch the positions of two divs for responsive design (the website appearance changes based on browser width, ideal for mobile). Currently, my setup looks like this: <div id="first_div"></div> <div id="second_div"&g ...

cssresponsive-design

How to Properly Wrap Sub-Menu Elements in WordPress with Div Tags

I am currently working on styling my WordPress sub menu list items using HTML. I have written the HTML code that I want to use, but I am not sure how to incorporate it into the wp_nav_menu() function. Can you assist me with this? <ul class="menu"> ...

htmlcsswordpress

Gradient background overlaid with a blended SVG shape

Creating a full gradient background with a clipping mask can be tricky. I used an SVG to achieve the desired shape by cutting part of the background color, but now I'm facing a challenge with blending the colors seamlessly. I tried setting the SVG co ...

htmlcsssvg

The floating label appears distorted when used with a datalist input in Bootstrap 5

How can I get the floating label to display correctly for datalists in Bootstrap 5? Currently, it looks like this... It's working fine without the form-floating class, but I want to use the floating form feature. <div class="form-floating" ...

htmlcssfrontendbootstrap-5web-frontend

Distinguish the disparities between mobile and desktop devices

I need a solution for adjusting the layout of a component based on the device it is viewed on. For mobile devices, I want the content to stack vertically like in this example: https://codesandbox.io/s/material-demo-forked-ktoee?file=/demo.tsx. However, o ...

cssreactjsmaterial-uijss

Table with Typewriter Style CSS Animation

I came across an interesting typewriter effect implementation using CSS in an article on CSS Tricks I decided to play around with it and see if I could apply it to a hero image, which I found an example of on Codepen However, I noticed that the blinking ...

cssanimationhtml-table

"Implementing a seamless transition effect on two slideshows using jQuery's fadeslideshow

I currently have a homepage featuring a fadeslideshow with 5 slides. The fadeslideshow plugin being used can be found at http://plugins.jquery.com/project/fadeslideshow. On the homepage, there is also a menu bar with various menu items. When a user clicks ...

javascriptjqueryhtmlcss

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

csshtml

Dealing with a problem in CSS Flexbox while aligning child elements using the `align-self`

Check out this test code here - https://jsfiddle.net/8dgeh9r3/1/ I have set up two scenarios to simulate. In the first scenario, there is a main parent flex container with multiple intermediary parents (which are also flex boxes that inherit properties fr ...

htmlcssflexbox

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui

Guide to making a dynamic image map with interactive links using HTML and CSS

Seeking advice on how to create clickable areas within an image that lead to different pages on my website. Image maps seem like a good solution, but the issue is that they require specific coordinates which may not work well for responsiveness. I was hop ...

htmlcssimagemap

Trouble arises with kids when trying to adjust the display to block mode

I need to set all the div elements inside the div with id "editor" to display as block. However, when I change the display property of the div with id "editor", only that specific div's display is affected, while everything else inside the div becomes ...

javascriptjquerycss

Adding a sibling inline can be accomplished by simply using the "+"

$("#sibling").prepend("#sibling2") <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="sibling">First sibling</div> <div>Another component</div> <div id="sibling2">Seco ...

jqueryhtmlcss

Tips for modifying the color of highlighted text?

Can you help me change the color of this text from blue to dark green by using Javascript or HTML/CSS? Please left-click and drag over the text to select it. ...

htmlcss

Update the div element without needing to reload the entire page

Is there a way to reload a div tag without refreshing the entire page? I understand this question has been asked before, but I want to make sure I have a clear understanding. <p>click HERE</p> <div class="sample"> <?php functi ...

javascriptphpjquerycss