Having trouble with Bootstrap 4: I want to rotate an image, but every time I try, it ends up overwriting the CSS properties

I am currently working on a website using bootstrap 4, and I'm facing an issue with the image I selected. It seems to rotate to the right and is not displaying correctly.

click here for image preview

The main problem lies in rotating the image without affecting other CSS properties.

In this particular case, the image has the class "img-fluid".

<div class="row">
            <div class="col-lg-4">
    <!-- STYLE SECTION

      <style type="text/css">

      img { transform: rotate(270deg); }

    </style>
  -->
                <img class="img-fluid" alt="Bootstrap Image Preview" src="C:\Additional Folders\Harvard CS50\Project 0\project0\layoutit\src\larger pic.jpg">
            </div>
            <div class="col-lg-8">

As seen above, I managed to rotate the image using a style tag within the HTML code, but this caused the image to overlap into other divs and did not produce the desired result.

Furthermore, Bootstrap 4 includes multiple CSS files, raising concerns about whether my modifications will be overridden later on.

For reference: click here for another image example

I suspect that the issue with the image rendering incorrectly could be due to its rectangular shape and width properties, causing it to appear too narrow or stretched out.

If anyone has experience dealing with this issue, your assistance would be greatly appreciated.

Thank you!

htmlcssbootstrap-4rotationtransform

Answer â„–1

When you want to prevent an image from overflowing into other divs when rotated, you can hide the excess parts of the image using this method:

<div class="col-lg-4 img-container" style="overflow: hidden; height: "to fit on the screen"; width: "to fit on the screen">

CSS:

.img-container{
  height: "adjust as needed";
  width: "adjust as needed";
  overflow: "hidden";
};

By implementing this solution, some parts of the image may not be visible. You can resize the image to ensure it fits on the screen properly. Additionally, if you prefer not to manually rotate the image using CSS, there are tools available to edit the image before uploading it, such as: .

If you wish to avoid altering Bootstrap's default properties, consider assigning custom class names to the elements you modify. This way, your changes won't impact the core Bootstrap styles.

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

Disable Chrome's suggestions bar on your Android phone

I'm having trouble disabling spelling suggestions for an input box and everything I've tried so far hasn't worked. I've already used attributes like autocomplete="off", autocapitalize="off", and spellcheck="off" for the input field, bu ...

javascriptandroidhtmlcssgoogle-chrome

To insert a <div> element within a <tr> element while preserving the exact position of the <tr> tag - here's how you can do it:

I have a challenge with my table where I need to add a green progress bar in the form of a div element within a tr. The width of this progress bar should change dynamically from 0% to 100%, reflecting the current runtime of the video associated with that p ...

javascriptjqueryhtmlcss

What is the smoothest way to animate price changes as you scroll?

After searching online, I could only find a version for swift. The only keyword that resulted in a search was ScrollCounter. Is it possible to create this type of animation using CSS and HTML? If anyone knows of a helpful resource or example, please share ...

htmlcsscss-animations

Adjust the minimum height and width when resizing the window

Apologies in advance if this has already been addressed, but I have tried solutions from other sources without success. My Objective: I aim to set the minimum height and width of a div based on the current dimensions of the document. This should trigger ...

javascriptjqueryhtmlcss

Scrollable Tailwind components

I am working on creating a page layout similar to this design: here is what I want to achieve The goal is to have a simple homepage with a navbar and split screen. The challenge is to prevent the entire page from scrolling normally and enable independent ...

htmlcsstailwind-css

Revamp the current webpage to display attribute values in textual format

As I peruse a webpage, I notice that there is room for improvement in terms of user-friendliness. The page is filled with a list of movie titles, each accompanied by a link to IMDb. However, the IMDB user rating is only visible when hovering over the titl ...

javascripthtmlcssattributesstylebot

Ensure that the placeholder remains visible as you type in the input field

Is there a way to implement an input text field in React with the placeholder "DD-MM-YYYY," that partially disappears as I start typing? For example, when I type "02-," only "-MM-YYYY" should remain visible as part of the placeholder. ...

