CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nurul98
nurul98

Reputation: 115

Positioning button at the bottom of bootstrap well

Hi so I am having trouble with the positioning of the button. I need the button to be at the bottom of the well but somehow I can't seem to position it there.

Here is what happened: the button ends up at the side of the image, but I need it to be at the bottom of the well image

Here are my codes:

<div class="container">
<h2 class="center">CTTS Data</h2>
  <div class="row">
  <div class="col-md-12 col-sm-12" id="CTTSData">


    <script>
    $.ajax({
      url : "CR_Data/CTTS_Data.json",
      type : "post", 
      contentType:"application/json", 
      success : function(list){           
          var divCol  = "<div class='col-sm-4 col-md-4'>";
          var divWell = "<div class='well' style='position:relative'>";
          var divClose = "</div>";

          console.log(list);

            list.forEach(function(obj, index) {

            //console.log(obj); 

            var title     = "<h5>"      + obj.title    + "</h5>";
            var linkStart = "<a href='" + obj.imagePath + "' target='_blank'>" ;
            var image     = "<img class='thumbnailSmall' data-toggle='tooltip' data-placement='left' title='Click to open data' src='" 
                                + obj.imagePath + "' height='100%' width='100%'/>"
            var linkEnd   = "</a>";
            var linkFile  = "<a class='btn btn-danger' id='btnView' href='" + obj.filePath + "'>Open File</a>";

            var div = divCol    +
            divWell     +
            title       +
           // desc        +
            linkStart       +
            image       +
            linkEnd +
            linkFile +
            divClose +
            divClose;

           $("#CTTSData").append(div); // insert the div you've just created

           })
        }
    });
  </script>


  </div>
  </div>

</div>
<!-- /.container -->

CSS:

#btnView{
position: absolute;
margin-bottom:   20px;
}

Upvotes: 1

Views: 366

Answers (1)

JV Lobo
JV Lobo

Reputation: 6326

I'd enclose your button inside a bootstrap "row" container, like this:

var divCol  = "<div class='col-sm-4 col-md-4'>";
var divWell = "<div class='well'>";
var divClose = "</div>";

var title     = "<h5> title </h5>";
var linkStart = "<a href='#' target='_blank'>" ;
var image     = "<img class='thumbnailSmall' data-toggle='tooltip' data-placement='left' title='Click to open data' src='path' height='100%' width='100%'/>"
var linkEnd   = "</a>";
var linkFile  = "<div class='row'><a class='btn btn-danger' id='btnView' href='#'>Open File</a></div>";

var div = divCol + divWell + title + linkStart + image + linkEnd + linkFile + divClose + divClose;

$("#CTTSData").append(div); // insert the div you've just created
#btnView{
  margin-top: 20px;
  margin-left: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <h2 class="center">CTTS Data</h2>
  <div class="row">
    <div class="col-md-12 col-sm-12" id="CTTSData">
    </div>
  </div>
</div>
<!-- /.container -->

Upvotes: 1

Related Questions