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.
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
As it says in the title, a row on my site is not containing its elements properly when the site loads on my iPhone. It works in Firefox, Chrome, and Safari desktop when I change the viewport width, and when I test it in dev tools.
Here's a screenshot of the issue:
Here's a link to the site: www.appepic.com
This is the first time I've built a website using Bootstrap, so I apologize if I missed something simple.
Thank you! Here's the html for reference as well:
<div class="row" id="clients">
<div class="container">
<div class="col-xs-12">
<h2 class="heading text-uppercase">Brands That Trust AppEpic</h2>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="http://appepic.com/wp-content/uploads/2016/06/Microsoft_logo-200.png" class="center-block brand" id="microsoft">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<img src="http://appepic.com/wp-content/uploads/2016/06/Amazon-logo-200.png" class="center-block brand" id="amazon">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img src="http://appepic.com/wp-content/uploads/2016/06/semanoor-logo.png" class="center-block brand" id="semanoor">
</div>
</div>
<!--Anchors for same site linking-->
<a name="youthability-test"></a>
<a name="feedback-panel-test"></a>
<!--End anchors-->
</div>
the .container div should be outside (parent) of the .row div
I'm having trouble with the bootstrap grid system. The div below <div class="col-xs-12 col-md-4"> should be on the right side while the other divs are on the left. Currently the first two column divs are correct and rendering at the top, but then the third column div doesn't render until the bottom of the image rather than alongside it. I need them to display correctly, what can I do?
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-7">
<div class="loginText">
Get information about your Connect plan
<br><br>
If you have any problems logging in, please contact your account manager for help.
<br><br>
</div>
</div> <!-- cols -->
</div> <!-- row -->
</div> <!-- container -->
It looks like this
The third div needs to be moved up under the first div, but it's currently below the height of the second div.
Bootstrap's framework is build on a 12 column layout.
So
col-md-7 + col-md-4 + col-md-7 = 18 columns exceeding the 12 column limit, hence pushing the third div to the next line.
You can fix it by changing the col-md's to col-md-5 + col-md-2 + col-md-5 like this:
<div class="row">
<div class="col-xs-12 col-md-5">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<div class="col-xs-12 col-md-2">
<img src="images/tie.png">
</div>
<div class="col-xs-12 col-md-5">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div> <!-- cols -->
</div>
Your question isn't very clear but from what I understand, col-md-7 plus col-md-4 plus col-md-7 equal 18, 6 more than the allotted 12. So it will go onto the next line.
The bootstrap grid system always adds to 12 in a row. you have md-7 and md-4 that's only 11.
you need to change
<div class="col-xs-12 col-md-4">
to
<div class="col-xs-12 col-md-5">
now you have 7+5 =12.
So, according to your updated question, you want the text on the left and the image on the right. You can do that as follows:
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row">
<div class="col-xs-12">
<h1>WELCOME TO YOUR NETWORK PROGRAM WEBSITE</h1>
</div>
<!-- div below is hidden in xs -->
<div class="col-md-12 hidden-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<img src="images/tie.png">
</div>
<!-- div below is shown only in xs -->
<div class="col-md-12 visible-xs">
<div class="loginText">Get information about your Connect plan<br><br>If you have any problems logging in, please contact your account manager for help.<br><br>
</div>
</div>
</div>
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.
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.