Bootstrap: Prevent 'wells' from wrapping - html

On my current website using bootstrap, I have a set of 'wells' within a container-fluid. The effect I am trying to achieve is to have each well is side by side in one row. This was fine for a few wells. However, now I have added more wells and I have begun testing on smaller resolutions.
Now, when the wells reach the edge of the browser window, they wrap around. This is not the behavior I'd like. Instead, I would like a horizontal bar to appear and allow users to scroll sideways to view the rest of the wells. All the wells should be in the same row, irrespective of screen resolution, the number of wells, and the width of the well's contents.
Here is a brief section of code to give you an idea of my structure:
<div class="container-fluid">
<div class="row">
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 1 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 2 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<div class="span">
<div id="pipelinesPackagesViewPane" class="well well-sm">
<h2> Well 3 </h2>
<p> Long line of texxxtttttttttttttt </p>
</div>
</div>
<!-- MORE WELLS HERE -->
</div>
</div>
Am I using the correct Container? How can I achieve this 'no wrap' row result?
Thanks!

You may need some custome CSS to get that result use this:
<div class="container-fluid">
<div class="row wells"> // ADD Class "wells"
<div class="span">
Then on CSS
.row.wells {
white-space:nowrap;
overflow:auto;
}
.span {
display:inline-block;
}
Check this Demo

Related

flex-direction:row completely hides some items on mobile view

I have div(class: review-tiems-container) with some items, on flex-direction:column they all show up, on flex-direction:row first one completely and some part of the second item disappear from screen, even when moving with mouse over mobile resolution.Even from editor mode hovering over their element, it shows empty space on dom.
this is how html looks, those item have inside content aswell but removed to reduce code length
<div id="reviews">
<h1 class="reviews-header">
Hear what our customers
<span>
are saying
<img class="why-underline" src="./Imgs/why/headerunderline.png"/>
</span>
</h1>
<section>
<div class="review-info-bar">
<div class="review-numbers">
</div>
<button class="review-btn">
</button>
</div>
<div class="review-items-container">
<div class="review-item">
</div>
<div class="review-item">
</div>
<div class="review-item">
</div>
<div class="review-item">
</div>
</div>
</section>
</div>
I tried different overflow options, none of them work

Having an aside column drop below previous aside

I'm just dabbling into CSS and HTML. At the moment I have an a <article> inside that column should have two items, a picture on the left, and article information on the right(header, and paragraph). It appears okay when the screen is enlarge but if the screen shrinks the image and the text shrinks. Instead of shrinking I'm looking for the image to retain it's size and the text to drop below the image.
http://codepen.io/anon/pen/Yygdjv
<div class="container-fluid">
<div class="row">
<aside class="col-sm-1">
</aside>
<section class="col-sm-7">
<article>
<div class="row">
<aside class="col-xs-6">
<img src="http://i0.wp.com/www.sooziq.com/wp-content/uploads/2015/11/32.jpg?resize=270%2C200"/>
</aside>
<aside class="col-xs-6">
<div id="DIV___5">
<span id="SPAN___6"> Basketball</span>
<h2 id="H2___8">
What really Matters
</h2>
<span id="SPAN___10">November 12, 2015</span>
<p id="P___11">
Make sure you load up on the fluids and snacks and use the washroom because these are the top 3 things to watch for in basketball! Read More
</p>
</div>
</aside>
</div>
</article>
</section>
</div>
</div>
This is a twitter bootstrap 3 question. You can achieve this be changing your col-xs-6 to col-sm-6 or col-md-6 for both columns. After the sm or md breakpoint (whichever you go with), it will make the two columns full width and the image will naturally be on top. You can be more explicit with class="col-xs-12 col-sm-6" for both columns, but it's not really necessary.
Fork of your demo: http://codepen.io/anon/pen/GpezRL
You Can Also Use #media rule(optional) like-
#media (max-width:580px)
{
.col-xs-6 {
width: 50%;
clear: both;
}
}

Nested bootstrap grid - layout issue

