Attach image to the edge with a responsive layout using Bootstrap

I'm currently working on a project that involves the following elements:

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

I have images for the left and right sections, as well as an image of a monkey. My goal is to create a layout where the left image occupies col-3 space, the right image also takes up col-3, and the monkey along with accompanying text are placed in the middle within a col-6 space. However, my attempts so far have resulted in everything stacking on top of each other, overflowing out of the screen, and not functioning as intended. How can I achieve this desired layout?

    <section class="hero-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-xs-3">
                <img src="images/hero-left.svg" class="" alt="">
            </div>
            <div class="col-xs-6 col-md-126>
                <h1 class="">
                    <b>monKey</b> Generator</h1>
                <br>
                <h2 class="">Generate a
                    <b>unique monkey</b> avatar
                    <br> from a
                    <b>Banano public key</b>
                </h2>
                <img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6"
                    class="" alt="">
            </div>
            <div class="col-md-3 col-sm-3">
                <img src="images/hero-right.svg" class="" alt="">
            </div>
        </div>
    </div>
</section>
htmlcssbootstrap-4

Answer №1

There are a few errors in your code snippet above such as col-md-126 and a missing " after that. Additionally, Bootstrap 4 does not use 'xs' for column classes, so simply using col-3 col-6 col-3 should suffice. Check out the corrected snippet below.

