All geek questions in one place

Jumbotron Alignment Issues

I am currently using the latest version of bootstrap 3.0.0

The problem is simple. In jumbotron container, I use the way to align text with logo

I play for hours, with col-md- * and with little luck.

In bootstrap 2.3.2, I achieved the effect of centering everything in the hero using .text-center and .pagination center (for the image? - it worked)

http://jsfiddle.net/zMSua/

This script shows the text and image that is trying to center using bootstrap 3.0.0

+6
source share
3 answers

Here is another answer that might focus some content inside the actual div:

  <head> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> <style> .centerfy img{ margin: 0 auto; } .centerfy{ text-align: center; } </style> </head> <body style=" padding: 10px;"> <div class="jumbotron"> <div class="container"> <div class="row well well-lg"> <div class="col-md-6 col-md-offset-3 centerfy"> <h1 class="">Home of the</h1> <div class=""> <img src="http://www.harrogatepoker.co.uk/profile/HPL%20V%20Logo%20%20Revised%20and%20Further%20reduced.jpg" class="img-responsive text-center" /> </div> <h2 class="">"All In", Fun!</h2> </div> </div> </div> </body>

Check out the classes I added.

+5
source

why not compensate for the grid?

like this:

 <div class="jumbotron"> <div class="container"> <div class="row well well-lg"> <div class="col-md-6 col-md-offset-3"> <h1 class="">Home of the</h1> <div class=""> <img src="http://www.harrogatepoker.co.uk/profile/HPL%20V%20Logo%20%20Revised%20and%20Further%20reduced.jpg" class="img-responsive text-center" /> </div> <h2 class="">"All In", Fun!</h2> </div> </div> </div>

bootstrap has 12 columns, if your main column has 6, you can compensate for it 3 and leave you with:

3 columns 6 (main container) and 3 columns

+8
source

Starting with Bootstrap 3.3.6, my experience of centering text and logos in Jumbotron is simply by adding .text-center to your .container element along with an .img-responsive and center block to your image element, I don’t need to change CSS- classes or offset boot areas.

Check out my demo .

  <div class="jumbotron"> <div class="container text-center"> <h1>Hello World</h1> <img src="http://klpgo.com/klpfiles/images/klpgov3.png" alt="img" class="img-responsive center-block"> <p>custom text within my jumbotron</p> <a class="btn btn-default">first button</a> <a class="btn btn-info">second button</a> </div> </div>
+2
source

Source: https://habr.com/ru/post/953517/

More articles:


All Articles