Positioning buttons and elements on top of a BootstrapVue Carousel slide: a handy guide

Can different elements be positioned on the BootstrapVue Carousel slide without restrictions, such as in any corner or position?

I have attempted to accomplish this by nesting additional elements within 

<b-carousel-slide></b-carousel-slide>
tags.

However, it appears that all these elements end up inside the div.carousel-caption and I am unable to move them outside of that div.

I want to place buttons in the top-right and bottom-left corners of the carousel-slide, but every attempt leads to results like this:

https://i.stack.imgur.com/S2S6K.png

As shown, all elements are contained within the caption div...

I have three queries:

  1. How can I achieve my objective and place elements in different corners of the carousel slide?
  2. Is it feasible to freely add elements to the carousel slide, but outside of the caption div?
  3. How do I relocate the entire caption div and indicators to the top of the carousel slide?

My code:

 <b-carousel
            id="story-carousel"
            controls
            indicators
            :interval = "3000"
        >
            <b-carousel-slide 
                text="asdasdasdsa"
                img-src="https://picsum.photos/1024/480/?image=10">

                <b-link>
                    LINK
                </b-link>

                <b-avatar size="md" variant="primary" icon="bookmark-heart" class="ml-2 highlight-button" button
                </b-avatar>
            </b-carousel-slide>
 </b-carousel>

And CSS:

.highlight-button{
        position: absolute;
        top: 0;
        right: 0;
    }
csstwitter-bootstrapvue.jscarouselbootstrap-vue

Answer №1

If you want to customize the content of your <b-carousel-slide> in BootstrapVue, you can utilize the img slot and adjust the layout using CSS:

  1. Firstly, add a <template #img> within the <b-carousel-slide> component.

  2. Inside this slot, include a <b-img> element with the desired image source.

  3. Create a new <div> with class carousel-extra-content and move additional elements like <b-link> and <b-avatar> into it.

<template>
  <b-carousel>
    <b-carousel-slide text="asdasdasdsa">
      <template #img>
        <b-img
          fluid-grow
          src="https://picsum.photos/1024/480/?image=10"
          alt="Random image"
        ></b-img>

        <div class="carousel-extra-content">
          <b-link> LINK </b-link>

          <b-avatar
            size="md"
            variant="primary"
            icon="bookmark-heart"
            class="ml-2 highlight-button"
            button
          >
          </b-avatar>
        </div>
      </template>
    </b-carousel-slide>
  </b-carousel>
</template>

  1. You can then style the .carousel-extra-content element to position it in the top-right corner and ensure clicks are possible by adjusting the z-index.

  2. Adjust the styling of .carousel-indicators and .carousel-caption to relocate them to the top of the slide, taking advantage of their current absolute positioning.

<style>
.carousel-extra-content {
  position: absolute;
  right: 5em;
  top: 1em;
  z-index: 20; /* Ensure clickable area */
}

.carousel-indicators {
  top: 1em;
}

.carousel-caption {
  top: 1.5em;
}
</style>

Check out the demo here

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

Testing Vue Modules by Mocking Promise-Based Actions

Unfortunately, I am unable to share the entire codebase or create a gist for this project as it is work-related. However, I will provide enough information for clarity. I'm currently facing an issue with mocking a call to an action that is stored in ...

vue.jsjestjsvuex

What is the method to retrieve the key of a component in Vue 3's composition setup() API?

When using the traditional API, obtaining the key is straightforward: created() { console.log(this._.vnode.key); } However, when working with the composition API in setup(), the 'this' keyword is undefined. After attempting to review the dat ...

vue.js

