Utilizing Bootstrap Columns for Image Alignment: Struggling to Position an Image in the Center

For my latest project, I used Bootstrap to create a template that adapts well to different device breakpoints. Everything is working smoothly except for the positioning of the arrows on the sides of the image. I want them to be centered halfway down the page on all devices. In this post, I highlighted the columns in yellow for extra emphasis, but they don't need to be equal in size. I've attempted using padding, margins, and other CSS properties, but I can't seem to achieve the desired result. Any suggestions or tips would be greatly appreciated. Thank you in advance!

<style>
body{padding: 0 10px;}

[class*="col-"] {
    padding: 1em 0;
    background-color: rgba(255,204,51,1);
    border: 1px solid rgba(204,204,102,1);
}
.container img {
    max-height:100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

</style>

<head>

<body>
<div class="container">

    <div class="row">
        <div class=" col-lg-2 col-md-2 col-sm-1 col-xs-1">
            <span class="visible-lg"><a href="#"><img src="images/leftArrow.png"></a></span>
            <span class="visible-md"><a href="#"><img src="images/leftArrow.png"></a></span>
            <span class="visible-sm"><a href="#"><img src="images/leftArrow.png"></a></span>
            <span class="visible-xs"><a href="#"><img src="images/leftArrow.png"></a></span>
        </div><!--left arrow-->


        <div class="col-lg-8 col-md-8 col-sm-10 col-xs-10">
            <span class="visible-lg"><img src="images/carton-house.jpg" alt="Fashion" class="img-responsive"></span>
            <span class="visible-md"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span>
            <span class="visible-sm"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span>
            <span class="visible-xs"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span>
        </div><!--Image-->

        <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
            <span class="visible-lg"><a href="#"><img src="images/rightArrow.png"></a></span>
            <span class="visible-md"><a href="#"><img src="images/rightArrow.png"></a></span>
            <span class="visible-sm"><a href="#"><img src="images/rightArrow.png"></a></span>
            <span class="visible-xs"><a href="#"><img src="images/rightArrow.png"></a></span>
        </div><!--right arrow-->
     </div> <!--row-->

</div><!--container-->
htmlcsstwitter-bootstrap

Answer №1

You can achieve the desired result using the CSS below:

.section img {
    max-height:100%;
    display: block;
    position: relative;
    left: 0;
    right: 0;
}

I tested this solution on a similar project and it worked perfectly, so I believe it will work for yours as well.

Answer №2

Make sure to add the 'arrow' class in place of 

<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">

For example: 

<div class="col-lg-2 col-md-2 col-sm-1 col-xs-1 arrow-right">

.row {
  position:relative;
}    

.arrow-left {
  position: absolute;
  top: 50%;
  left: 0;
  height: 50px;
}

.arrow-right {
  position: absolute;
  top: 50%;
  right: 0;
  height: 50px;
}

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

The functionality of the JavaScript click function is limited to a single execution

In my dropdown menu, I have a submit function that triggers whenever any children of the dropdown are clicked. However, I now need to exclude a specific li element from this function because it requires inserting a tracking ID in a popup iFrame. The code ...

javascriptjqueryhtml

Collapse the mobile nav bar upon clicking an item

I'm currently facing a challenge with the navigation bar on my event landing page. The issue is that when I open the navbar in mobile view, it does not collapse back after clicking on an item. Instead, it remains open and covers almost 3/4 of the scre ...

javascripthtmlcssbootstrap-4navbar

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

My Joomla 1.5 site has CK Forms installed and is functioning properly, except for one issue: the tooltip on the captcha is not displaying correctly. It appears in a tiny 1px font size. Even though I have tried debugging using Firebug and confirmed that the ...

javascriptcssfirebugjoomla1.5

CSS: Only one out of three <div>'s has the styles applied in JSFiddle

When working on my project, I encountered an issue while trying to add CSS styles to three <div> structures with unique IDs. Strangely, making small changes to unrelated CSS caused elements to go from being stylized to losing their style. If you com ...

jquerycss

The customer's status cannot be determined

I've encountered an issue with my TypeScript code that includes a simple if-else logic. endDate: String = ''; customerStatus: String; this.endDate = this.sampleData.customerStartDate; if (this.endDate == null) { this.customerStatus = ' ...

htmlangulartypescript

Error: Definition Already Exists

I'm currently debugging a layout and encountering some peculiar errors. The page is being served as DTD XHTML 1.0 Strict. The error message looks like this: ID "OFFICENAME" already defined: div class="office" id="officename" ID "OFFICENAME" origin ...

htmlcss

Automatically change div background image based on window resizing

.step-1-4 { background:url('../images/gadget-4-sprite.png') no-repeat; width:950px; height:70px; margin-left: 15px; } The code above sets the CSS for a div containing a background image. The dimensions of the div match that of the imag ...

htmlcss

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions

I am faced with a challenge involving two child elements of fixed size: <div class="parent"> <div class="static_child"> </div> <div class="static_child"> </div> </div> .parent { border: 1px solid black; dis ...

javascriptandroidhtmlioscss

Having trouble getting my AngularJS directive with a number in the name to function properly

Check out my code snippet: app.directive('3dPlansSlider', function(){ return { controller: 'projectCtrl', restrict: 'E', templateUrl: 'views/3dPlansSlider.html', link: function(scope, element, attr ...

javascripthtmlangularjs

Result of utilizing Bootstrap Radio buttons

Looking at the HTML snippet below, I am trying to display two lines of radio buttons. However, when I click on a radio button in the first line and then proceed to click any radio button in the second line, the result of the radio button in the first line ...

javascripthtmlformsdombootstrap-4

Is there a way to ensure my chat view functions properly without relying on partial views?

I am currently working on integrating a private chat feature using SignalR in my project, and I have encountered an issue while creating a View with accessible model values to pass to the server. Specifically, I have a list of doctors, and when a user clic ...

javascripthtmlcssasp.net-mvcsignalr

Ensuring consistent width for two divs using CSS

https://i.stack.imgur.com/3n8La.png I am currently working on creating a responsive CSS layout for two div elements. The first div will contain the summary, while the second div will hold the detailed description. My challenge is to make sure that the seco ...

css

What is the best way to achieve a smooth rotation effect ranging from 1° to 359° using HTML/CSS in conjunction with JavaScript

Currently, I am retrieving rotation data from a sensor and transmitting it to a webpage containing a 2D-Model that rotates based on this data. To ensure a smoother motion, I have incorporated a CSS transition. However, an issue arises when the rotation da ...

javascripthtmlcsstransition

The parent div will not accommodate two nested divs

I'm having an issue with two divs inside a parent div not being contained within the container when I inspect the page, even though I've wrapped the div around the other 2 divs. My goal is to apply attributes to the parent div instead of each in ...

htmlcss

Animate photos with identical class names individually using CSS

Check out this snippet: <img class='img-logo' src={logo} alt="Logo" /> <img class='img-logo' src={logo} alt="Logo" /> <img class='img-logo' src={logo} alt="Logo" /> <img class ...

htmlcss

Using CSS or JavaScript to trigger events while scrolling with touch

Imagine a scenario where multiple boxes are stacked on top of each other: <div style="width: 100%; height: 100px; background-color: red"> stuff </div> By clicking or touching them, the background color can be easily changed using CSS (:hover, ...

javascriptjqueryhtmlcssevents

Trouble with scrolling horizontally on the website

After completing the coding for this website with bootstrap, I encountered an unexpected issue with a horizontal scroll appearing. This is my first project using bootstrap. I attempted to troubleshoot by using the 'divide et impera' method - rem ...

htmlcsstwitter-bootstraphorizontal-scrolling

Angular: NaNa: Attempting to access a property of an undefined variable

I've encountered these errors although the values are displayed correctly in the browser. I'm unsure about how to resolve this issue. ERROR TypeError: Cannot read property 'length' of undefined ERROR TypeError: Cannot read property &ap ...

javascripthtmlangular

The utilization of bootstrap can lead to CSS interruptions

I am trying to create a navigation button that transforms from 3 horizontal lines to an X shape when clicked. var anchor = document.querySelectorAll('button'); [].forEach.call(anchor, function(anchor) { var open = false; an ...

htmlcsstwitter-bootstraptransition

Using jQuery to establish a canvas element and define its dimensions by adjusting its width and height attributes

My attempt at using jQuery to create a canvas element was not quite as expected. Here is the code I tried: var newCanvas = $('<canvas/>',{'width':100,'height':200,'class':'radHuh'}); $(body).append(n ...

javascriptjquerycanvashtml