CODEWITHSUNDEEP
htmlcss
Martin Coetzee
Martin Coetzee

Reputation: 21

Have an HTML/CSS display issue - text is on image instead of next to image

I am doing a short Web Dev course on Udemy and really enjoying it. The webpage I am working on is not displaying correctly. I will include a screen capture below. The image and the text should be side-by-side with the image on the left but the image is on the text.

<HTML>
    <head>
        <title>Small Business Page</title>
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        
        <!-- Javascript -->
        <script src="js/jquery-3.5.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <!-- <script> //removed for adding in Bootstrap
            $(document).ready( function() {
                // code
                alert("Welcome To myPage With JQuery!");
            });
        </script>  -->
    </head>

    <body>
        <!-- Header -->
        <header>
            <!-- Main container -->
            <div class="container">
                <!-- single row -->
                <div class="row">
                    <!-- Column left -->
                    <div class="col-md-8">
                        <img class="img-responsive img-rounded" src="images/home.jpg" alt="Small Business Page">
                    </div>
                    <!-- Column right -->
                    <div class="col-md-4">
                        <h1>LoSo</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                        <a href="#" class="btn btn-primary btn-lg">Take a Tour</a>
                    </div>
                </div>
            </div>
        </header>
    </body>
    </HTML>

I am not sure why this is not displaying correctly. When I inspect the elements on the Chrome Dev Tools tab I don't see anything jumping out at them.

Text should be on the right of the image Any advice on how I should move forward would be appreciated.

Martin.

Upvotes: 0

Views: 58

Answers (1)

Muhittin G&#220;LAP
Muhittin G&#220;LAP

Reputation: 70

hello the bootstrap version you use is wrong with the class I guess you are using the 4.x version but you wrote 3.x as html you should check this first and you should specify this in this question

Upvotes: 1

Related Questions