Align an Image Vertically Using Bootstrap's Grid System

Hey there! I've been trying to center an image within a "div" tag using Bootstrap, but despite my best efforts and reading through various resources, I haven't been able to crack it.

* {
    margin: 0;
    padding: 0;
}

.people-one {

    width: 100%;
    height: 100%;
}

body {
    background-color: #b2b2b2;

}

.paddimages {
    padding: 0;
}
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="login.css"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"></head><body>
    <div class="container-fluid>
        <div class="row>
            <div class="col-4 position-relative>
                <div class="position-absolute top-50 start-50 translate-middle>
                    <img class="people-one" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=384&w=480" alt="">
                </div>
            </div>
            <div class="col-8">
                <p>Text</p>
            </div>
        </div>

Appreciate any help you can offer. Thank you!

htmlcssalignmentbootstrap-5

Answer №1

Eliminate the position classes from the image and simply include align-items-center in the .row

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="login.css">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1c3ceced5d2d5d3c0d1e1948f938f918cc3c4d5c090">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eaeaf1f6f1f7e4f5a8ece6eaebf6c5b4abbdabb6">[email protected]</a>/font/bootstrap-icons.css">
</head>

<body class="bg-light">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-4">
                  <img class="img-fluid" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=384&w=480" alt="">
            </div>
            <div class="col-8">
                <p>Parturient platea commodo in orci adipiscing natoque convallis placerat neque condimentum a eu massa parturient lectus vestibulum. Condimentum a dictumst per himenaeos netus porta dictumst scelerisque non suspendisse suspendisse condimentum ullamcorper tristique facilisi vitae in lacinia eros sed feugiat integer a nec litora lobortis. Parturient vehicula adipiscing varius vestibulum consectetur dignissim id ullamcorper senectus torquent auctor etiam ipsum mi conubia. Class vestibulum natoque cursus dictumst euismod mi inceptos adipiscing odio adipiscing parturient scelerisque arcu eu proin a.</p>
                <p>Porttitor habitasse mus justo mus adipiscing imperdiet vivamus maecenas senectus nascetur porta at lacus vestibulum quam a condimentum egestas massa a netus nunc. Nibh mi id a parturient egestas nec non cubilia eu imperdiet parturient ligula a montes vestibulum aliquam nascetur a non. Nascetur phasellus ut ut placerat parturient lobortis sem elit sociis maecenas consectetur habitant vestibulum neque vel scelerisque lobortis ipsum erat cum et magnis vestibulum a iaculis mus a. Blandit ultricies nibh rutrum libero urna nostra lacus purus massa vehicula laoreet fringilla nascetur neque id.</p>
            </div>
        </div>

    </div>

 

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0e6c61617a7d7a7c6f7e4e3b203c203e236c6b7a6f3f">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous">
    </script>
</body>

</html>

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

Customized figcaption formatting separate from the surrounding text

Is there a way to add a "figcaption" with independent settings to images placed alongside paragraphs in HTML? I have the following code snippet, but I'm unsure if I am using the figcaption tag correctly: <p><figure><span class="image ...

htmlcss

Struggling to keep navbar fixed with a blur effect without it colliding with body content as you scroll?

I'm looking to create a sticky navbar with a blur effect similar to the one seen on (try scrolling to see the blur effect on the nav). I want it to have the following structure: My HTML code is as follows: <header class="sticky z-10 top-10"> ...

htmlcsstailwind-css

In a two-column layout, ensure that the text in the left box is aligned to the left and the text in the right box is aligned to the

I'm working on a flexbox layout with two columns, each containing text. The text in the left column is aligned to the left, while the text in the right column is aligned to the right. However, I want the text in the right column to switch to left al ...

htmlcssflexbox

Determining User Login Status in Laravel using jQuery

