I am experiencing a problem on bootstrap columns on extra small devices. In extra small devices the bootstrap columns overflow and changes the alignment.
I am attaching screenshots from extra small device and other device.
Screenshot of extra small device:
Screenshot of other device(working fine):
Below code is the bootstrap code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="manu.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="header row">
<div class="time_remain col-sm-6 col-xs-6 col-md-6 col-ld-6">00 Min 00 Sec</div>
<div class="logout col-sm-6 col-xs-6 col-md-6 col-ld-6">Logout</div>
</div>
<div class="row frame">
<div class="col-sm-9 col-xs-9 col-md-9 col-ld-9 question_wrapper">
<div class="row questions">
1. This is first one?
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
A
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
First
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
B
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Second
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
C
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Third
</div>
</div>
<div class="row no-gutters choice_label_choice">
<div class="col-sm-1 col-xs-1 col-md-1 col-ld-1 answer_choice_label_div">
D
</div>
<div class="col-sm-11 col-xs-11 col-md-11 col-ld-11 answer_choice_div">
Fourth
</div>
</div>
</div>
<div class="col-sm-3 col-xs-3 col-md-3 col-ld-3 question_status_wrapper">.col-sm-3</div>
</div>
<div class="row status_bar">
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>00 MIN 00 SEC</div> </div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Back</div></div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Next</div></div>
<div class="col-sm-0 col-xs-0 col-md-6 col-ld-6 "></div>
<div class="col-sm-3 col-xs-3 col-md-1 col-ld-1 time_bar"><div>Submit</div></div>
</div>
</div>
</body>
</html>
The css code is given below.
.frame
{
height: 70vh;
}
.question_wrapper
{
height: inherit;
background-color: beige;
overflow: auto;
padding-left: 20px;
padding-right: 20px;
}
.time_remain
{
padding-top: 5px;
color: white;
text-align: left;
padding-left: 20px;
}
.logout
{
color: white;
text-align: right;
padding-right: 20px;
padding-top: 5px;
}
.question_status_wrapper
{
height: inherit;
background-color: bisque;
overflow: auto;
}
.header
{
height: 10vh;
background-color: #333333;
color: white;
}
.status_bar
{
position: fixed;
bottom: 0;
width: 100%;
height: 20vh;
background-color : #333333;
display: flex;
}
.questions
{
margin-top: 20px;
margin-left: 20px;
}
.answer_choice_label_div
{
background-color: black;
color: white;
text-align: center;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
}
.answer_choice_div
{
background-color: white;
color: black;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
overflow: inherit;
}
.answer_choice_div:hover
{
background-color: #C6FFF1;
color: black;
height: inherit;
vertical-align: inherit;
border-style: solid;
border-width: 2px;
overflow: inherit;
}
.choice_label_choice
{
margin-top: 10px;
margin-bottom: 10px;
min-height: 10vh;
height: 50px;
vertical-align: middle;
}
.time_bar
{
background-color: aliceblue;
color: black;
align-self: center;
text-align: center;
margin-left: 10px;
min-height: 6vh;
display: inline;
vertical-align: middle;
margin-right: 10px;
padding-top: 7px;
}
I have checked the bootstrap grid and didn't find any problem. Please help.
Use media queries , Paste this code in your style.css
#media only screen and (max-width: 580px)
{
.answer_choice_div
{
width: 83%;
}
.answer_choice_label_div
{
width: 10%;
}
}
Use xs for extra small devices. sm for small devices and md for medium devices.
Follow this link for Grid Options
Grid Options - Bootstrap
Related
This is My Format right now on phone/dekstop
++img++ ++Title++
++SNIPPET++
I want to create it in such a way that it looks like this on phone
++img++
++Title++
++Snippet++
This is how i want to design in the card but i don't know how
This is The HTML code I am making this project on django so ignore this part {}
{% for post in object_list %}
{% if post.header_image %}
<div class="container-fluid col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10 " onclick="location.href='{%url 'article-details' post.pk %}';" style="cursor: pointer;">
<div class="row">
<div class="col-12 mt-3">
<div class="card ">
<div class="card-horizontal">
<div class="img-square-wrapper col-sm-4">
<img class="responsive" src="{{post.header_image.url}}" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title"> {{post.title}}</h4>
<p class="card-text">{{post.snippets}}</p>
</div>
</div>
<div class="card-footer">
<small class="text-muted">{{post.post_date}}</small>
</div>
</div>
</div>
</div>
</div>
{%endif%}
{% endfor %}
THIS the CSS part I have been trying all sorts of thing but its not happening, I dont know know what to do.
.item{
margin: auto;
padding:auto;
}
.flex-container-center {
justify-content: center;
}
.text{
padding: 5px;
text-align: center;
color: black;
}
.text2{
color: black;
}
.list-col *{
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
outline: 5px black;
}
.card-horizontal {
display: flex;
flex: 1 1 auto;
}
.card-horizontal:hover{
border: 1px solid #777;
}
img {
border: 1% solid #ccc;
display: block;
margin-left: 10%;
width: 100%;
height: auto;
}
img:hover{
border: 1% solid #777;
}
.responsive{
width: 100%;
height: 300px;
object-fit: cover;
object-position: bottom;
}
Rendered in desktop:
Rendered on Mobile:
Can anyone help me to understand what is wrong with my code?
Here It is, I removed unnecessary classes from styles.
Used col-md-4 and w-100
.item{
margin: auto;
padding:auto;
}
.flex-container-center {
justify-content: center;
}
.text{
padding: 5px;
text-align: center;
color: black;
}
.text2{
color: black;
}
a{
text-decoration: none !important;
}
.list-col *{
padding-top: 5px;
margin-left: 10px;
margin-right: 10px;
outline: 5px black;
}
.card:hover{
border: 1px solid #777;
}
img:hover{
border: 1% solid #777;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container-fluid col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10 " onclick="location.href='#';" style="cursor: pointer;">
<div class="row">
<div class="col-12 mt-3">
<div class="card ">
<div class="card-horizontal row">
<div class="img-square-wrapper col-md-4">
<img class="w-100" src="https://via.placeholder.com/150C/O" alt="Card image cap">
</div>
<div class="card-body">
<a href="#">
<h4 class="card-title"> Title</h4>
</a>
<p class="card-text">Lorem Epsum</p>
</div>
</div>
<div class="card-footer">
<small class="text-muted">11-02-2021</small>
</div>
</div>
</div>
</div>
</div>
There's a Bootstrap class for making images responsive: img-fluid.
Put this class in your img tag, and it should work without having to use other classes to make it look as you want.
Refer to: https://getbootstrap.com/docs/5.0/content/images/#responsive-images.
This link is for Bootstrap 5, but it works the same in Bootstrap 4.
I am making a progress step tracker, like the type you'd see in multi-page forms, using CSS and Bootstrap and I am having issues with it scaling down to different screen sizes.
When I move to certain smaller screen sizes, I am having issues with the bars between the steps moving further left then their steps.
My markdown:
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
<div class="work-order-progress">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
<span class="step-number">1</span>
<span class="step-name">Initial Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">2</span>
<span class="step-name">Work In Progress</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">3</span>
<span class="step-name">Final Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">4</span>
<span class="step-name">Complete</span>
</div>
</div>
</div>
</div>
And my style sheet:
.work-order-progress {
.div {
margin-right: 75px;
vertical-align: top;
display: inline-block;
text-align: center;
font-weight: bold;
}
.step-number {
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
display: inline-block;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
:not(.first-item) {
.step-number:before {
width: 85%;
height: 5px;
content: '';
position: absolute;
top: 10px;
left: -87px;
z-index: -1;
border-radius: 25px
}
}
.step-name {
display: block;
color: #a5a5a5;
font-weight: bold;
}
.fill {
.step-number {
color: #ffffff;
background: #22a925;
}
.step-number:before {
background-color: #22a925;
}
}
:not(.fill) {
.step-number {
color: #a5a5a5;
background: #ededed;
border: 1px solid;
}
.step-number:before {
background-color: #ededed;
}
}
}
I am conditionally adding the class that makes it active based on business logic, which is removed in this example.
I built a live demo here:
.work-order-progress .div {
margin-right: 75px;
vertical-align: top;
display: inline-block;
text-align: center;
font-weight: bold;
}
.work-order-progress>div{
}
.work-order-progress .step-number {
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 0.8em;
display: inline-block;
line-height: 1.6em;
margin-right: 5px;
text-align: center;
width: 1.6em;
}
.work-order-progress :not(.first-item) .step-number:before {
width: calc(100% - 35px);
height: 5px;
content: '';
position: absolute;
top: 10px;
left: calc(-50% + 15px);
z-index: -1;
border-radius: 25px;
}
.work-order-progress .step-name {
display: block;
color: #a5a5a5;
font-weight: bold;
}
.work-order-progress .fill .step-number {
color: #ffffff;
background: #22a925;
}
.work-order-progress .fill .step-number:before {
background-color: #22a925;
}
.work-order-progress :not(.fill) .step-number {
color: #a5a5a5;
background: #ededed;
border: 1px solid;
}
.work-order-progress :not(.fill) .step-number:before {
background-color: #ededed;
}
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-xs-6 col-xs-offset-3 col-sm-6 col-sm-offset-3 col-md-6 col-md-offset-3 col-lg-6 col-ls-offset-3">
<div class="work-order-progress">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center first-item">
<span class="step-number">1</span>
<span class="step-name">Initial Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">2</span>
<span class="step-name">Work In Progress</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">3</span>
<span class="step-name">Final Approval</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 text-center">
<span class="step-number">4</span>
<span class="step-name">Complete</span>
</div>
</div>
</div>
</div>
The Above image shows this is how i want to make it.I have alignment display issue and line doesn't gets displayed. how can i achieve using with bootstrap grid.I want it make responsive. please advise where i am making mistake and how can i make it happen.
plunker link
I wan to see like this
<div class="container-fluid" style="background: white;">
<div class="row">
<div class="col-lg-9 col-xs-12 ">
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">1</div>
<div class="expenseItems col-md-1 col-xs-1">Text1</div>
<div class="hrcol-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">2</div>
<div class="expenseItems col-md-2 col-xs-2">Text2</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">3</div>
<div class="expenseItems col-md-2 col-xs-2">Text3</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
<div class="parent col-md-3 col-xs-3">
<div class="child circle col-md-1 col-xs-1">4</div>
<div class="expenseItems col-md-2 col-xs-2">Text4</div>
<div class="hr col-md-1 col-xs-1"></div>
</div>
</div>
</div>
CSS
/*For drawing line*/
.hr {
color: gray;
background: gray;
width: 5px;
height: 1px;
margin-top:4px;
}
.circle
{
width: 28%;
border-radius: 100%;
text-align: center;
font-size: 14pt;
padding: 1pt;
position: relative;
background: gray;
color: white;
margin-top:11pt;
}
/*Parent div*/
.parent {
border-style: dashed;
border-width: 1px;
padding: 25px;
display:inline-block;
background-color:Aqua;
}
.child {
float: left;
background-color:Orange;
}
.expenseItems {
display: inline-block;
background-color:Green;
}
Using columns to acheive alignment inside other columns doesn't really make much sense when you can simply use a display property to do this with the content inside a column.
Use display: inline-block and remove all the nested columns.
Working Example: Open at FullPage
/*Use this rule below adjust the space between columns*/
.no-gutter > [class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
/*Use the above to adjust the space between columns*/
.parent {
border: 1px dashed red;
padding: 20px 25px 25px;
}
.circle {
width: 25px;
height: 25px;
border-radius: 50%;
padding-top: 3px;
display: inline-block;
text-align: center;
background-color: red;
color: white;
}
.expenseItems {
padding: 10px;
display: inline-block;
color: red;
}
.hr {
background: red;
height: 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
<div class="col-sm-3">
<div class="parent">
<div class="circle">1</div>
<div class="expenseItems">TEXT</div>
<div class="hr"></div>
</div>
</div>
</div>
</div>
I've got a lot of trouble with getting my checkboxes vertical aligned in my divs with a dynamic height.
I have some of my view:
<div class="col-md-7">
<div class="row recent-information">
<div class="product-navigation">
<div class="product-header-text">
<div class="col-md-3 product-details">
<p>Product name</p>
</div>
<div class="col-md-4 product-details">
<p>Note</p>
</div>
<div class="col-md-2 product-details">
<p>Price</p>
</div>
<div class="col-md-2 product-details">
<p>Stock</p>
</div>
</div>
</div>
#foreach (var item in Model.Products)
{
<div class="product-header">
<div class="product-header-text">
<div class="col-md-3 product-details-entity">
<h6>#item.Name</h6>
</div>
<div class="col-md-4 product-details-entity">
<h6>#item.Description</h6>
</div>
<div class="col-md-2 product-details-entity">
<h6>#item.Price DKK</h6>
</div>
<div class="col-md-1 product-details-entity">
<h6>#item.Stock</h6>
</div>
<div class="col-md-1 product-details-checkbox">
#Html.CheckBox("naem", new { #class = "products-checkbox" })
</div>
</div>
</div>
}
</div>
</div>
And the style:
.product-header {
min-height: 7%;
min-width: 100%;
margin-bottom: 3px;
border-bottom: 1px solid #e6e6e6;
overflow: hidden;
}
.product-header-text {
width: 98%;
margin-left: 10px !important;
margin-right: 10px !important;
float: left;
font-weight: 700 !important;
margin-bottom: 3px;
height: 100%;
}
.product-details {
font-weight: 500 !important;
margin-top: 13px;
font-family: 'Raleway', sans-serif;
font-size: 12px;
height: auto;
min-height: 100%;
}
.product-details-entity {
margin-top: 20px;
height: auto;
}
input[type="checkbox"] {
background: #f8f8f5;
-webkit-appearance: none;
height: 22px;
width: 22px;
margin-top: 20%;
cursor: pointer;
margin-left: 65px;
}
input[type="checkbox"]:checked {
background-image: url("../Images/checkmark2.png");
height: 22px;
width: 22px;
}
My problem is, that my divs, the product-details are dynamically based on the content from the database, and I can't get my checkboxes to follow.
I just put Bootstrap on to my website, and I have been testing it out. I have been trying to use there grid system, and I have run in to a mini problem. So on my website I have a Header, and it looks like this "Buttons 1-6 | Logo | Login". Now when my website retracts to the size of 767 pixels and smaller it still displays as above, but they each have there own row. So it looks like this "Buttons 1-6 (Top Row) | Logo (Second Row) | Login (Third Row)". Now whenever I try to do push and pull on the things, it still does not fix it. Eventually I would like it to display like this "Logo (Top Row) | Buttons 1-6 (Second Row) | Login (Third Row)" on a screen below 767 pixels. This is my HTML file:
<div id="wrapper" class="container">
<div id="header" class="row">
<div id="headerleftside" class="col-lg-4 col-md-4 col-sm-4">
<div class="row">
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 1 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 2 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 3 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 4 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 5 </h1>
</div>
</a>
<a href="http://localhost/postin'/_____.html" class="col-lg-4 col-md-4 col-sm-4 col-xs-6">
<div class="headerbuttons">
<h1> Button 6 </h1>
</div>
</a>
</div>
</div>
<div id="headertitle" class="col-lg-4 col-md-4 col-sm-4">
</div>
<div id="headerrightside" class="col-lg-4 col-md-4 col-sm-4">
<form action="action.php" method="post">
<button id="headersubmit" input type="submit"> Login </button>
<p class="logininputboxs"> <input type="text" name="username" placeholder="Userame" required/> </p>
<p class="logininputboxs"> <input type="password" name="password" placeholder="Password" required/> </p>
</form>
</div>
</div>
</div>
Also please note, the above code does not have , , and other tags because this file is being used as a include() from PHP. Then the CSS file is below:
/*
Used Colors:
• Black - Black
• Orange - Orange
• Light Blue - #4DB8FF
• Normal Blue - #296ACC
• Normal Blue (Darker) - #2156A6
• Gray - #292D30
*/
/*-------------------------------------------------------*/
#wrapper {
width: 100%;
height: 750px;
position: absolute;
}
/*-------------------------------------------------------*/
#header {
height: 15%;
background-color: #292D30;
position: static;
border-bottom: 5px solid #296ACC;
z-index: 5;
}
/*-------------------------------------------------------*/
#headerleftside {
background-color: #292D30;
}
.headerbuttons {
background-color: black;
font-size: 65%;
text-align: center;
margin-left: auto;
margin-right: auto;
line-height: 0%;
font-color: #4DB8FF; /*The color is defined in the <head>, as well as the hover.*/
border: 1px solid white;
border-radius: 5px;
}
/*-------------------------------------------------------*/
#headertitle {
height: 120%;
background-color: black;
border-bottom: 5px solid #2156A6;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 10;
background: black url("http://localhost/postin'/title.png") no-repeat center center;
}
#headertitle:hover {
box-shadow: 0px 0px 5px 5px #2156A6;
z-index: 10;
background: black url("http://localhost/postin'/title_with_logo.png") no-repeat center center;
}
/*-------------------------------------------------------*/
#headerrightside {
background-color: #292D30;
}
.logininputboxs {
margin-left: 5%;
margin-top: 0%
}
input[type=text] {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid #4DB8FF;
border-radius: 3px;
}
input[type=password] {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid #4DB8FF;
border-radius: 3px;
}
.input_error_required {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid red;
border-radius: 3px;
}
.input_error_unique {
font-family: courier;
font-size: 80%;
height: 20%;
border: 1px solid red;
border-radius: 3px;
}
#headersubmit {
width: 15%;
height: 10%;
font-size: 100%;
border: 1px solid white;
border-radius: 3px;
text-align: center;
color: #4DB8FF;
background-color: black;
margin-left: 45%;
}
/*-------------------------------------------------------*/
#sidebar {
height: 84%;
width: 20%;
background-color: red;
position: static;
z-index: 1;
}
.sidebarbuttons {
width: 80%;
height: 12%;
margin-left: auto;
margin-right: auto;
background-color: white;
border-radius: 5px;
position: relative;
text-align: center;
font-size: 80%;
line-height: 500%;
top: 5%;
}
/*-------------------------------------------------------*/
a, u {
text-decoration: none; !important
}
Then finally the actual file is also done by Include() below by PHP:
<html lang="en-US">
<link rel="icon" type="image/png" href="http://localhost/postin'/favicon.ico?v=2">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-3.3.1-dist/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
<style type="text/css">
a:link {color: #4DB8FF;} /* unvisited link */
a:visited {color: #4DB8FF;} /* visited link */
a:hover {color: orange;} /* mouse over link */
a:active {color: orange;} /* selected link */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-push-4">
LOGO
</div><!-- /.col-sm-4 -->
<div class="col-sm-4 col-sm-pull-4">
BUTTONS
</div><!-- /.col-sm-4 -->
<div class="col-sm-4">
OTHER STUFF
</div><!-- /.col-sm-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
DEMO: https://jsbin.com/mutoju/1/edit
Order the html as it is on small viewports
Push and pull at the min-width
.col-sm-4 is the same as .col-md-4 and .col-lg-4. It's 33.3333% of the parent. From the .col-sm- min-width (768px by default) till whenever, that will be the size. So you don't need to use .col-md-4 or .col-lg-4, it's redundant.