CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
cbz
cbz

Reputation: 71

tablet and mobile same layout with bootstrap 3

How do I design same type of layout for mobile and tablets with bootstrap 3.

My navbar doesn't look the same in mobile and tablet. The navbar in tablet looks same as desktop. But I want it to look like mobile.

Upvotes: 1

Views: 4178

Answers (2)

NoobEditor
NoobEditor

Reputation: 15891

Bootstrap 3's solution is here: http://getbootstrap.com/components/#navbar

Customize the collapsing point

Depending on the content in your navbar, you might need to change the point at 
which your navbar switches between collapsed and horizontal mode. Customize the 
@grid-float-breakpoint variable or add your own media query.

So you solution is to either Customize the @grid-float-breakpoint variable or add your own media query.

so make a MQ css like :

@media only screen and (max-width: 768px)/*or ur preferred width*/ {
 /* style here */
}

i'll suggest you to make a separate css for this and let bootstrap file as it is!

Upvotes: 3

Anup
Anup

Reputation: 9738

/* Tablet Devices, Desktop and Laptop Screens */

@media only screen and (max-width: 768px) {
 // Code to minimize menu

.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}

.collapse {
display: none;
}

}

Upvotes: 0

Related Questions