Guide to positioning a singular image at the center of a page with Bootstrap 4

This seems like a simple task, but despite my efforts, I have yet to come across a solution.

The issue is straightforward - I have a single image that I want to display in the center of the page. That's it.

Below is the CSS code that successfully achieves this:

.centered {
      position: fixed;
      top: 50%;
      left: 50%;
      /* add necessary prefixes */
      transform: translate(-50%, -50%);
    }


In my HTML code, all I need is this:
<div class="centered">
     <img src="https://via.placeholder.com/100">
</div>

Despite my search effort, I have been unable to find a method using Bootstrap 4 to achieve this. Can anyone provide assistance?

htmlcssbootstrap-4

Answer №1

Check it out, just apply the 4 classes provided by Bootstrap 4.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="d-flex justify-content-center align-items-center vh-100">
     <img src="https://via.placeholder.com/100">
</div>

Answer №2

Here is the code snippet you can use:

html, body {height:100%}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="d-flex h-100 align-items-center">
  <img class=" m-auto" src="smiling_face_emoji.png">
</div>

Answer №3

Using Bootstrap's h-100 property can easily set the height of your container and row to 100%. No additional CSS is needed, as Bootstrap4 provides all the necessary classes for this functionality.

Here is an example of the HTML code:


<div class="container h-100">
    <div class="row h-100 justify-content-center align-items-center">
        <img src="happy_face.png">
    </div>
</div>

Answer №4

Check it out below:

body{
height:100%;
width:100%;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    <div class="centered">
         <img src="https://via.placeholder.com/100">
    </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

Navigation through dots on a single page

Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for : For larger windows : https://i.sstatic.net/pK4 ...

javascriptjqueryhtmlcssnavigation

Struggling to make bootstraps' responsiveness function properly

I've been struggling to achieve responsiveness on a webpage I'm working on, but despite trying different approaches including wrapping the table as suggested in another forum post, I still can't get it to work. Could someone please help me i ...

htmlcssbootstrap-4

Struggle between Internet Explorer 8 and its border and margin problems

Having a trouble with styling on our company's intranet specifically in IE8 or lower. The border and padding are showing up despite using border:none;, margin:0!important;, and padding:0!important;. This is causing the content to shift to the right an ...

htmlcssiframeinternet-explorer-8

Maintaining the Syntax when Copying HTML to a Text Area

In my project, I rely on markdown for text editing. The markdown is converted to HTML and then stored in the database for display in the view. When users want to edit a post, the stored text is retrieved from the database and used as the initial value in ...

javascripthtmlangulartextarea

Encountered an error in Angular1: TypeError - promise.catch does not exist as a

Upon using angular-ui-router, I encountered the following error while clicking on the links view1 and view2 in index.html. The same example worked with the regular angular router. Is there something missing in the code? Thanks. TypeError: promise.catch i ...

htmlcssangularjsangular-ui-router

Incorporate External Web Page Information by Clicking a Button

Apologies if this question has already been asked, but despite my efforts to explore the available resources, I have not found a solution to my issue. I currently have an input field where users can enter their website, keyword, or industry. When they cli ...

javascriptjqueryhtmliframe

An issue has been identified where the checked selection feature is not functioning correctly for CSS selections

Is there a way to change the border color of a label when a checkbox is checked using CSS selectors? Here's an example of what I have tried: label{ width:36px; height:36px; padding:9px; border:1px solid gray; border-radius:36px; } #check ...

htmlcss

Despite implementing the necessary middleware, the CSS file still refuses to load

My CSS files are not loading properly. When I inspect the element (F12) and go to Networks, my CSS file is not visible. I have added the middleware: app.use(express.static(path.join(__dirname, '/public'))); and required the path above it. I ha ...

cssnode.jsexpressejsmiddleware

Are there any plugins available that can create a Ken Burns effect using JQuery?

All I need is a straightforward plugin, not one for creating slideshows. In this case, I only have 1 div and 1 image. The goal is to have the image animate within the div, shifting left/right or up/down without any white space visible. The size of the ima ...

javascriptjquerycssimagetemplates

Adding list items to an unordered list without making them draggable using jQuery

How can I allow users to build a list of sports and drag them into a "cart" using jQuery? The issue I'm facing is that the appended list items are not draggable, and I'm unsure of how to solve this problem. /* JS code for sports.html */ $(fu ...

javascriptjqueryhtmljquery-ui-draggable

Position the navbar toggle button on the right side

I am currently experimenting with Bootstrap 4, particularly the navbar menu feature. Is it possible to align the small navbar toggle button to the right of the page instead of having it float to the left next to the logo? https://i.sstatic.net/UfKl2.png ...

htmlcsstwitter-bootstrapnavbarbootstrap-4

Tips for effectively redirecting multiple links on a website

Can anyone advise me on how to redirect certain HTML pages to corresponding PHP pages? For instance, if a user lands on www.example.com/sample.html from another website, I want them to automatically be redirected to www.example.com/sample.php without seei ...

phphtmlhttp-redirect

Achieving a 100% width input with Flexbox: Tips and tricks for success

Check out this flexbox form I created using bootstrap 4: https://jsfiddle.net/kkt0k2bs/1/ I have implemented a media query to adjust the form elements for smaller screens. For larger displays, I want the form items to be displayed inline. However, on sm ...

twitter-bootstrapcssflexboxtwitter-bootstrap-4

Is there a way to display an image onto a bootstrap carousel using PHP?

I have been attempting to dynamically update the images within a bootstrap carousel based on the image URL stored in a MySQL database. I successfully displayed the first image ($value1) using a foreach loop, but encountered issues with displaying subsequen ...

phpmysqlbootstrap-4

Add a new string to a class within a Vue.js component

Hey there, currently working on a Vue component where I am iterating through a list of countries. Here's how it looks: <div v-for="i in countries" :key="i.id"> {{i.name}} <span class="flag-icon-gr"></span> I want to dynamically ...

cssvue.jsnuxt.js

Using jQuery to animate a DIV sliding in from the side

When a user scrolls down (x) pixels, I'm smoothly sliding a DIV into the viewport horizontally. If the user scrolls back up, the DIV scrolls out again. However, the sliding motion appears jerky and pauses at certain moments. <div id="doom_o">&l ...

javascriptjquerycss

HTML/CSS: Maintain Hover-Over Pop Up Boxes in Position Until Another Element is Hovered Over

Seeking HTML code to maintain a hover-over pop-up box in position on an image map until another section of the image map is hovered over. For example, refer to my code below - when hovering over a country on the map, a pop-up box with information about a ...

htmlcss

PHP - Dynamically populating form questions based on user input

Currently, I am in the process of developing a fuel calculator form that utilizes PHP and HTML. The form is taking shape nicely, but there is one particular aspect that has me stuck. I want to incorporate a fuel perks feature that requires user input. Spe ...

phphtmlformsuser-input

Update the text on the form submit button after it has been submitted

Is there a way to change the text on a submit button after it has been clicked? I have a form with a button and I want to switch the text from "click" to "Next" once the form has been submitted. <form> <div class="form-grou ...

javascriptjqueryhtmlbuttontext

The pure css overlay does not display correctly on Chrome

Could you take a look at the link provided below (just widen the result window a bit) and let me know why there are white lines on top and on the sides of the boxes when the hover overlay is fully loaded? Even when I use a background image for those divs, ...

cssgoogle-chromehoveroverlayopacity