The alignment of rows and columns is not proper

Question

The alignment of rows and columns is not proper

I have been using bootstrap and encountering an issue with aligning rows containing 2 columns each. The alignment is not appearing as desired. What I want: https://i.sstatic.net/OoIiB.jpg

However, what I am getting is different: https://i.sstatic.net/FpI3B.jpg

I have spent over an hour trying to fix this but without success. Can someone please help me identify what's wrong here?

Below is the CSS related to this:

    .container {
  text-align: center;
  width: 80%;
}

/* Other CSS classes and properties follow... */

If you wish to view the codepen for a better understanding, click on this link - codepen. I have updated the image in the link to showcase the specific error where each row consists of an image and text on opposite sides causing misalignment.

html css twitter-bootstrap

Answer 1

Answer №1

When modifying col- divs, it's best to avoid changing their styles directly. Instead, create additional blocks inside them to achieve your desired layout. Keep in mind that the col- class comes with built-in padding.

You could try something like this:

<div class="row">
    <div class="col-lg-6">
    <div class="text-left">
      <div class="bordered-box">
        <img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
      </div>
    </div>
    </div>
    <div class="col-lg-6">
    <p>EASY TO UNDERSTAND<br><span class="spanf">Optimize Your Product & Category<br> Performance</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
    <button>Join Now</button></p></div>
</div>

Add style to bordered-box:

.bordered-box{
  display:inline-block;
  border:3px solid #46ab86;;
}

Check out the jsfiddle for a visual representation.

Answer 2

When modifying col- divs, it's best to avoid changing their styles directly. Instead, create additional blocks inside them to achieve your desired layout. Keep in mind that the col- class comes with built-in padding.

You could try something like this:

<div class="row">
    <div class="col-lg-6">
    <div class="text-left">
      <div class="bordered-box">
        <img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph">
      </div>
    </div>
    </div>
    <div class="col-lg-6">
    <p>EASY TO UNDERSTAND<br><span class="spanf">Optimize Your Product & Category<br> Performance</span><br>
There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.<br>
    <button>Join Now</button></p></div>
</div>

Add style to bordered-box:

.bordered-box{
  display:inline-block;
  border:3px solid #46ab86;;
}

Check out the jsfiddle for a visual representation.

Answer 3

Answer №2

It is essential to ensure the correct usage of columns to avoid overriding your styling. The framework is designed in a way that minimizes the need for excessive CSS.

A key point to remember is that each row should be enclosed within its own container with the class row to maintain proper structure and alignment.

Avoid unnecessary styling as Bootstrap's column classes handle this effectively on their own.

Below is a straightforward example demonstrating the use of Bootstrap to align rows and position text on either side of the page:

Example:

<div class="row">
    <div class="col-md-6"><p>Your first row text item, left aligned by default.</p></div>
    <div class="col-md-6"><img src="your-image-file.jpg" class="img-responsive" alt="dont-forget-your-alt" /></div>
</div>
<div class="row">
    <div class="col-md-6"><img src="your-second-image-file.jpg" class="img-responsive" alt="really-dont-forget-your-alt" /></div>
    <div class="col-md-6 text-right"><p>Your second row text item, which needs to be right aligned by adding the class to the p tag.</p></div>
</div>
etc...

Answer 4

It is essential to ensure the correct usage of columns to avoid overriding your styling. The framework is designed in a way that minimizes the need for excessive CSS.

A key point to remember is that each row should be enclosed within its own container with the class row to maintain proper structure and alignment.

Avoid unnecessary styling as Bootstrap's column classes handle this effectively on their own.

Below is a straightforward example demonstrating the use of Bootstrap to align rows and position text on either side of the page:

Example:

<div class="row">
    <div class="col-md-6"><p>Your first row text item, left aligned by default.</p></div>
    <div class="col-md-6"><img src="your-image-file.jpg" class="img-responsive" alt="dont-forget-your-alt" /></div>
</div>
<div class="row">
    <div class="col-md-6"><img src="your-second-image-file.jpg" class="img-responsive" alt="really-dont-forget-your-alt" /></div>
    <div class="col-md-6 text-right"><p>Your second row text item, which needs to be right aligned by adding the class to the p tag.</p></div>
</div>
etc...

Answer 5

Answer №3

Here is an example of styling in CSS:

.right{ float:right; margin-right:10px;}

and in HTML:

        <div class="row">
        <div class="col-lg-6 imgleft"> <img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph"> </div>
        <div class="col-lg-6 right">
            <p>ECOMMERCE FOCUS
                <br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</span>
                <br> There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.
                <br>
                <button>Join Now</button>
            </p>
        </div>
    </div>

Check out this JSFiddle link for a live demo.

Answer 6

Here is an example of styling in CSS:

.right{ float:right; margin-right:10px;}

and in HTML:

        <div class="row">
        <div class="col-lg-6 imgleft"> <img class="img-responsive img3" src="http://res.cloudinary.com/whizzy/image/upload/v1473309440/graph.jpg" alt="graph"> </div>
        <div class="col-lg-6 right">
            <p>ECOMMERCE FOCUS
                <br><span class="spanf">Decision Focused Dashboards To<br> Supercharge Your Ecommerce Business</span>
                <br> There are plenty of platforms that make it easy to capture data and analytics about your ecommerce site. But when it comes to understanding the data you've captured. It's not always clear what's important and where to make changes.
                <br>
                <button>Join Now</button>
            </p>
        </div>
    </div>

Check out this JSFiddle link for a live demo.

The alignment of rows and columns is not proper

Answer №1

Answer №2

Answer №3

Similar questions

Display data from additional tables within a loop

Exploring the position property in CSS

What is the best way to extract table data with Selenium in Python?

Ensure that the flex items are utilizing the full height of the parent when the flex-direction property is set to row

PHP and JQuery not working together to update database

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

How can I apply specific styling to certain cells within a table?

Tips on incorporating inline CSS within master pages

Scrolling to a specific anchor in a React webpage when the URL is opened in

Use the value in the form to search the database for two specific values

What is the best method to transfer a div from one container div to another using jQuery?

Upgrade ngf-select to work with Angular 8 versions

The beauty of Aurelia's scoped CSS

Gap between two div elements side by side

Combine the points of individual letters in Scrabble using jQuery

Utilize identical code across various jQuery instances

Ways to elevate cells of different sizes?

Why is this dropdown list extending beyond the window?

An alternative solution for object-fit in wkhtmltopdf

Error code "ER_BAD_FIELD_ERROR" was encountered with errno 1054 and sqlState "42S22" in index 0 while using MySQL with Angular and managing sessions