I have a struggle with bootstrap framework.
I want to create a simple box with image on the left side and some text and other elements on the right side. But having issue when it is displayed on small screens.
This is my current code.
<div class="col-md-8" style="margin-top: 3px;">
<div class="feed-box">
<div class="row">
<div class="col-md-1">
<img style="max-width: 52px;" src="http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=250">
</div>
<div class="col-md-11">
<div class="row">
<p>John Doe announced something</p>
</div>
<div class="row">
<p>
Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.
</p>
</div>
<div class="row">
Comment
Share
</div>
</div>
</div>
</div>
</div>
I will explain it through images:
Desktop (it's fine this padding is not important here):
Small screen (bad):
What I am trying to make (in small screens):
You need to also specify the cols for smaller screens...i.e - you don't need to put in for md
<div class = "row">
<div class = "col-sm-1">
</div>
<div class = "col-sm-11">
</div>
</div>
Use media queries to style the elements for small screen.
For example check this fiddle(resize to see the difference)
CSS used
#media (max-width: 800px){
.feed-box .col-md-1{
float:left;
margin-bottom:8px;
}
.feed-box .col-md-11{
margin-top:15px;
}
}

Bootstrap 3 - Display text and an image in the same row

I'm starting out a website using BootStrap 3 framework. Here's the section of the code that I have an issue with:
<div class="row">
<div class="col-md-8">
<div class="brand">
<h1>Test Text.</h1>
<div class="line-spacer"></div>
<p><span>Some more test Text</span></p>
</div>
</div>
<div class="col-md-12">
<img src="img/devices.png" />
</div>
</div>
</div>
Here's what the output looks like:
How do I get the image along the same row as the text? I tried placing the <img> within the col-md-8 div tag, tried without specifying any col div value, but none of that worked. Any help is appreciated. The CSS is the generic bootstrap min css.
You might want to split the area up in two parts, but always keep in mind that bootstrap standard uses 12 grid system.
So if you want the two next to each other u use...
<div class="row">
<div class="col-md-6">
Here your text
</div>
<div class="col-md-6">
<img />
</div>
</div>
That should fix your issue, remember up count goes over 12 it wraps.
Your columns have to always add up to a total of 12 and your code should be similar to the below:
<div class="container">
<div class="row">
<div class="col-md-4">
CONTENT
</div>
<div class="col-md-8">
CONTENT
</div>
</div>
</div>
Have a good read over the Bootstrap Docs on their Grid System:
http://getbootstrap.com/css/#grid

Bootstrap confusion about grids

I am trying to convert my non responsive site to responsive using bootstrap. I am starting with the top banner. It is 1000px * 400 px. It has a login link on top right. Below that on the left there is a site title saying(my website title: slogan). And below that on the right there is search. I am able to implement it but confused about how to do it. My site is fixed container 1024px.
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">Login links</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:left;">Site banner title</p>
</div>
</div>
<div class="row">
<div class="col-md-12 clearfix">
<p style="float:right;">search box</p>
</div>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
I have few doubts? Like is it okay to give three rows directly inside one row or should
I give an intermediate col-md-12 like given above?
Is this code the right way to do what I am trying to achieve or is there a better way and is this correct from
bootstrap rules.. I am new to bootstrap and I feel guilty I am not abiding by rules.
Like I mentioned in the comment, your nesting is correct but may be extraneous.
Simplified Markup
<div class="container" style="max-width:1024;width:98%" >
<div id="banner-holder" class="row">
<div class="col-md-12">
<div class="clearfix">
<p class="pull-right">Login links</p>
</div>
<div class="clearfix">
<p class="pull-left">Site banner title</p>
</div>
<div class="clearfix">
<p class="pull-right">search box</p>
</div>
</div>
</div><!-- row holding bannder ends here-->
</div><!--container ends here-->
To answer your question in the above comment:
is it necessary for col-md-* inside every row to add up to 12?
That is almost correct, the sum of col-md-* should not exceed 12 within a row in order to maintain the desired column layout on medium device resolution.
Note about offsets:
if you're using col-*-offset-*, make sure the sums of the cols and offsets does not exceed 12 within a row.