Creating a visually appealing webpage by utilizing Bootstrap and HTML for the layout

I am in the process of learning html and Bootstrap for CSS.

Below is the code I currently have:

<div class="container">
  <div class="row text-center mb-4 mt-2">
    <div class="col-md-12">
      <div class="w-100 col-md-12 pb-4 pt-1 bg-light">
        <div class="row">
          <div class="col-md-12 mt-4">
            <div class="col-md-4 mt-4">
              <h4 class="mb-4 font-weight-bold">Step 1:</h4>
              <h5 class="mt-4 pl-5 pr-5">Search for people based on your keywords.</h5>
            </div>
            <div class="col-md-8 mt-4">
              <div class="icon-box">
                <img src="static/images/step1.jpg" class="img-fluid mx-auto d-block" />
              </div>
            </div>

            <div class="col-md-8 mt-4">
              <div class="icon-box">
                <img src="static/images/step2.jpg" class="img-fluid mx-auto d-block" />
              </div>
            </div>

            <div class="col-md-4 mt-4">
              <h4 class="mb-4 font-weight-bold">Step 2:</h4>
              <h5 class="mt-4 pl-5 pr-5">The results are sorted by a person's responsiveness. Choose from a list of matches who are ready and willing to interact.</h5>
            </div>

            <div class="col-md-4 mt-4">
              <h4 class="mb-4 font-weight-bold">Step 3:</h4>
              <h5 class="mt-4 pl-5 pr-5">Message and make connections with people who are open for (real or virtual) coffee!</h5>
            </div>
            <div class="col-md-8 mt-4">
              <div class="icon-box">
                <img src="static/images/step3.jpg" class="img-fluid mx-auto d-block" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

However, when displayed, it looks different than expected:

https://i.sstatic.net/ub2kp.png

All elements appear stacked on top of each other. How can I arrange them as follows?

Row 1: Text followed by Image

Row 2: Image followed by Text

Row 3: Text followed by Image

Any advice on what might be causing this issue would be appreciated!

htmlcssbootstrap-4

Answer №1

To simplify the code, remove the following section:

After deleting that part, the code will look like this:

<div class="container">
        <div class="row text-center mb-4 mt-2">
            <div class="col-md-12">
                <div class="w-100 col-md-12 pb-4 pt-1 bg-light">
                    <div class="row">
                        <div class="col-md-4 mt-4">
                            <h4 class="mb-4 font-weight-bold">Step 1:</h4>
                            <h5 class="mt-4 pl-5 pr-5">Search for people based on your keywords.</h5>
                        </div>
                        <div class="col-md-8 mt-4">
                            <div class="icon-box">
                                <img src="https://static.toiimg.com/thumb/msid-58475411,width-748,height-499,resizemode=4,imgsize-142947/.jpg"
                                    class="img-fluid mx-auto d-block" />
                            </div>
                        </div>

                        <div class="col-md-8 mt-4">
                            <div class="icon-box">
                                <img src="https://static.toiimg.com/thumb/msid-58475411,width-748,height-499,resizemode=4,imgsize-142947/.jpg"
                                    class="img-fluid mx-auto d-block" />
                            </div>
                        </div>

                        <div class="col-md-4 mt-4">
                            <h4 class="mb-4 font-weight-bold">Step 2:</h4>
                            <h5 class="mt-4 pl-5 pr-5">The results are sorted by a
                                person's responsiveness. Choose from a list of matches
                                who are ready and willing to interact.</h5>
                        </div>

                        <div class="col-md-4 mt-4">
                            <h4 class="mb-4 font-weight-bold">Step 3:</h4>
                            <h5 class="mt-4 pl-5 pr-5">Message and make
                                connections with people who are open for (real or
                                virtual) coffee!</h5>
                        </div>
                        <div class="col-md-8 mt-4">
                            <div class="icon-box">
                                <img src="https://static.toiimg.com/thumb/msid-58475411,width-748,height-499,resizemode=4,imgsize-142947/.jpg"
                                    class="img-fluid mx-auto d-block" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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

The mystery of the Accordion Effect: A Next.js/React.js issue where it slides up but refuses to

After implementing a custom accordion using next.js, I encountered an issue where the slide animation worked successfully when moving up and out upon clicking the button. However, when trying to move it back down into the content, it did not animate as exp ...

javascriptcssreactjsnext.jsaccordion

Grid-based timekeeping design

Currently working on a clock grid layout and seeking some advice on the next steps. The layout has been created but still needs some adjustments to achieve perfection. What would be the most effective approach for correcting it? Would offsetting it using a ...

htmlcssbootstrap-4

Is it possible to use speech recognition on browsers besides Chrome?

Is there a way to utilize a microphone with JavaScript or HTML5 without relying on Flash technology? I was able to achieve this in Chrome by using webkit-speech, but I am looking for solutions that will work in other browsers as well. Any suggestions wou ...

javascripthtmlcross-browser

What is the best way to center align two inner divs within a container?

