CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mr Smith
Mr Smith

Reputation: 3486

links one row in desktop/tablet, two columns in mobile?

I have a page section with links that should like this on desktop/mobile:

link link link link link link

But this on mobile

link    link
link    link
link    link

Can you offer any suggestions on how to get this working in bootstrap? I'm using HTML like the following now. Would different HTML help aybe?

<span class="col-xs-12 text-center" >
    <a href="http://link" class=" col-xs-6" >link</a>
    <a href="http://link" class=" col-xs-6" >link</a>
    <a href="http://link" class=" col-xs-6" >link</a>
    <a href="http://link" class=" col-xs-6" >link</a>
    <a href="http://link" class=" col-xs-6" >link</a>
    <a href="http://link" class=" col-xs-6" >link</a>
</span>

Upvotes: 0

Views: 48

Answers (2)

m4n0
m4n0

Reputation: 32295

<div class="row">
  <span class="col-md-12 col-xs-12 text-center">
    <a href="http://link" class="col-md-2 col-xs-6">link</a>
    <a href="http://link" class="col-md-2 col-xs-6">link</a>
    <a href="http://link" class="col-md-2 col-xs-6">link</a>
    <a href="http://link" class="col-md-2 col-xs-6">link</a>
    <a href="http://link" class="col-md-2 col-xs-6">link</a>
    <a href="http://link" class="col-md-2 col-xs-6">link</a>
  </span>
</div>

If you want them to have the same single line structure in mobile, use col-xs-2

Bootply

Upvotes: 2

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

You can do it as below:

<span class="col-xs-12 text-center" >
    <a href="http://link" class="col-xs-6 col-md-2" >link</a>
    <a href="http://link" class="col-xs-6 col-md-2" >link</a>
    <a href="http://link" class="col-xs-6 col-md-2" >link</a>
    <a href="http://link" class="col-xs-6 col-md-2" >link</a>
    <a href="http://link" class="col-xs-6 col-md-2" >link</a>
    <a href="http://link" class="col-xs-6 col-md-2" >link</a>
</span>

Upvotes: 1

Related Questions