Twitter Bootstrap Question posted in

Fit 3 grid columns on the same row and wrap an center them when they don't fit – Twitter bootstrap

I’m looking to put 3 columns in the main section, 1 list-group, 1 twitter timeline and 1 facebook timeline.

When in full screen, I want all of the 3 on the same line, when they cannot fit all of them on the same line, I would want them all one bellow the other one in the middle of the page (centered) (mobile scenario).

In my case, they start to overlap, and finally, when the page is shrinks, they get one bellow the other but they stay on the left side, and leave some clear space in the right.

This is the code that I have:

Live demo: https://jsbin.com/qayitequga/1/edit?html,css,output

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
        .list-group{
            width: 350px;
            height: 800px;
            overflow-y:scroll;}
</style>
</head>
<body>

<main>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <main>
        <div class="container" style="width:100%; padding-left: 4.5%; padding-right: 4.5%">
          <div class="row">
            <div class="col s12 m4">
              <div class="list-group">
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                </a>
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"><div class="d-flex w-100 justify-content-between"><small class="text-muted">Date</small></div><p class="mb-1" align="justify" style="font-size: 15px">Test</p>
                </a>
            </div>
          </div>
          <div class="col s12 m4">
            <a class="twitter-timeline" data-width="350" data-height="800" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
          </div>
          <div class="col s12 m4">
            <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>
          </div>
        </div>
      </main>
</body>
</html>

Any suggestions?

Thank you!

Tags:

2

Answers


  1. 0

    Just add these classes to your parent div it will automatically adjust the iframes and list items in center of all screens.

    Relace col with col-sm-4 col-xs-12 text-center it will turns your grid into one below the other and center aligned but the text-center will align the content in the center of all devices.

    If you want to align the content in center just for mobile you can use css media query and css property text-align:center; for small devices.

    You can also use jquery to add class text-center when resizing width of windows

    Jquery Code

    $(window).resize(function(){
    if($(window).width() <= width_where_you_want_to_add_class){
       $('selector id or class').addClass('text-center');
    }    
});

    fiddle done with bootstrap classes

    Login or Signup to reply.
  2. 0

    You can have the layout that you desire by adding col-xs-offset-2 col-xs-8 col-md-offset-0 col-md-4 to your 3 sections.

    For a better output have a look at this fiddle. Feel free to resize it and see how your section changes layout.
    https://jsfiddle.net/qsy0nong/1/

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<body>

  
        <main>
            <div class="container"> 
              <div class="row">
                <div class="col-xs-offset-2 col-xs-8 col-md-offset-0 col-md-4">   
                  <div class="list-group">
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="javascript:;" class="list-group-item list-group-item-action flex-column align-items-start active"><div class="d-flex w-100 justify-content-between"><h5 class="mb-1" align="center">Events</h5></div>
                    </a>
                    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"><div class="d-flex w-100 justify-content-between"><small class="text-muted">Date</small></div><p class="mb-1" align="justify" style="font-size: 15px">Test</p>
                    </a>
                </div>
              </div>
              <div class="col-xs-offset-2 col-xs-8  col-md-offset-0 col-md-4">
                <a class="twitter-timeline" data-width="350" data-height="800" href="https://twitter.com/TwitterDev">Tweets by TwitterDev</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
              </div>
              <div class="col-xs-offset-2 col-xs-8  col-md-offset-0 col-md-4">
                <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>
              </div>
            </div>
          </main>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search