Arrow in addition to the bootstrap container

Question

Arrow in addition to the bootstrap container

I am working with a bootstrap container that is centered on the page with margins on both sides. What I want to do is add two arrows, one on each side of the container, pointing left and right.

The reason for this is because I am trying to create a carousel-like effect but with different pages. Clicking on the right arrow should display the content of the next page, while clicking on the left arrow should take me back to the previous page.

This is the current setup:

<!DOCTYPE html>
<html>
<head>
    <title>Drag and Drop Upload</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <link rel="stylesheet" href="css/dropzone.css" type="text/css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/dropzone.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container fill">
    <form action="upload.php" class="dropzone needsclick dz-clickable full-height">
        <div class="dz-message"><b> </b></div>
    </form>
</div>
</body>
</html>

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

To achieve a global design like Bootstrap does with arrows in the carousel, you can create parent containers on each side of the page fixed to the top and set their height to match the screen's height (easily done with jQuery).

<body>
   <div class="parentofarrow left"><div class="parrentofarrow__arrow left"></div></div>
   <div class="parentofarrow right"><div class="parrentofarrow__arrow right"></div></div>
   <div class="container"></div>
</body>

You could also have another parent for all of them to create a different structure or layout. In this case, change the position from fixed to absolute.

Here's how you can style it in CSS:

.parentofarrow { 
   position: fixed; // or absolute if within a specific parent (relative)
   top: 0px;
   // Set the height dynamically using jQuery
   width: // adjust as needed;
   text-align: center; // or use margin auto for arrow positioning
}
.parentofarrow.left { left: 0px; }
.parentofarrow.right { right: 0px; }
.parentofarrow__arrow { // customize and position as desired }

Within these parent elements, align the arrows vertically and horizontally, and add actions to change the content of the page as required.

This setup should be sufficient for your needs!

Keep in mind that while this solution may not be the simplest, it offers flexibility in terms of customization (adjusting height, parent elements, position, etc.).

Answer 2

To achieve a global design like Bootstrap does with arrows in the carousel, you can create parent containers on each side of the page fixed to the top and set their height to match the screen's height (easily done with jQuery).

<body>
   <div class="parentofarrow left"><div class="parrentofarrow__arrow left"></div></div>
   <div class="parentofarrow right"><div class="parrentofarrow__arrow right"></div></div>
   <div class="container"></div>
</body>

You could also have another parent for all of them to create a different structure or layout. In this case, change the position from fixed to absolute.

Here's how you can style it in CSS:

.parentofarrow { 
   position: fixed; // or absolute if within a specific parent (relative)
   top: 0px;
   // Set the height dynamically using jQuery
   width: // adjust as needed;
   text-align: center; // or use margin auto for arrow positioning
}
.parentofarrow.left { left: 0px; }
.parentofarrow.right { right: 0px; }
.parentofarrow__arrow { // customize and position as desired }

Within these parent elements, align the arrows vertically and horizontally, and add actions to change the content of the page as required.

This setup should be sufficient for your needs!

Keep in mind that while this solution may not be the simplest, it offers flexibility in terms of customization (adjusting height, parent elements, position, etc.).

Answer 3

Answer №2

To achieve a desired result without considering the element's position, one simple approach is to utilize negative margins. You can see an example of this in action on this demo.

Here is how you can implement it:

<div id="arrow">&larr;</div>

With the following CSS styles:

#arrow {
 margin-left: -100px;  
}

Alternatively, another effective technique is using position: absolute:

#container {
  position: relative;
}

#left-arrow {
 position: absolute;
 top: 40%;
 bottom: 40%;
 height: 10%;
 line-height: 100%;
 left: -5%;
}

Answer 4

To achieve a desired result without considering the element's position, one simple approach is to utilize negative margins. You can see an example of this in action on this demo.

Here is how you can implement it:

<div id="arrow">&larr;</div>

With the following CSS styles:

#arrow {
 margin-left: -100px;  
}

Alternatively, another effective technique is using position: absolute:

#container {
  position: relative;
}

#left-arrow {
 position: absolute;
 top: 40%;
 bottom: 40%;
 height: 10%;
 line-height: 100%;
 left: -5%;
}

Answer 5

Answer №3

To make things simple, you can utilize the grid system.

<div class="container fill">
    <div class="row">
        <div class="col-xs-1">Left</div>
        <div class="col-xs-10 main-stage">
            <form action="upload.php" class="dropzone needsclick dz-clickable full-height">
                <div class="dz-message"><b> </b></div>
            </form>
        </div>
        <div class="col-xs-1">Right</div>
     </div>
</div>
</body>

Answer 6

To make things simple, you can utilize the grid system.

<div class="container fill">
    <div class="row">
        <div class="col-xs-1">Left</div>
        <div class="col-xs-10 main-stage">
            <form action="upload.php" class="dropzone needsclick dz-clickable full-height">
                <div class="dz-message"><b> </b></div>
            </form>
        </div>
        <div class="col-xs-1">Right</div>
     </div>
</div>
</body>

Arrow in addition to the bootstrap container

Answer №1

Answer №2

Answer №3

Similar questions

Change the HTML table's toggle element to either 'on' or 'off' based on the specified value using jQuery

Is there a way to utilize loops/recursion in conjunction with promise-chains?

Verify if an object remains within the camera's field of view using three.js

What is the process for triggering a sorted output from my MongoDB database by simply clicking a button?

Issue with Chrome extension: inability to submit values

Anticipate commitments during onbeforeunload

Determine in Typescript if a value is a string or not

Is there a way to make my DIVS update their content dynamically like buttons do, without manually adding an onclick function in the HTML code?

Leveraging various endpoints with Apollo Client

Running into problems displaying information due to a click handler while fetching data through an AJAX call

Incorporating JQuery UI Resizable functionality into a Meteor project after creating an object

I wish for the form to automatically shut down whenever I click on the (X) icon

Are the digest cycle and dirty checking synonymous terms?

Can the use of setTimeout alter global variables?

JavaScript guide: Converting an array structured by tuples into a multidimensional array

Tips for Implementing Input Validation in Your Code

Using CSS to create shape gradients

How to create a thumbnail hover effect with CSS3 and javascript, overcoming the z-axis issue

Is there a way to determine which radio button has been chosen using jQuery?

Guide on how to display normal vectors on the surface of an object using three.js