Mastering the art of utilizing icons in HTML/CSS within Bootstrap

We are in the process of creating a web application using Bootstrap Studio for the frontend. One issue we are facing is that when the window is resized, the icons start overlapping each other. Is there a way to make one icon go under the other?

https://i.sstatic.net/MyfjS.gif

Below is the code and CSS with some logos:

.hibernateLogo,
.sslLogo {
  top: 60%;
  position: absolute
}

.hibernateLogo {
  left: 27%
}

.sslLogo {
  left: 83%
}

.pgLogo {
  position: absolute;
  top: 62%;
  left: 66%
}
<div class="login-dark" style="background-image: url(" assets/img/tlo2.jpg ");margin-right:0px;height:1200px;">
  <img class="logo" style="width: 300px; background-position: center; height: 100px;" src="assets/img/Logo VLEX remake trans.png">
  <div class="container">
    <img class="bootstrapLogo" style="width: 255px;" src="assets/img/tech-bootstrap.png"> <img class="springLogo" style="width: 195px; height: 117px;" src="assets/img/1496434852936.png"> <img class="sslLogo" style="width: 172px;" src="assets/img/ssl-encryption-icon-png-6.png">
    <img class="pgLogo" style="width: 235px;" src="assets/img/pg.png">
    <img class="hibernateLogo" style="width: 266px; height: 82px;" src="assets/img/Hibernate_logo_a.png"> <img class="javaLogo" style="width: 130px;" src="assets/img/Java_logo_icon.png">
  </div>
  <form method="post">
</div>

htmlcsstwitter-bootstrapbootstrap-studio

Answer №1

Great news! The issue with having position:absolute; on all icons has been resolved. I created a container with position:absolute; top:80%; and now everything is functioning properly.

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

Having difficulty maintaining the consistent size of the MathJax math font in relation to the surrounding text

Issue I am currently using MathJax to display mathematical equations on my webpage: https://i.sstatic.net/EfvVq.png The problem I am facing is that I want the math font to appear larger than the surrounding text, as depicted in the image above. However, ...

javascripthtmlcssfontsmathjax

Creating customized JQuery UI tabs to perfectly accommodate the available horizontal space

Can JQuery UI Tabs be modified to fill the horizontal space and stack to the left? In order to achieve this, could we consider using a markup like the one below: <table width="100%"> <tr> <td> ...content... </td> ...

cssjquery-ui

To enhance user experience, it is recommended to reload the page once

Hello, I'm looking for a way to automatically refresh the page after submitting an AJAX form. Currently, I have an onClick function that seems to refresh the page, but I still need to press F5 to see the changes I've made. Here's the JavaSc ...

phpjavascriptjqueryhtml

No action is triggered when the button is hovered over

I've implemented these hover effects but for some reason, they are not working as expected. I'm struggling to understand why this is happening. The primary button at the bottom is also experiencing the same issue. body { background-color: #aa ...

htmlcsshover

The utilization of the <span> tag featuring a {float:right] property causes container expansion in Internet Explorer 7

Within my HTML code, I have an A tag button that contains a Span element to hold icons. This setup functions correctly in most browsers, except for IE7. When I attempt to float the Span to the right side using CSS, it causes issues specifically in IE7, cau ...

htmlcsscss-float

Conceal Bootstrap 3 tooltip

There's a tooltip attached to a button within a bootstrap dropdown. Whenever I click that button, the original button is hidden and another button is displayed. However, the tooltip from the previous button remains visible until I scroll vertically or ...

htmltwitter-bootstrap-3tooltip

Leveraging the power of HTML5's details element for optimized printing

The <details> HTML5 element is used to provide a simple show/hide functionality. While this feature works well on-screen, it poses an issue when printing as any closed <details> elements disappear in the printed version. I attempted to fix th ...

cssprinting

Exporting headers of an HTML table using Jquery to Excel is not functioning properly

I need assistance with exporting an HTML Table that is dynamically generated based on the data. The table layout is defined before the data is populated, and once the data is queried, rows are added to the table dynamically. <table id="findCntrctTable" ...

jqueryhtmlexcel

Position the Bootstrip 4 tooltip to automatically display on the right side

In order to customize the placement of my tooltip on desktop, I have opted for having it positioned on the right side of the elements. While this choice aligns well with my design preferences, it has presented a challenge when viewing the page on smaller s ...

javascripthtmljquerybootstrap-4popper.js

Leveraging ng-switch with ng-repeat in AngularJS to dynamically apply HTML based on conditions

I have a paginated list of video thumbnails that I want to showcase in a Bootstrap fluid grid. To achieve this, I am utilizing a nested ng-repeat loop to iterate through each list for pagination purposes. Within the inner loop, another ng-repeat is used to ...

javascripttwitter-bootstrapangularjs

Delay the closure of a window by utilizing a straightforward method when selecting the "X - CLOSE" option with the following code: `<a href="javascript:window.open('', '_self').close();">X - CLOSE</a>`

I need to implement a delay when users click on the link to close a window. The purpose of this delay is to allow time for playing random "signoff" audio files, such as "Thanks!" or "See you next time!". Currently, without the delay, the audio stops abrupt ...

javascriptjqueryhtml

Button-controlled automated presentation

I have devised a method to create an automatic slideshow using JavaScript. However, I am looking to incorporate manual control buttons as well. After adding manual control code, the slideshow seems to be malfunctioning. The provided code below is used for ...

javascripthtmlcssslideshow

A PHP string containing hashtags without spaces will not be parsed into individual hashtags

I have a challenge where I want to extract individual hashtags from a string that contains hashtags. Currently, I am utilizing the following code: preg_match_all('/#([^\s]+)/', $str, $matches); #test #test #test #example The code functio ...

phphtmlstringhashtag

Update the content of an image in a Div without altering its filename

My application's backend updates an image file and sends the filename back to the front-end: $('#giffinal').html(ResponseGo); However, when I update the image again through the backend, the code in the div on the front-end does not change. ...

javascriptjqueryhtml

How to position button components at the center in a NextJS application?

Incorporating a button within my nextjs page has been a challenge as I am striving to position it in the center of the page for optimal viewing on both PCs and mobile devices. Despite various attempts, the button remains fixed on the far left side of the p ...

javascripthtmlcssreactjsnext.js

Is there a sweet syntax for CSS variables available?

What about using this instead: :root { --primary-color: gray; --secondary-color: lightgray; } var(--pc) Is there a more concise syntax available, perhaps shorter than var(--pc)? ...

csscss-variables

What are the steps to interact with a marquee using Selenium?

Currently, I am faced with an application that displays a list of upcoming vessels in a marquee format. I am looking for a way to click on the specific data using Selenium with Java. Any advice or alternative solutions would be greatly appreciated. ...

javahtmlseleniumclickmarquee

Exclusive Pages in NextJS for Development Purposes

I want to set up a /storybook page specifically for development purposes. However, I do not want this page to be accessible in production mode. How can we make that happen? ...

htmlnext.jshidden

Divide HTML content while keeping inner tags intact

Currently, I am developing an online store. In my code, there is a requirement to display attributes and descriptions for multiple products on a single page. The attributes are displayed in a table format, while the description can include simple text as w ...

phphtmlsplithtml-encode

input access is granted through the post method using an integer as the name parameter

Suppose there is a dynamic form with multiple fields generated with integer names based on the iteration that creates them. The goal is to retrieve their values using either post or get method (though focusing on post here). Below is the code for generati ...

phphtmlpostinput