Failure to align Bootstrap columns side by side despite being within the same row

I'm having an issue with aligning the columns in my testimonials section. Despite using col-md-5 for each column, they are not lining up side by side as expected. Here is the code I am currently using:

<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 specialize in Web Development, Digital Marketing, and Graphic Designing - your one-stop shop for all 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 specialize in Web Development, Digital Marketing, and Graphic Designing - your one-stop shop for all technical needs.</p>
    </div>
</div>

Here is the CSS associated with this section:

#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;
}
htmlcssbootstrap-4

Answer №1

Take a look at this code 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 specialize in Web Development, Digital Marketing, and Graphic Designing. Your one-stop solution for 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 specialize in Web Development, Digital Marketing, and Graphic Designing. Your one-stop solution for all your technical needs.</p>
                </div>
            </div>
        </div>
    </body>
    </html>
  1. Use the class attribute instead of id to apply the row class.
  2. To make your columns fill the full page width, use col-md-6 instead of col-md-5, as bootstrap-4 row columns add up to 12 not 10.

Note: If you want them to be displayed side-by-side on screens as small as tablets, use col-sm-6 instead of col-md-6. col-md-6 is suitable for small laptops and larger screens.

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

Strategies for concealing and revealing content within dynamically loaded AJAX data

I am attempting to show and hide data that is loaded using Ajax. $.ajax({ type: "POST", url: "/swip.php", data: {pid:sldnxtpst,sldnu:sldnu}, success: function(result) { $('.swip').prepend(result); } }); This data gets ...

javascriptjqueryhtmlajax

Expanding div fills remaining space with scrollable content (Utilizing Bootstrap 4 Flexbox grid)

My code was running smoothly before I enabled flexbox support in Bootstrap 4 Alpha 3: Check out the working jsfiddle here However, once flexbox support was enabled, I hit a roadblock. I'm looking for a solution using Bootstrap 4 built-in Flexbox gri ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Utilization of Scrapy chain selector amidst varied parent elements

I am trying to concatenate two selectors with different parents. The first selector currently in use is: ..css('td:nth-child(8) > span.cap.mtv > ::text') This returns: <Selector xpath="descendant-or-self::td[count(preceding-sibling::* ...

csspython-3.xxpathscrapy

How you can fix the issue of the "Element not visible" error occurring specifically for one element within the popup

Error Message: "Element Not Visible" when Script Reaches Last Element Despite all attributes being in the same form, an error occurs when the script reaches the last element and displays "element not visible." All elements are enclosed in div tags on the ...

javascriptjqueryhtmlcssselenium

I'm encountering an undefined JavaScript variable, how should I proceed?

$(function(){ //Location was "set". Perform actions. $("#geocodesubmit").click(function(){ var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': address}, function(results, status) { if (status ...

javascriptjqueryhtmlcssgoogle-maps

Tips on creating a responsive div element within the viewport?

I have a variety of nested div elements within a parent div, set up like this: #mycontent > div { width: 14.28%; } <div id="myheader">some header content</div> <div class="container" id="mycontent"> <div class="outerdiv" id= ...

htmlcss

Is there a way to automatically adjust the position of a tooltip div based on its location relative to the screen in AngularJS?

I've implemented AngularJs to create a grid with repeated li elements, each displaying a description box when hovered over. However, I am facing an issue where the description box goes off-screen when hovering over items on the right side of the grid. ...

htmlcssangularjsgridtooltip

Tips for stopping html form from refreshing upon submission

Hello, despite extensive searching and testing, I am still unable to locate the issue and therefore I am reaching out to seek your assistance in resolving my problem. Within a form that I have created, upon clicking the submit button, a javascript functio ...

javascripthtmljqueryforms

Adjust the size of the textarea to accommodate the number of lines of text

<script type="text/javascript"> function AutoGrowTextArea(textField) { if (textField.clientHeight < textField.scrollHeight) { textField.style.height = textField.scrollHeight + "px"; if (textField.clientHeight ...

javascripthtml

Parsing HTML in Python 3: A Guide to Extracting Information

Trying to extract text from a webpage using Python 3.3 and then search for specific strings within that text. When a matching string is found, the goal is to store the subsequent text. For instance, taking this page as an example: and I need to preserve ...

pythonhtmlparsing

Guide on incorporating pinching gestures for zooming in and out using JavaScript

I have been working on implementing pinch zoom in and out functionality in JavaScript. I have made progress by figuring out how to detect these gestures using touch events. var dist1=0; function start(ev) { if (ev.targetTouches.length == 2) {//checkin ...

javascripthtml

Transitioning smoothly between different backgrounds will be like changing the cursor color

As I work on my website, I encounter the need for a cursor that smoothly changes its color. Specifically, I want the cursor to appear blue (#0059ff) when hovering over a white background and white when over a blue background, with a seamless transition lik ...

csssassmix-blend-mode

Tips for updating the color scheme in your CSS file by making hue adjustments to all colors

I have a CSS file and I am looking to automatically generate multiple color variations of the file by altering the hue, similar to using the "colorize" function in GIMP. I came across a tool that does exactly what I need at , however it does not support t ...

cssshellhue

"When the screen resolution changes, the absolute positioning of images won't function as expected

I am trying to overlay one image on top of another background image, but I am facing an issue. When I change the screen resolution, the position of the image that should be placed over the background image also changes. Below is the code I am using: ...

htmlcss

Manipulating div positions using JQuery and CSS

Whenever I hover over the #HoverMe div, a hidden #hidden div appears, and when I unhover it, the hidden div disappears again. The #hidden div contains a sub-div that functions like a dropdown list. The #hidden div is styled with position: absolute;. How ca ...

javascriptjquerycssasp.net

Could someone assist me in resolving the issue of receiving empty emails from my online form submission?

Every day, I receive 6 blank emails from my contact form at the same time. Even though the form on the website is filled out correctly and all the information goes through, I still get these mysterious blank emails. I have implemented validation checks in ...

javascriptphphtmlforms

Having difficulty populating a table with JSON data in Angular without encountering any error messages

After executing a query on my database, I realized that although the JSON data is correct (as confirmed through the console), the table does not populate as expected. Here is the code snippet for my component: @Component({ selector: 'app-envios&apo ...

htmljsonangularngfor

Implement consistent styling across several elements within a component

const GreenRow = styled.div` background-color: green; ` const RedRow = styled.div` background-color: red; ` const YellowRow = styled.div` background-color: yellow; ` const GreyRow = styled.div` background-color: grey; ` const MyComponent = () => ...

cssreactjsstyled-components

Unlocking the potential of resizable bootstrap table columns in React

Currently utilizing a bootstrap table <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Table heading</th> </tr> < ...

javascripthtmlcssreactjstwitter-bootstrap-3

Implementing a hybrid design using the display flex property

Any suggestions on the most effective way to achieve the following layout using flexbox? I want 2 rows with columns of equal width, but the last column should be 100% height and fill the remaining space in the section. Should I consider using multiple row ...

htmlcssflexboxcss-grid