javascripthtmlcssreactjsmaterial-ui

How can you use JavaScript to create hyperlinks for every occurrence of $WORD in a text without altering the original content?

I've hit a bit of a roadblock. I'm currently working with StockTwits data and their API requires linking 'cashtags' (similar to hashtags but using $ instead of #). The input data I have is This is my amazing message with a stock $sym ...

javascripthtmlreactjs

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Wondering how to accomplish this: I've designed an HTML5 homepage and I'm looking to display a message to visitors, such as "Dear visitor, I am currently on vacation from....", in the form of a memo or sticky note positioned in the top right cor ...

javascriptjquerycsshtml

Flexbox Alignment Problem with Mixed Text and Image Elements

Struggling to achieve a layout like the one in this image using Flexbox. Take a look: https://i.sstatic.net/EGsAN.png After some difficulty with floats, I've decided to experiment with flexbox. My CSS is set up to display the image correctly. The ...

htmlcss

Spacing between cards using Bootstrap

I have a collection of cards styled with Bootstrap and I am looking to add a left margin. I want the cards to be evenly spaced across the width. Right now, there is excess red on the right side that I want to remove... .azer { background: red; } .car ...

htmlcssbootstrap-5

Swipe horizontally on mobile devices with text scrolling

I stumbled upon a workaround online that effectively allows for horizontal scrolling on mobile devices. <div style="max-width: 1024px; margin: auto; "> <ul style="white-space: nowrap; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-sc ...

htmlcssmobilewebkit

I'm experiencing difficulty positioning my iframe within its section container as it appears to be placed outside of it

I'm struggling to understand why my iframe is positioned outside of the designated section. Check out my GitHub Pages site here and view the repository here. Any assistance would be greatly appreciated! https://i.sstatic.net/eNen2.png ...

htmlcssbootstrap-5

Is there a way to convert the existing JavaScript code for a hyperlink so that it can be triggered by clicking a button instead?

I have a JavaScript code that works well when the hyperlink below is clicked: <a href="delete_event.php?event_id=110" onClick="return ConfirmDelete()" class="list-group-item">Delete Event</a> <script> function ConfirmDelete() { var ans ...

javascriptjqueryhtmlbuttonhyperlink

I am looking to switch from a hamburger menu to a cross icon when clicked

Hey there, I'm currently working on a Shopify website and trying to make the hamburger menu change to a cross when clicked. I've been experimenting with different methods, but unfortunately haven't had any success so far. I have two images â ...

javascriptjavajquerycss

Having trouble importing the name 'RadioChoiceInput' from the 'django.forms.widgets' module during the migration from Django 1.19 to 3.2

Currently, I am facing an issue while upgrading a Django widget.py file from version 1.19 to version 3.2. The error message I encountered is: from django.forms.widgets import RadioSelect, RadioChoiceInput ImportError: cannot import name 'RadioChoiceI ...

pythonhtmldjango

I am experiencing difficulty with the color of my progress bar in Firefox

After successfully creating an interactive progress bar that works perfectly in Google Chrome and surprisingly also in Safari without vendor prefixes, I encountered a roadblock when testing it on Firefox. The progress bar color reverts back to the default ...

javascriptcsshtmlfirefox

What is the most efficient way to implement OR conditions in JavaScript for shorter code

Hello there! I have a question about optimizing conditions in code. Is there a more elegant way to write the following conditions? state === 'su' || state === 'ja' || state === 'fa' I was thinking if it could be simplified ...

javascripthtmlsyntax

Is there a way to bypass cells within an html table?

Creating an online board game and looking to have the cells go around the board. Wondering if anyone knows a way to skip the cells in the middle? Attempted using   but it doesn't seem to be effective. Here is a snippet of the code: #board { ...

htmlcsshtml-table

Automated resizing for various monitor dimensions in HTML

Is there a way to dynamically adjust the zoom level on an HTML webpage based on the monitor size? For instance, an image that appears large on a laptop screen may look small on a PC monitor. Is there a solution available to scale the picture size as the mo ...

javascripthtmlzooming