CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Zack
Zack

Reputation: 671

Centre divs within a column in Bootstrap

So I'm trying to place two divs within a column into the centre of the page so that there is little to no space in-between them. The top row is fine, but the bottom row is causing me issue. I'd like to keep the logos the same size as the first row and centre them together. I've shown what this looks like below. Code attached. Any input would be greatly appreciated. Thanks!

  <div class="col-md-12 vertical-center" style="margin-bottom: 40px;">
                    <div class="col-md-3 text-center">
                        <a href="http://www.msh.on.ca/" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png">
                        </a>
                    </div>
                    <div class="col-md-3 text-center">
                        <a href="http://www.tegh.on.ca/bins/index.asp" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a>
                    </div>
                    <div class="col-md-3 text-center">
                        <a href="http://www.southlakeregional.org/" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a>
                    </div>
                    <div class="col-md-3 text-center">
                        <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
                    </div>
                </div>

                 <div class="col-md-12 vertical-center" style="margin-bottom: 40px;">
                    <div class="col-md-3 center-block">
                        <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
                    </div>
                    <div class="col-md-3 center-block">
                        <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
                            <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
                    </div>
                </div>

enter image description here

Upvotes: 1

Views: 34

Answers (1)

K K
K K

Reputation: 18099

Try this html with few modifications:

    <div class="col-md-12 vertical-center" style="margin-bottom: 40px;">
  <div class="col-md-3 text-center">
    <a href="http://www.msh.on.ca/" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png">
    </a>
  </div>
  <div class="col-md-3 text-center">
    <a href="http://www.tegh.on.ca/bins/index.asp" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a>
  </div>
  <div class="col-md-3 text-center">
    <a href="http://www.southlakeregional.org/" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a>
  </div>
  <div class="col-md-3 text-center">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
</div>

<div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;">
  <div class="col-md-6 center-block">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
  <div class="col-md-6 center-block">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
</div>

Modified HTML:

    <div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;">
  <div class="col-md-6 center-block">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
  <div class="col-md-6 center-block">
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank">
      <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a>
  </div>
</div>

Demo:http://jsfiddle.net/lotusgodkk/GCu2D/2191/

Upvotes: 3

Related Questions