CODEWITHSUNDEEP
htmlcssbootstrap-4
Akansha Rattan
Akansha Rattan

Reputation: 23

Bootstrap columns not aligning besides each other despite of being in the same row

I have this section called testimonials and I need to align the columns on the side of each other under the same row. I have used col-md-5 for each columns, yet they are aligning below each other. This is my code

<section id="testimonials">
<div class="container">
    <h1 class="title text-center">What our clients say</h1>
    <div id="row">
        <div class="col-md-5 testimonials">
            <p>We deal in specializations such as Web Development, Digital Marketing and Graphic Designing. Your one stop to all your technical needs.</p>
            <img src="images/user1.jpg">
            <p class="user-details"><b>Angelina Green</b><br>Co-founder at xyz</p>
        </div>

        <div class="col-md-5 testimonials">
            <p>We deal in specializations such as Web Development, Digital Marketing and Graphic Designing. Your one stop to all your technical needs.</p>
    </div>
</div>

This is my css:

 #testimonials
{
    margin: 100px 0px;
}

.testimonials
{
    border-left: 4px solid #7b1798;
    margin-top: 50px;
    margin-bottom: 50px;
}

.testimonials img
{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    margin: 0px 10px;
}

.user-details
{
    display: inline-block;
    font-size: 12px;
}

Upvotes: 1

Views: 422

Answers (1)

gpl
gpl

Reputation: 1470

Check out this snippet:

        #testimonials
        {
            margin: 100px 0px;
        }

        .testimonials
        {
            border-left: 4px solid #7b1798;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .testimonials img
        {
            height: 60px;
            width: 60px;
            border-radius: 50%;
            margin: 0px 10px;
        }

        .user-details
        {
            display: inline-block;
            font-size: 12px;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
    <section id="testimonials">
        <div class="container">
            <h1 class="title text-center">What our clients say</h1>
            <div class="row">
                <div class="col-md-6 testimonials">
                    <p>We deal in specializations such as Web Development, Digital Marketing and Graphic Designing. Your one stop to all your technical needs.</p>
                    <img src="images/user1.jpg">
                    <p class="user-details"><b>Angelina Green</b><br>Co-founder at xyz</p>
                </div>

                <div class="col-md-6 testimonials">
                    <p>We deal in specializations such as Web Development, Digital Marketing and Graphic Designing. Your one stop to all your technical needs.</p>
                </div>
            </div>

        </body>
        </html>

  1. You need to use class attribute instead of id to apply row class
  2. To make your columns share full page-width you need to use col-md-6 instead of col-md-5, because bootstrap-4 row columns sum up to 12 not 10.

Note: If you want them to show side-by-side on screen as small as tablets, then instead of col-md-6, use col-sm-6. col-md-6 applies for small laptops and more bigger screens

Upvotes: 1

Related Questions