I am new to Bootstrap and I am having trouble trying to get my layout to work based on device resolution. I'm testing using Apple devices only right now, but when I open my page on an iPhone, I want my format to be XS and show my information in 2 columns. If the device is SM or larger, I want my information to show in 4 columns. With my sample below, my iPhone 5s shows the information in 4 columns (looking at display held vertically, long ways top/bottom), not 2. What am I doing wrong?
<div class="panel panel-default">
<div class="panel-heading"Panel Header</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4 col-sm-2 text-right">First:</div>
<div class="col-xs-8 col-sm-4 text-left">John</div>
<div class="col-xs-4 col-sm-2 text-right">Home:</div>
<div class="col-xs-8 col-sm-4 text-left">905-555-1111</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-2 text-right">Last:</div>
<div class="col-xs-8 col-sm-4 text-left">Smith</div>
<div class="col-xs-4 col-sm-2 text-right">Work:</div>
<div class="col-xs-8 col-sm-4 text-left">905-555-2222</div>
</div>
</div> <!-- panel body END -->
</div> <!-- panel END -->
Sample in jsfiddle
This happens when the meta viewport is missing:
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
I'm using Laravel with bootstrap for a project and seem to have run into a responsiveness problem.
I have cards containing data about posts, these cards have rows nested inside.
I want the cards to look identical on desktop as well as on mobile, but Bootstrap keeps breaking my rows.
On Desktop the cards look like I want them to:
But on mobile they look like this:
I have tried using container-fixed, container-fluid as well as col-xs- instead of col-md-.
This is my code:
<div class="card card-sm">
<div class="card-body row align-items-center">
<div class="container">
<div class="col-md-4"><img src="https://pull03-glorybee.netdna-ssl.com/media/catalog/product/cache/1/thumbnail/302x302/9df78eab33525d08d6e5fb8d27136e95/c/e/cedar-hive-0.jpg" style="max-width: 100%;"></div>
<div class="col-md-8">
<h2>Testtitle</h2>
<p>This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...</p>
<hr>
<div class="row">
<div class="col-md-5 align-items-center">
<img src="https://www.weepie-plugins.com/wp-content/uploads/2018/02/5-star-rating-for-WeePie-Plugins-example.gif" style="height: 30px;">
<h5>Some Text here</h5>
</div>
<div class="col-md-3"><img src="https://widopublishing.com/wp-content/uploads/2013/01/Square-Profile-pic-2011edit.jpg" style="max-width: 100%;"></div>
<div class="col-md-4">
<div>
<h5>Username probably..</h5>
<p><br>A Little bit of text there<br></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have searched around the web but nothing I found really fit my problem, either people usually like the automatic breaking of rows, I'm using them wrong or I searched for the completelly wrong thing.
Thanks in advance!
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container" >
<div style="overflow-x:auto;">
<div class="card card-sm" style="width: 1000px;overflow-x:auto;">
<div class="card-body" style="">
<div class="row" >
<div class="col-4"><img src="https://pull03-glorybee.netdna-ssl.com/media/catalog/product/cache/1/thumbnail/302x302/9df78eab33525d08d6e5fb8d27136e95/c/e/cedar-hive-0.jpg" style="max-width: 100%;"></div>
<div class="col-8">
<h2>Testtitle</h2>
<p>This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...This is just a small testdescription so I don't have to go to the lorem ipsum generator for the sole purpose of showing a bit of text here ...</p>
<hr>
<div class="d-flex" style="display: flex;">
<div class="rating-img col-4">
<img src="https://www.weepie-plugins.com/wp-content/uploads/2018/02/5-star-rating-for-WeePie-Plugins-example.gif" style="height: 30px;">
<h5>Some Text here</h5>
</div>
<div class="user-img col-4"><img src="https://widopublishing.com/wp-content/uploads/2013/01/Square-Profile-pic-2011edit.jpg" style="max-width: 100%;width: auto;"></div>
<div class="user-info col-4">
<h5>Username probably..</h5>
<p><br>A Little bit of text there<br></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have one solution for it. use this code if you don't want to break row. this code is as per you wanted. and i have put scroll for responsive.
I hope it would be helpful.
Please I'm using bootstrap 4 beta to build a website, the columns don't stack on mobile devices, however they do when I use Google Chrome to resize the window.
Even in chrome responsive mode, they don't stack also
Any help please?
<!--main-->
<section>
<div class="container">
<div class="row">
<div class="col-md-9">
<section class="news-items">
<h1>AfEI News</h1>
<div class="col-md-12">
<div class="row">
<div class="col-md-4 col-sm-6 col-12 col-lg-3">
</div>
<div class="col-md-4 col-sm-6 col-12 col-lg-3">
</div>
<div class="col-md-4 col-sm-6 col-12 col-lg-3">
</div>
<div class="col-md-4 col-sm-6 col-12 col-lg-3">
</div>
</div>
</div>
</section>
</div>
<div class="col-md-3">
<div class="row">
</div>
</div>
<div class="row">
<div class="col-md-12 aside-col" id="coming-up">
</div>
</div>
<div class="row">
<div class="col-md-12 aside-col" id="opportunities">
</div>
If it works properly when you resize the window but not on a mobile device, you are probably missing this in your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Have you tried to view it on an actual mobile device? I've noticed using chrome the responsive elements and dev options don't actually simulate a mobile device. Also, you do not need to use col-md-12 just use col and it will auto fit.
You should also use the current full release of bs4, here is the documentation. https://getbootstrap.com/docs/4.0/layout/grid/
it is due to you are placing all together like
<div class="col-sm-6 col-xs-6" >
</div>
<div class="col-sm-6 col-xs-6" >
</div>
<div class="col-sm-6 col-xs-6" >
</div>
<div class="col-sm-6 col-xs-6" >
</div>
So in this can it will tough for browser to align it proper as it wont know where to place the third one as space is filled.
So what you need to do is tell the browser to place it in next row by using the bootstrap class itself
<div class="row" >
<div class="col-sm-6 col-xs-6" >
test
</div>
<div class="col-sm-6 col-xs-6" >
test
</div>
</div>
<div class="row" >
<div class="col-sm-6 col-xs-6" >
test
</div>
<div class="col-sm-6 col-xs-6" >
test
</div>
</div>
Now you will get it proper.
I am new to Skeleton framework and am trying to build a two column layout for a blog project. So far this is what I have:
<section class="list-posts">
<div class="container">
<div class="row">
<div class="nine columns posts">
[NINE COLUMNS]
</div><!--nine columns-->
<div class="three columns aside">
[ASIDE]
[/ASIDE]
</div>
</div><!--row-->
</div>
but as more columns are added to the .posts class the aside collapses. Your help will be appreciated.
Not sure if I understand your problem, but if you are trying to nest columns you need to put a row div within the nine columns, and end the row(s) for every twelve columns.
If this is not the case, could you please provide a more specific clarification of your problem with a link or image.
Well after waiting for some hours without getting any help, i decided to get my hands dirty, this is what i did
<section class="content">
<div class="container">
<div class="row">
<!--LIST ALL THE POSTS HERE-->
<div class="twelve columns">
<div class='twelve'>
<div class='row single-entry'>
<div class='six columns'>
...
</div>
<div class='six columns'>
...
</div>
</div><!--row-->
</div><!--twelve-->
</div><!--row-->
<!-- ASIDE-->
<div class="four columns aside border-between">
<div class="row ">
<div class="twelve columns">
<div class="twelve">
<h4 class="standing">Recommendations</h4>
</div>
<div class="twelve columns recommended-articles">
<div class="three columns">
<img src="images/footer.png" class="u-max-full-width">
</div>
<div class="nine columns recommended-articles-details">
<h6 class="article-title">4 top SEO trends for 2017</h6>
<p class="author_name">Joel Orok</p>
</div>
</div>
</div>
</div>
</div>
</section>
I have a problem at aligning columns inside rows in bootstrap. I have the following structure:
<section class="container-fluid centerP">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-xs-10 col-xs-offset-1">
<h1></h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-1 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
<div class="col-lg-4 col-lg-offset-2 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4 col-xs-8 col-xs-offset-2">
<h3></h3>
<p></p>
</div>
</div>
</section>
It should look like a 1-2-2-1 (vertically aligned boxes of cntent). Currently they are centered but too far apart because of the overset of 2. I found a solution that mentioned using classes of "row-centered" and "col-centered" and it worked untill i modified the classes to "col-xs" and "col-lg". So what i was trying to do for the last two days was to bring them closer together but with no success.
I started coding a couple of weeks ago so please bear with me if the question is stupid
Each row should split to 12 col.
for exemple:
<div class="row">
<div class=col-md-6>
something
</div>
<div class=col-md-6>
something
</div>
</div>
A few suggestions:
I think you mean to use <div class="container-fluid centerP"> rather than <section class="container-fluid centerP>. Check out What is the difference between <section> and <div>? for more on why you should probably use a div rather than a section here.
A simple 1-2-2-1 block of vertically aligned central columns could be written like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 id="headerBox">Dolloping doubloons!</h1>
</div>
</div>
<div class="row">
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
<div class="col-md-2"></div>
<div class="col-md-5">
<p class="contentText">Dolloping doubloons!</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3 id="footerText">Dolloping doubloons!</h3>
</div>
</div>
`
You can then use the ids and classes to set the text's padding and margin properties in CSS, which in turn will offer you more precise control over where the text displays. For example, if you wanted to centre the text within its respective box, you could use margin: 0 auto;.
Is it possible to have 3 columns (3,6,3) on a wide screen but when brought to mobile or iPad size, the center column drops down so you effectively have the 2 '3' columns come together as '6','6' and under them stacks the full width '12' column?
Currently I have tried the html below, but this stacks them all three on top of each other at the mobile level, rather than dropping the center down to it's own new row.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">TESTING LEFT</div>
<div class="col-sm-12 col-md-6">TESTING MID</div>
<div class="col-sm-6 col-md-3">TESTING RIGHT</div>
</div>
</div>
One way to do this is to create two "Mid" divs, show one when the screen is large, but hide that one when the screen is small. Hide it by adding hidden-md and hidden-lg. Also add hidden-sm and hidden-xs to the first one.
I created a demo with styling so you can see the different divs more easily.
Bootply Demo
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">TESTING LEFT</div>
<div class="hidden-sm hidden-xs col-xs-12 col-md-6">TESTING MID</div>
<div class="col-xs-6 col-md-3">TESTING RIGHT</div>
</div>
<div class="row hidden-md hidden-lg">
<div class="col-xs-12 col-md-6">TESTING MID</div>
</div>
</div>
In your situation, you can do that with push and pull classes:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">LEFT md first in content</div>
<div class="col-sm-6 col-md-3 col-md-push-6">Right md Second in content </div>
<div class="col-sm-12 col-md-pull-3 col-md-6">Central MD last in content</div>
</div>
</div>
DEMO: http://jsbin.com/muvov/1/