I've been working on achieving the following design: https://i.sstatic.net/ckC3j.png Just to clarify, the dashed line represents a guide indicating that both .inner-a and .inner-b are aligned in the middle horizontally and vertically within the imag ...

csstwitter-bootstrapbootstrap-4

Utilizing Jquery.validate() for personalized checkbox validation

My struggle lies in integrating jQuery.validate() with custom-designed checkboxes. I am unable to achieve the desired outcome where, upon clicking SUBMIT without selecting any checkboxes, an error should be displayed in the respective label. Despite having ...

javascriptjquerycsscheckboxjquery-validate

Incorporate CSS styling within a PHP document

Many individuals are aware that HTML can be embedded within a PHP file. However, can CSS also be included in a PHP file and accessed using <link rel="stylesheet" type="text/css" href="mystyle.php" /> to make it act as a CSS file? While it is possib ...

phphtmlcss

Divergent Bootstrap layouts for different devices

https://i.sstatic.net/g1YeJ.png I am working on creating a layout where I want to display certain content differently based on whether the user is viewing it on a mobile or desktop device. The current approach I have taken involves duplicating some divs ...

htmltwitter-bootstrapresponsive-design

Discover the absent style attributes within an HTML code in C# and incorporate them

Currently facing a challenging situation where I have a C# string with html tags: string strHTML = "<span style="font-size: 10px;">Hi This is just a section of html text.</span><span style="font-family: 'Verdana'; font-size: 10px; ...

c#htmlcssstyles

What is the best way to access the display property of a DOM element?

<html> <style type="text/css"> a { display: none; } </style> <body> <p id="p"> a paragraph </p> <a href="http://www.google.com" id="a">google</a> &l ...

javascriptcssdom

Leverage JQuery Mobile for smooth sliding and effortless deletion of list elements

Currently, I am testing a JQuery Mobile webpage that features a simple list setup: Upon clicking the list items, they get highlighted and their ids are saved in a local array. Is there an easy (or not so easy) way to transition the selected elements slidi ...

javascriptjqueryhtmljquery-mobile

Tips for transferring simple CSS formatting to an independent stylesheet

As part of a university project, I am working on a basic website. Initially, I used in-line styling for the website design. However, the subject coordinator has now changed the requirements and we are only allowed to use an external CSS stylesheet. Most of ...

htmlcss

Static checks do not apply to CSS variables

Our webtech class assignment is to create a static webpage that meets the criteria of the jigsaw w3c css validator. We've encountered a roadblock while trying to resolve the final warning message: Due to their dynamic nature, CSS variables are curre ...

css

Making the child element expand to the full width of its parent while maintaining an overflow-x:auto property

Is there a way to stretch a child div without specifying fixed widths? Even when trying to wrap items and child in one wrapper div, the child div always takes up 100% width. Not full horizontal width. Thank you. .parent { background: skyblue; widt ...

css

Avoiding the use of "echo" in PHP can prevent unintended characters, especially the one created by the "¯

How can I prevent an issue where the '&macr' in a URL variable string creates the ¯ characters when echoed? echo "direct=1&closeBrowser=1&savelog=log.txt&storage=xfile&macrfile=klanta\test.html"; ...

phphtmlstringurlcharacter

the dropdown menu toggle is not working as expected

My dropdown icon is not appearing and the menu options are not functioning properly. Despite trying to use a script to display the text when an option is clicked, it doesn't seem to be working. It appears that the toggle functionality is not working ...

javascripthtmlcssdrop-down-menu

Is there a way to position the button on the right side rather than the center using a negative right Y value?

I'm looking for something that: Has a button on the right side, not just beside the input. The current setup involves using an unattractive width: 138%, which doesn't consistently work across different browsers and devices. The button ends up a ...

htmlcssbootstrap-5

Weather Application featuring Circular Slider

I've been on the hunt for a circular slider animation. Imagine it working like this: <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" /> <span id="range">0</span> function showValue(newValue ...

javascriptjqueryhtmlcssslider

The appearance of an SVG image inside an absolutely positioned div varies between Firefox and Chrome

The web page I am working on can be found at the following link: This webpage consists of text and SVG images, with the hex bolts positioned over specific areas of the text. Achieving this effect requires absolute positioning within a relatively positione ...

htmlcsstextflexboxgraphical-logo

Continuously executing a series of JQuery functions or iterating through them repeatedly

Struggling with a jQuery animation loop issue that has me stuck. I need the animation to repeat continuously, but it's not working despite trying setInterval. Can anyone assist? Here's the fiddle link: https://jsfiddle.net/8v5feL9u/ $(document). ...

javascriptjqueryhtmlfrontend

Incorporate the operating hours of a Business

If I specifically choose Sunday and Monday with working hours ranging from 08.00 to 20.00, the output should be 1&08:00&20:00,2&08:00&20:00. How can I achieve this using Vue.js? This is my current code: <script> submitBox = new Vue( ...

javascriptjqueryhtmlvue.jsvue-component