These are chat archives for twbs/bootstrap

17th
Feb 2017
schmjdt
@schmjdt
Feb 17 2017 01:01
@brishirley that C3 game you were asking for help with earlier is fun! That a FCC project ?
@glng3r28 believe you can use # id tags for it, and anchors... See if that helps refine the search.
glng3r28
@glng3r28
Feb 17 2017 01:05
@schmjdt yeah figured that out. Thanks for the help anyways!
schmjdt
@schmjdt
Feb 17 2017 01:06
Ah, nice job!
Abhijeet Bhattacharya
@abhijeetthecode
Feb 17 2017 03:56
@chantalgo Hey can you please tell me what should I know before contributing to bootstrap?
@KarthickSelvam Hey can you please tell me what should I know before contributing to bootstrap?
MrSergeyB
@MrSergeyB
Feb 17 2017 04:49
I want to create website for real estate company using bootstrap? Is there any templetase for free?
Archit Chandra
@architchandra
Feb 17 2017 06:05

Hello. I have been banging my head against the wall because of a problem that seems simple enough but I can’t solve it. I am trying to build an image masonry-like gallery on a Bootstrap based webpage and have gotten all the grid issues and effects in order but the text overlay positioning on the image is still messed up and I can’t fix it. What I feel the main problem is is that the <p> element is taking on the height of the div it is contained in and this is preventing styles like text-align: centre; and align-items: centre; from applying (container has flex: direction; applied). I would be massively grateful if someone can help on this. I have literally spent hours trying to fix it but can’t even understand where the problem lies. Code snippets below (some of it is just to create the grid layout but including here just to help replicate the problem).

HTML:

  <div class="row no-gutter" id="tiles">
    <div class="col-lg-4 col-md-6 mx-auto">
      <a class="link-box" href="#">
        <div class="img-wrapper">
            <img class="img-thumbnail" src="https://c1.staticflickr.com/1/736/31933254544_3e0162f282_o.jpg" alt="Card image cap">
              <div class="img-text">
                <p>Placeholder 1</p>
              </div>
        </div>
      </a>
    </div>
  </div>

CSS:

.no-gutter .img-thumbnail  {
  padding: 0;
  border-radius: 0;
  min-width: 100%;
  display: flex;
}

.row.no-gutter  {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row.no-gutter > [class*="col-"],
.row.no-gutter > [class^="col-"]  {
  padding: 0;
  margin: 0;
}

.img-wrapper  {
  width: 100%;
  height: 250px;
  overflow: hidden;
  background-color: #000;
  position: relative;
}

.img-wrapper img  {
  display: block;
  float: left;
  width: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.35s;
}

.img-wrapper:hover img  {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

.img-wrapper .img-text  {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  display: flex;
}

.img-wrapper a  {
  display: block;
}

.img-text p  {
  position: relative;
  margin: 0;
  color: white;
  font-size: 1.8em;
  align-items: center;
}
Archit Chandra
@architchandra
Feb 17 2017 07:12
Hi. I think I didn’t present the problem properly earlier. I have created a JSfiddle to show it better. I need help in placing the placeholder text in the center of the image (horizontally and vertically). In my code text-align: centre; and align-items: centre; are not working for some reason. Here’s the link: https://jsfiddle.net/architchandra/ofkon3eh/
CarloSantos07
@CarloSantos07
Feb 17 2017 11:07
Anyone up and able to help with is probably a simple bootsrap issue on codepen?
Umeshagouda
@Umeshagouda
Feb 17 2017 14:55

@architchandra

.img-wrapper .img-text {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
text-align: center;
display: table;
}
.img-text p {
position: relative;
margin: 0;
color: white;
font-size: 1.8em;
display: table-cell;
vertical-align: middle;
}

replace this css it will work
Bernardo T. Abreu
@berTrindade
Feb 17 2017 19:32
How can I center a div both vertically and horizontally with Bootstrap ?