Is it considered acceptable to include paragraph elements within a heading tag in HTML5 (such as putting a <P> inside a <H1

Are paragraph elements allowed inside header tags in HTML5? Put simply, is this markup acceptable in HTML5? What are the implications of using it? <h1> <p class="major">Major part</p> <p class="minor"& ...

csshtmlw3c

What is the best way to create space between floated elements and a cleared element?

I have a webpage with various floated boxes and a footer positioned at the bottom. The issue arises when trying to create space between the boxes and the footer without using margins. #main { max-width: 700px; margin: 0 auto; } .box { width: 46.6 ...

css

Is it possible to use HTML code as content in CSS?

How do I go about displaying the variable $text as HTML? Take a look at the code snippet provided below: <?php header('Content-type: text/css'); $background = "#ffafff"; $color = "#000000"; $green = "#16a86f"; $text= '<h1&g ...

phphtmlcss

How to implement a modal popup in Vue.js using an anchor tag

As a newcomer to Vue.js, I'm facing an issue with creating a link in my navbar component that, when clicked, displays a modal component. I've noticed that the solutions I found are for buttons which use the data target attribute, but this isn&apo ...

javascripthtmlvue.js

Looking for a drum set with clickable buttons? Having trouble changing the background color in CSS/HTML? Wondering how to map keyboard keys to HTML buttons?

Behold my HTML creation: <H1> <center> EPIC GUITAR JAM </center> </H1> <img class="guitar" src="guitar.jpg" /> <button class="strum" onclick="Strum()"> Strum Chord </button> <button class="pluck" o ...

javascripthtmlcsskeyboardbackground-color

Is it possible to alter preact-material-components to switch to mdc-theme--dark mode, thereby changing the CSS style of all descendant components?

I recently created a preact-cli app and added the following code in Header.js: document.body.classList.add('mdc-theme--dark'); However, when a user tries to switch from the light theme to the dark theme, only the background of the app changes. ...

htmlcssmaterial-uithemespreact

Change justify-content-between to something else

After successfully fixing the issue with aligning the navbar brand in the middle of my navigation bar, I am now facing a new challenge. I want to add a button right before the right navigation toggle, but all my attempts have been unsuccessful so far. I&ap ...

htmlcssbootstrap-5

Using Angular ng-model with Bootstrap Modal is problematic when attempting to use it multiple times

Imagine you have a table with 10 lists of operators, each with an edit button. When you click on the edit button for operator 1, the modal pops up and displays the operator data in the input field as expected. However, when you close the modal and try to e ...

angularjstwitter-bootstrap

Scaling CSS to fit both height and width (Stretch)

My content is contained within an 800x480 pixel box. When the window size changes, I want to achieve the following: Expand/Stretch the container to fill the entire screen Include all elements inside the container and maintain their relative positions I a ...

jqueryhtmlcss

Can you explain the distinctions among 'data:', 'data: ()', and 'data()' when working with Vue.js?

While exploring the Vue.js documentation, I came across two ways to define data: data: {} and data() { return; }. data: { defaultLayout: 'default' } data() { return { defaultLayout: 'default' } } However, there is ...

javascriptvue.jsvuejs2

Ways to prevent a floated element from impacting text-align: center styling?

Within my code, there is a <p> element structured as follows: <div><p>Text Goes Here <span></span</p></div> The CSS I currently have is: div { text-align:center } span { float:right } An issue arises when I populate ...

htmlcss

How can you position a table above a div in HTML and jQuery without using absolute positioning?

I am trying to create a toggle effect for an information table that needs to be displayed above another DIV. I have managed to achieve this using z-index and position:absolute, but I am wondering if there is a way to do it without using absolute positionin ...

jqueryhtmlcss

Add space between the first and second rows in the grid gallery display

.gallery{ display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) ); } view grid image here Could you assist me with identifying the spacing issue between the first and second ...

csscss-grid

Implementing dynamic styling with Alpine JS when hovering

I am working with 2 color pickers, one for background and one for text. These are connected to the styles of a button <button :style="`background-color: ${bg_colour}; color: ${text_colour};`">TEST BUTTON</button> Everything is funct ...

cssalpine.js

Highcharts' labels on the x-axis do not automatically rotate

One issue I am facing is that my custom x-axis labels on the chart do not rotate upon window resize. I would like to have them rotated when the screen size is less than 399px. Check out the code here $(function () { $('#container').highchart ...

javascriptjquerycsshighcharts

Choose the correct checkbox among several options

On my webpage, I am facing an issue with checkboxes. No matter which checkbox I click on, only the first one is getting checked. I can't figure out what the problem is. Initially, the checkboxes weren't showing as checked, but now only the first ...

htmlcssformscheckboxlabel

The operation malfunctions if the variable input is below 50, causing it to produce inaccurate results

The function "calcFinalTotal()" was created to calculate the post-tax discount on a purchase of items that were previously totaled and stored in an input tag with the ID of "totaltaxamount". This function applies a 10% discount to orders between $50 to $ ...

javascripthtmlcss

Navigating in Vue.js using Ruby on Rails routes

I'm in the process of developing an application that utilizes a Ruby on Rails backend along with a Vue.js frontend. This application is designed as a single page app, and I am leveraging the webpacker gem to compile my main JS file. After integrating ...

ruby-on-railsvue.jsvue-router