CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
moonlight
moonlight

Reputation: 359

Change css on moblie / desktop version in Bootstrap 3

I have a website that is split up in main content and some extra content. The extra content should be displayed on the right side of the website, when using a large screen and beneath the main content when displayed on a small screen.

Website layout on desktop and mobile devices

There fore I have the following structure:

<div class="row">
  <div class="col-md-10 col-xs-12">main content</div>
  <div class="col-md-2 col-xs-12">extra content</div>
</div>

That is all working fine, but now I want to separate the columns with a simple line. So what i did was adding border-right: 1px solid #ddd to the main content column. That looks good on desktop devices, but how do i get it, so that on mobile devices that border disappears and instead border-bottom: 1px solid #ddd is added?

I could use JS to detect the screen size and then aplly the correct CSS, but that is kind of a cheaty way and i want the website to work with JS disabled, too.

Maybe there is another way to separate the columns then using borders?

Upvotes: 1

Views: 120

Answers (2)

elad.chen
elad.chen

Reputation: 2425

You can set your own media query. Here's an example you can use with a custom css file (Using the mobile-first approach)

// Assume mobile devices first:
.col-md-10 {
    border-bottom: 1px solid #ddd
}

/* When the screen get to at least "sm" breakpoint change the borders
   Small devices (tablets, 768px and up)
*/
@media (min-width: 768px) {
    .col-md-10 {
         border-bottom: 0;
         border-right: 1px solid #ddd;
    }
}

Upvotes: 1

Max Novich
Max Novich

Reputation: 1169

You should use Media-queries as bootstrap uses them for layout like

html

<div class="row">
  <div class="col-md-10 col-xs-12 main">main content</div>
  <div class="col-md-2 col-xs-12">extra content</div>
</div>

css

@media (min-width: 768px)
{
.main 
{
border-right: 1px solid #ddd;
}
}
@media (max-width: 768px)
{
.main 
{
border-bottom: 1px solid #ddd;
}
}

Upvotes: 2

Related Questions