i'm working with bootstrap V3.
i'm trying to use the grid property to make a responsive website
<div class="row">
<div class="col-xs-7 backgroundcolor">7</div>
<div class="col-xs-4 backgroundcolor">4</div>
<div class="col-xs-1 backgroundcolor">1</div>
</div>
but when i view this code on a smartphone the col-xs-1 does not show on the same line as the others.
if i change the lines to this:
<div class="row">
<div class="col-xs-1 backgroundcolor">1</div>
<div class="col-xs-4 backgroundcolor">4</div>
<div class="col-xs-7 backgroundcolor">7</div>
</div>
the col-xs-7 is not show on the same line as the col-xs-1 and col-xs-4.
on a large screen there is no problem.
you find my code also on http://www.bootply.com/87060.
I am not sure, if this is connected to your problem, but try
<div class="container">
in line 2 instead of
class="col-xs-12
This would be the right way to use the Bootstrap-grid.
Related
In my post section of the web site which I am creating I have 4 columns with post in each post with different height based on it's contents . bootstrap 4 grid system. As per photo under
When I resize the 4th column re-arrange.
As u can see on the above image the 4th column is shifted under number 1 but its align base on the height of the 3rd column. I want to be stacked like the photo bellow.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row pt-3 port-folio-margins pb-5 pr-4 pl-4">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
</div>
So the question is how to achieve that CSS formatting with Bootstrap or without bootstrap . I have tried putting "float" using "flex wrap" also "clearfix" without result.
Bootstrap has a built in utility for this problem you can use cards and wrap them in card columns. See the documentation here
This is a tricky issue that is often just worked around. Web-pages are much easier to code in grids, so things tend to be in columns and rows. In your example, when wrapped the row needs to be tall enough to contain your third item. That means that if the fourth item sat where you want it, it would be within the cell of the first item.
You can use something like Masonary, which I believe calculates top and left positions as you resize. Or I think you can use flex and a whole lot of wrapper divs, but that will get messy and be horrible maintenance. It's so messy I've never got it into production, either because I lost my mind trying, or hated the thought of maintaining it when it was working in just a small example.
Masonary allows a fairly simple layout
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
</div>
JSFiddle example
I'm using Bootstrap Twitter and I've an issue there :
<body>
<div class="container col-xs-8 col-sm-8 col-md-8 col-lg-8 col-xs-offset-2 col-sm-offset-2 col-md-offset-2 col-lg-offset-2 main-progress-bar-container" style="margin-top: 50px;">
<div class="progress sm-progress-bar active">
<div class="progress-bar" id="main-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="margin-bottom:30px;">
<!-- value here -->
</div>
</div>
</div>
<!-- Page content -->
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 main-container">
<!--Left Part (2/3)-->
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8" id="left-part">
<div class="part-content" id="left-part-content">
</div>
</div>
<!--Right Part (1/3)-->
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4" id="right-part">
<div class="part-content" id="right-part-content">
<div id="clock-container">
</div>
</div>
</div>
</div>
But when I update my code like this :
<!-- Page content -->
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 main-container">
<!--Left Part (2/3)-->
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8" id="left-part">
<div class="part-content" id="left-part-content">
</div>
</div>
<!--Right Part (1/3)-->
<div class="col-xs-0 col-sm-0 col-md-4 col-lg-4" id="right-part">
<div class="part-content" id="right-part-content">
<div id="clock-container">
</div>
</div>
</div>
</div>
or like this :
<!-- Page content -->
<div class="container col-xs-12 col-sm-12 col-md-12 col-lg-12 main-container">
<!--Left Part (2/3) TEST-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="left-part">
<div class="part-content" id="left-part-content">
</div>
</div>
<!--Right Part REMOVED -->
</div>
Nothing change.. And when I'm looking at my source code in my browser, the code is not updated. On the server, the code is updated. I've the same trouble in local.. then I don't understand. I've tried with another browser, to clear the cache, history, to change the path, etc. Nothing change. It has been updated only when I've removed the whole div main container, then I've nothing to displayed unless my progressbar (as expected).
That's stange. There's someone able to explain me what I've missed ? I'm pretty sure it's a begginer mistake. Thanks.
Edit : I'm starting to belive in ghosts
The classes you are deleting are related to the responsiveness of the site. If the screen size changes, or if the device changes, they would perform the update of the site to fit the screen.
You could also, post a picture of what you see, it can help us to understand what it looks like.
Another thing, you have no content inside your divs, so the website won't show anything if the css is empty or so.
As you have deleted the right part, the div is aligned in such a way. It's the Bootstrap feature
What I am telling is possibility. There might be something else also.
If your code is not being changed by all those efforts then only thing that can control your HTML code is Java Script. It can control your HTML DOM.
Any of your JavaScript function might be reconstructing or editing your HTML code.
Hope this helps.
I have a simple bootstrap grid layout. I do not want the columns to stack vertically even on small devices.
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-4 col-md-4">1</div>
<div class="col-sm-4 col-xs-4 col-md-4">2</div>
<div class="col-sm-4 col-xs-4 col-md-4">3</div>
</div>
The columns are stacking vertically because you're using Bootstrap 4, and the -xs- infix is no longer used. Just use col-4..
<div class="container border-show center-div">
<div class="row">
<div class="col-4 border-show">1</div>
<div class="col-4 border-show">2</div>
<div class="col-4 border-show">3</div>
</div>
</div>
http://www.codeply.com/go/sCct2CzZte
I can't quite make out the question because the HTML you posted does exactly what you want it to do: It never stacks the columns vertically for that row.
Could you clarify what you're trying to ask? See How To Ask for a reference of how to ask good questions.
This code is from w3schools.com examples:
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Example page: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex4
Why all the columns are stacked on each other. It is rendering like this:
8
6
6
4
It should render like this as per my understanding:
--------|----|
8 4
----|----
6 6
This code should work fine. The columns will stack on screen widths less than 992px. If you want the columns to never stack, you would use the col-xs-* classes..
<div class="row">
<div class="col-xs-8">
.col-xs-8
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
</div>
<div class="col-xs-4">.col-xs-4</div>
</div>
http://www.bootply.com/oYL80uQpSY
Col-sm are for small devices, try using col-md-x
You're not opening your browser window to a wide enough size. The render window doesn't match the "sm" media query.
your code works fine, you just have to try it at the correct screen size, you can always add more classes to adjust to screen sizes like this:
<div class="row">
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
.col-sm-8
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">.col-sm-6</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">.col-sm-6</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">.col-sm-4</div>
</div>
They are 12-grid systems of bootstrap.
In your code col-sm-8 is 8-grid layout and col-sm-6 is 6 grid layout.
So, you have 8-grid layout and within this 6-grid layout are maintained but since there can only be 8-grid layout but combining 6-grid + 6-grid would be 12-grid layout and which is never gonna occupy within the 8-grid layout and this is why col-md-6 goes below and produces the result what you see.
I'm building a website using Bootstrap 3.
Part of this site are 4 div-containers:
<div class="container">
<div id="content" class="row">
<div class="col-sm-4 col-md-3" style="background-color:#00F; color:#FFF">
Menu
</div>
<div class="col-sm-12 col-md-3 col-md-push-6 " style="background-color:#F00;">
<div class="row">
<div class="visible-md visible-lg col-md-12" style="background-color:#F08;">
Mod_1
</div>
<div class="col-md-12" style="background-color:#F80;">
Mod_2
</div>
</div>
</div>
<div class="col-sm-8 col-md-6 col-md-pull-3" style="background-color:#0F0;">
Main content goes here
</div>
</div>
</div>
Layout-View is shown here:
Code on Fiddler
"Mod_1" is only visible in the desktop view like expected. "Mod_2" should move above the Menu and Main container in the tablet view, but I can't find a way to place the container on top of both of them.
I already tried to use the col-sm-[colnumber]-push and -pull classes. But I didn't get the right results.