Adjustment of bootstrap buttons

Asked

Viewed 587 times

1

Hello, I need to adjust the buttons of the bootstrap Cap to be next to the photo, today as the attached photo buttons exceed the desired area.

someone can help me?inserir a descrição da imagem aqui

This is the html code of my Carrousel, css ta coming via bootstrap.

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->


  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img/fotos/1.jpg" alt="Slide 1">
      
    </div>
    <div class="item">
      <img src="img/fotos/2.jpg" alt="Slide 2">
      
    </div>
    <div class="item">
      <img src="img/fotos/3.jpg" alt="Slide 3">
      
    </div>        
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" >
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

html twitter-bootstrap bootstrap carousel

  • Daniel, post your code to make it easier to help you, just looking at this image, we can’t identify what’s going on.

  • I would like the buttons that change the image of the Carrousel to stay together the photo, today in my project the photo is of the size I would like the buttons take the whole width of the page.

  • Okay, for that, post your code so we can help you.

  • I posted the code of my session that contained the Carrousel.eu would like to get to that result. http://interleite.com.br/sul/

  • Guy the example you posted is not with the Bootstrap Slider! It’s with the Slider’s Flexslider http://flexslider.woothemes.com/

  • Another thing, the site you talked about doesn’t even use Bootstrap it just uses the Bootstrap Grid, the other classes are different. Just analyze the <head> of the site

Show 1 more comment

2 answers

1

In that case, since the carousel is not involved in any div, the same will remain with 100% wide, and is also adding a padding-right default.

I made an edition that will work if the carousel occupies half the screen, I wrapped it in a class col-md-6 and in the CSS I applied the rule to remove the padding-right which he adds. You can perform the edits according to your need, this was just an example for the solution of your problem. 

.col-md-6{
   padding-right: 133px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-6">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img class="img-responsive" src="http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg" alt="Slide 1">
      
    </div>
    <div class="item">
      <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/pt/archive/c/cd/20101122222142%21The-catalyst-single-cover-500x500.png" alt="Slide 2">
      
    </div>
    <div class="item">
      <img class="img-responsive" src="https://inst.eecs.berkeley.edu/~cs194-26/fa16/upload/files/proj4/cs194-26-adl/images/dog.jpg" alt="Slide 3">
      
    </div>        
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" >
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>

  • 1

    Remembering that in case you want to use the carousel with width:100% that is, occupying the entire space of the document, you will have to have images that occupy this whole space, if not occupy, will be as in your post, the carousel occupies 100% but the image is small to occupy the whole space.

  • I’ll try, thank you!

  • 1

    @Danielpelissari, in this mode that is done they do not use bootstrap, use another plugin that groups several images, leaving with that aspect, they are using the plugin lightGallery.

1


Daniel according to the Example you posted from another site I made this template with Bootstrape, although the reference site use Flexslider

This template has 4 images by Slider, but you can adapt with CSS the way you think best. Even you need to make @media rules if you want it responsive to small screens.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
    .teste {
        display: flex;
        flex-grow: 1;
    }
    .teste img{
        width: 100%;
    }
</style>
</head>
<body>
    
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
      
        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <div class="teste">
                <img src="http://placeskull.com/200/200" alt="Slide 1">
                <img src="http://placecage.com/200/210" alt="Slide 3">
                <img src="http://placeskull.com/200/220" alt="Slide 3">
                <img src="http://placeskull.com/200/230" alt="Slide 3">
            </div>
          </div>
          <div class="item">
            <div class="teste">
                <img src="http://placeskull.com/200/220" alt="Slide 3">
                <img src="http://placeskull.com/200/210" alt="Slide 3">
                <img src="http://placeskull.com/200/200" alt="Slide 1">
                <img src="http://placecage.com/200/230" alt="Slide 3">
            </div>
          </div>
          <div class="item">
            <div class="teste">
                <img src="http://placecage.com/200/200" alt="Slide 1">
                <img src="http://placeskull.com/200/220" alt="Slide 3">
                <img src="http://placeskull.com/200/230" alt="Slide 3">
                <img src="http://placeskull.com/200/210" alt="Slide 3">
            </div>
          </div>        
        </div>
      
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" >
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Browser other questions tagged html twitter-bootstrap bootstrap carousel

You are not signed in. Login or sign up in order to post.