img {
width:100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="hero-area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-3">
                <img src="images/hero-left.svg" alt="monkey left">
            </div>
            <div class="col-6">
                <h1>
                    <b>monKey</b> Generator
                </h1>
                <br>
                <h2>Generate a
                    <b>unique monkey</b> avatar
                    <br> from a
                    <b>Banano public key</b>
                </h2>
                <img src="https://bananomonkeys.herokuapp.com/image?address=ban_3tapge8i4kw9wa4irgda7epm4gaurr4rnp7ybjziphkt48afd6ba5pnaegs6" />
            </div>
            <div class="col-3">
                <img src="images/hero-right.svg" class="" alt="monkey right">
            </div>
        </div>
    </div>
</section>

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

Retrieving video tag source dimensions using Angular 2

Currently, I am in the process of constructing a video component and finding a way to obtain the dimensions of the source video (either the source file or the container) so that I can pass it to another component. I have incorporated the following code: / ...

javascripthtmlangular

Issue with Bootstrap: Nested column disappears upon reaching the breaking point

I want to create a grid with 3 columns, each containing a nested grid with 2 columns (one smaller than the other). When the breakpoint is reached, I want the columns to stack on top of each other. However, one of the nested columns disappears after the br ...

htmlcssbootstrap-4

The Bootstrap navigation bar is experiencing issues and is not functioning properly, as the classes are not

<nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" d ...

jquerycssbootstrap-4

Hey there, I was wondering if it's possible to modify the color of the navbar when scrolling on a specific page

After the first 3 pages with a black background and a transparent navbar with white navigation items, I encounter visibility issues when scrolling to the colorful 4th page. Is there a way to change the navbar color on this specific page using ONLY HTML a ...

htmlcsscolorsresponsive-designnavbar

Unexpected appearance of blank space to the right of my parallax design

Ever since a forced reboot, my parallax scrolling page has been experiencing issues. A strange whitespace seems to be throwing off the sections, only appearing every other section - one is fine, the next is offset, and so on. I've carefully gone thro ...

htmlcss

Is Flash now irrelevant? What makes HTML5 or CSS3 so powerful?

While I may not consider myself a dedicated Flash Activist, it's hard to ignore the fact that despite its flaws, there are some important uses for it on certain websites. However, with all the buzz around HTML5 and CSS3 being the future of the web, ev ...

flashinternet-explorerhtmladobecss

Tips for overlaying text on the background in Next.js:

I'm currently working on creating an image element with overlay text. Check out my jsx code below: <div className={styles.img}> <img src={src} alt="" /> <p>{`(${size})`}</p> </div> And here is t ...

javascriptcssnode.jsnext.jssass

The Dreamweaver code is visible on the design page but does not appear in the live view on the browser

Experimenting with something and created the top section of the site (Logo and menu). However, when I tried to add a table with text, it doesn't appear in the browser preview even though I can see it in the CODE and DESIGN tabs of Dreamweaver. I susp ...

htmlcss

Is there a way to dynamically adjust the carousel slide indicators based on the changing viewport size?

My carousel is inspired by the one at the following link: I am looking to make a modification where, as the screen size decreases, the bottom links disappear and are replaced with dot indicators for switching between slides. ...

javascripthtmlcss

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...

javascriptjqueryhtmlcss

Determine the necessary adjustment to center the div on the screen and resize it accordingly

Currently, I am in a situation where I must develop a piece of code that will smoothly enlarge a div from nothing to its final dimensions while simultaneously moving it down from the top of the screen. Each time this action is triggered, the final size of ...

javascriptmathhtmlzoomingslide

Unable to alphabetically arrange buttons automatically

I am encountering a challenge with automatically sorting buttons alphabetically on my webpage. I am unable to determine the method for sorting these buttons using jquery or javascript, but my goal is to have them sorted automatically when the page loads. I ...

javascriptjqueryhtmlbutton

Mastering intricate CSS customization

The situation I have a specific issue with CSS that I need help with. I am currently working on customizing the user interface of our Zimbra deployment, which uses jetty (a platform I am not very familiar with). I have come across two files that seem to b ...

htmlcssjettyzimbra

"Enhance your website with Ajax code that enables automatic refreshing of a PHP file, keeping its values up-to-date

Before diving in, I want to make it clear that my understanding of ajax is limited. I'm currently working on a small application where I have a load.php file that echoes 3 variables: $loadout[0]; $loadout[1]; $loadout[2]; The PHP file is functioning p ...

javascriptphpjqueryhtmlajax

What is the best way to distinguish between my HTML form submission and my JavaScript form modification process?

I am facing a dilemma with the layout of my form and table on the webpage. The structure is as follows: +-------------------------------------------------+ | FORM | | +------------------------------------------- ...

javascriptphphtmlforms

Issue with displaying drop down menu for selecting number of items per page in BootstrapTable2 pagination

I've implemented BootstrapTable2 with Bootstrap4, and everything seems to be working fine except for one issue - when I try to select the number of items per page, the drop-down menu doesn't appear as expected. Below is the code snippet based on ...

reactjsbootstrap-4react-bootstrapreact-bootstrap-table

Designing personalized visual elements that can be colored using HTML and CSS

https://i.sstatic.net/wILgJ.jpg I have a custom graphic that needs to be filled with three different colors. Each color will fill from 1% to 100%. For example, the blue color should fill from the legs to the head (1-100%), the red color should fill from t ...

csscanvassvgcss-animationscss-shapes

Tips for concealing overlay when the cursor hovers

Can anyone help me with a code issue I'm having? I want to hide an overlay after mouse hover, but currently it remains active until I remove the mouse from the image. Here is the code: .upper {position: absolute; top: 50%; bottom: 0; left: 50%; tra ...

javascriptjqueryhtmlcss

The right column in Bootstrap is covering up the left column

Does anyone know why I am encountering an issue with my bootstrap navigation bar? When I try to have two columns in the navigation bar and resize the viewport, the right column overlaps the left one. This issue seems to be happening when the viewport size ...

htmlcsstwitter-bootstrap

Creating a dynamic step animation with jQuery: A step-by-step guide

Struggling to find resources on how to animate a color wheel using jQuery? Want to create a spiraling effect by gradually revealing colors at 45-degree intervals, like a loading GIF spiral? I need it to cycle through the defined colors in order and then cl ...

javascriptjquerycssjquery-animatecss-transitions