Twitter Bootstrap Question posted in

Twitter bootstrap – How do I join multiple lines to a single one if the page is viewed on mobile?

Using Twitter Bootstrap (3.3.X), I want to display these lines on desktop:

Some info
Some more info
Even more stuff

And the same on mobile view should display as (pipes as in literal character, not separate blocks if possible):

Some info | Some more info | Even more stuff

This would be on the right side of a div defined with col-md-8, or on a single line above the div if it’s on mobile.

Any ideas?

Tags:

2

Answers


  1. 0

    You can do this with :after pseudo class and display: inline-block

    DEMO

    @media(max-width: 768px) {
  p {
    display: inline-block;
  }

  p:not(:last-child):after {
    content: " |";
  }
}

    <p>Some info</p>
<p>Some more info</p>
<p>Lorem ipsum</p>
    Login or Signup to reply.
  2. 0

    Optionally if you are using Twitter Bootstrap 3 you can make use of the visible-*-* classes which will let you hide or show content depending on the screen size.

    Example Fiddle

    So you could use 

    <p class="custom-menu">
Some info
<span class="visible-md-inline visible-sm-inline visible-xs-inline">/</span>
</p>
<p class="custom-menu">
Some more info
<span class="visible-md-inline visible-sm-inline visible-xs-inline">/</span>
</p>
<p class="custom-menu">
Even more stuff
<span class="visible-md-inline visible-sm-inline visible-xs-inline">/</span>
</p>

    You could even change the “/” character for a glyphicon o another kind of code.

    and for CSS

    /*Medium Media*/
@media (max-width:1199px) {
  p.custom-menu{display: inline;}
}

/*Small Media*/
@media (max-width:991px) {
  p.custom-menu{display: inline;}
}

/*Extra small Media*/
@media (max-width: 768px){
  p.custom-menu{display: inline;}
}

    Choose whichever media query suits your needs the best.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search