While I am familiar with the authentication verification in laravel, I am interested in learning how to verify it using jQuery. Specifically, I want to make changes to my CSS when a user is logged in. By default: body{ background: url('image.jpg ...

javascriptjquerycsslaravel

I am encountering unexpected issues with the Bootstrap Navbar Dropdown in my Blazor project

My Blazor project initially loads at https://localhost:5003/. I have six pages tagged with @page. One of them is Reader.razor, where I have implemented a Bootstrap NavBar with Dropdown functionality. @page "/reader" <div class="container ...

blazorblazor-server-sidebootstrap-5

Issue with bootstrap: When multiple svg tags are added to my navbar, it causes the container content to be deleted

Utilizing the Jumbotron Example from Bootstrap Examples has led to a peculiar issue when adding multiple icons to the navbar. After inserting anything following the first icon, a significant portion of the "container" class mysteriously disappears, as if i ...

htmlcsssvgbootstrap-4icons

If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div. <div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;"> ...

c#htmlcssasp.netimage

What is the best way to ensure that multiple bootstrap buttons in a row have the same width?

Could you help me figure out how to make the <div id="full"> element take up the full width of its parent container, while also ensuring that the 3 buttons inside share this width and have equal sizes with gaps between them? https://i.stac ...

htmlcssbootstrap-5

Ways to position an element at the center using Flexbox技

Having some difficulty centering an element in my code using flexbox. It seems to work for everything else, but not here. Any suggestions or ideas? .answer { text-shadow: 0 0 2px gr; display: flex; justify-content: center; border-radius: 5px; ...

htmlcssflexbox

Encase every picture within a div and add a numerical label in front of it

I'm working on a function that will wrap each image in a div and add a span label for each image. Here is the code I have written so far: $('#carousel img').each(function(index) { $(this).wrap('<div class="image"></div>& ...

jqueryhtmlimage

Ensure that adjacent elements operate independently from one another

The code snippet provided above showcases four components: StyledBreadcrumbs, FilterStatusCode, Filter, LinkedTable. The FilterStatusCode component enables users to input search data using TagInput. If the user inputs numerous tags, this component expands ...

javascriptcssreactjsmaterial-ui

I'm looking for the best way to display an error message in HTML using a custom validation directive that I'm creating

<!DOCTYPE html> <html><!--starting of html--> <script src="angular.js"></script> <body ng-app="myApp"> <p>Feel free to type in the input field:</p> <form name="myForm"> <input name="myInput" type=" ...

htmlangularjsnode.js

Validating radio buttons in Ionic framework

I am currently working on implementing a form in my application using Ionic and AngularJS. I have added validation to all the fields, but I am facing an issue with the radio button validation. The error message is being displayed correctly when no radio bu ...

htmlangularjsvalidationionic-framework

Learn the best practices for incorporating jQuery and other JavaScript libraries in your Angular2 projects

Is it possible to integrate a demo showcasing Bootstrap carousel with CSS3 animations in Angular2 using HTML, CSS, and JS? I have created my own implementation in Plunker with Angular2, but I am facing issues with the animated inner content of the carousel ...

javascripthtmlcssanimationangular

Button for toggling the mobile navbar in Bootstrap

Is there a way to adjust the position of the navbar-toggle button http://prntscr.com/5sldgb within the navbar after changing its height? Here is the HTML code: <div class="navbar navbar-default"> <div class="container"> ...

htmlcsstwitter-bootstrapmobilenavbar

Using AngularJS to update attributes in an HTML tag within a string

My string contains HTML tags : var str = "<div><p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src='urlAAA' height='400' width=&ap ...

javascripthtmlangularjs

Executing a function a specific number of times in Jquery

I have a query regarding JQuery related to randomly placing divs on a webpage. The issue I'm facing is that it currently does this indefinitely. Is there a way to make it run for a specific duration and then stop? $(document).ready(function () { ...

javascriptjquerycss

Is there a way to create a duplicate form without any pre-filled text when clicking the "next" button using JavaScript?

This form contains the details that I would like to display on the page again when clicking the "Add Another Module" button. <div> <form class="in-line" id="module_info"></form> <div style="display: flex;"> < ...

javascripthtml

The issue of PHP timing out occurring within a public function

After pulling a "large" SQL query from the database with 50,000 records and completing it in about 5 seconds, I run it through a function to create an HTML table. However, the process keeps timing out for some reason. If I limit the query to less than 30k ...

phphtmlfunction

To determine the class of an element and reveal its parent if the class is present

Typically, the parent element remains hidden by default. However, upon clicking a specific element, its child might gain a class called "selected". How can I check for this class and then display the entire list if it is present? <ul style="display: ...

jquerycss