Setting Bootstrap Buttons

Navigation
1

Hello, I need to adjust the bootstrap carrousel buttons so that it is next to the photo, today according to the attached photo the buttons go beyond the desired area.

Can anyone help me?

This is the html code of my carusel, css is 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>
    
asked by anonymous 08.02.2018 / 12:03

2 answers

1

In this case, since the merry-go-round is not involved in any div, it will have 100% width, and it is also adding padding-right default.

I made an edit that will work if the carousel occupies half the screen, wrapped it in a col-md-6 class, and in CSS I applied the rule to remove the padding-right that it adds. You can make the edits according to your need, this was just an example for solving 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><linkhref="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>
    
08.02.2018 / 13:25
1

Daniel according to the example that you posted from another site I made this model with Bootstrape, although the reference site uses Flexslider

This template has 4 images per Slider, but you can adapt with CSS in any way you like. You even 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><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
    
08.02.2018 / 14:02
Create tight button effect Database text does not appear in TDBMemo