I'm using the following markup in my main content area:
<div class="row">
<aside class="col-md-3 sidebar col-sm-3 col-xs-12">
content
</aside>
<div class="col-md-9 col-sm-9 col-xs-12">
content
</div>
</div>
But in extra small devices, I would like to put aside bellow the main div. I try to use push and pull but the div moves to the right.
If you start with the aside underneath, then at larger sizes, the push/pull classes will reverse the order. Like this:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-12 col-sm-push-3">
DIVcontent
</div>
<aside class="col-md-3 sidebar col-sm-3 col-xs-12 col-sm-pull-9">
ASIDEcontent
</aside>
</div>
Related
I've problems with this Bootstrap 4 full-span row definition:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
<div class="container my-5">
<div class="row">
<div class="col-lg-6 col-md-12">
<img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
</div>
<div class="col-lg-6 col-md-12 p-4">
<div style="position: absolute; bottom: 0;"> <!-- this breaks responsiveness -->
<h2>Together, we empower software development around the world.</h2>
<p class="lead py-2">Join our unique team of developers.</p>
</div>
</div>
</div>
</div>
</div>
It works properly WITHOUT the right column bottom alignment as in the following code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row bg-white">
<div class="container my-5">
<div class="row">
<div class="col-lg-6 col-md-12">
<img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" /></a>
</div>
<div class="col-lg-6 col-md-12 p-4">
<h2>Together, we empower software development around the world.</h2>
<p class="lead py-2">Join our unique team of developers.</p>
</div>
</div>
</div>
</div>
How can I align the right column content bottom without breaking responsiveness? On my page the columns content overlap instead of splitting in two independent lines.
You may achieve your goal by adding align-self-end class to the second column.
Here's a live demo:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha512-k78e1fbYs09TQTqG79SpJdV4yXq8dX6ocfP0bzQHReQSbEghnS6AQHE2BbZKns962YaqgQL16l7PkiiAHZYvXQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container my-5">
<div class="row mx-0">
<div class="col-lg-6 col-md-12">
<img class="img-fluid" src="http://dummyimage.com/600x350/ccc/969696" title="We Are Hiring" />
</div>
<div class="col-lg-6 col-md-12 align-self-end">
<h2>Together, we empower software development around the world.</h2>
<p class="lead mb-0 pt-2">Join our unique team of developers.</p>
</div>
</div>
</div>
You may play with margins and paddings the way you see fit, I have removed the paddings and margins from the second column's content.
I have also removed some unnecessary tags as the task can be achieved without any extra markup. Some tags that were removed are actually wrong (only the closing tags is present so the tag is assumed a typo and I removed it).
If I use a container. For instance
and then I use position relative. Position relative will mess with the container by moving left and right.Wouldn't this cause render issues for devices when i'm specifying the grids and then moving the content around?
What would be the proper way to move the content without messing up the grids I setup with col-md-#/col-sm-#
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Andy's Bike Shop"}}</span></i>
</div>
</div>
</div><!--Header Container-->
</div>
<div class="bikeSelector">
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6"><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
Test
</div>
</div>
</div>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
CSS
.products {
position :relative;
left: 500px;
}
Your html is wrong in places for what you're trying to achieve.
Try this (not tested but should get you started)
<div class='row'>
<div class='col-md-offset-3 col-md-6'><!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
<div class="col-md-offset-2 col-md-10"><!-- you missed md from offset, end class not needed -->
<div class="products">
{{bike.name}}
</div>
</div>
</div><!--bike controller row-->
Here's a bootply which is a great way to test before you add
I am trying to make a row of having 5 divs in a column width of 4 in bootstrep.
So the code be -
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<!-- Main Content -->
<!-- Weather -->
<div class="element">
<div class="header_text">
Weather
</div>
<div class="element_body description_text">
<div class="row">
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
<div class="col-md-2">sss</div>
</div>
</div>
</div>
<!-- End Weather -->
<!-- End Main Content -->
</div>
</div>
</div>
So I get a output like-
But problem is done when I change the width of the page. It becomes vertical ins ted of remaining horizontal, like it-
But I don't want it to be changed orientation in any time. So, I want it to be horizontal every time what if the width of the page is changed or not.
Can anyone please help me?
Thanks in advance for helping.
JSFIddle.
Problem:
You are not giving the sm and xs size for it take the default behavior of div i.e. display: block;.
Solution:
So change md to xs.
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<!-- Main Content -->
<!-- Weather -->
<div class="element">
<div class="header_text">
Weather
</div>
<div class="element_body description_text">
<div class="row">
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
<div class="col-xs-2">sss</div>
</div>
</div>
</div>
<!-- End Weather -->
<!-- End Main Content -->
</div>
</div>
</div>
<!-- End Content -->
I am publishing a site using bootstrap 3. I'd like to center align the site logo for mobile view where as it must remained left aligned on all other devices. Is there any possible way to handle this issue I am totally stuck.
<div class="header_cont">
<div class="container">
<header class="row header">
<h1 class="logo col-lg-7 col-md-7">Property Ad</h1>
<div class="sign_up_section col-md-5 col-lg-5 pull-right">
<div class="social_links">...</div><!--social_links -->
<div class="sign_up_links">...</div><!--sign_up_links -->
</div><!--sign_up_section -->
</header><!--header -->
</div>
I am working with Bootstrap and am having a strange layout issue in my fixed (not responsive) layout.
Using the BS scaffolding syntax, I have several nested divs in my grid. Usually looks/works fine; however, sometimes when I reload the page divs break throughout the page (header nav, divs in main content, etc.)
I cannot recreate this problem, it just seems to act the way it wants when it wants (again, when I refresh/reload).
Here are screenshots of what the issue looks like when it happens, and what it should always look like:
good 1
http://static.inky.ws/image/3486/ss-1-good.jpg
bad 1
http://static.inky.ws/image/3485/ss-1-bad.jpg
(I cannot add more URLS to this post; if you want to see more, the above 2 can be changed to 3487/ss-2-good.jpg & 3484/ss-2-bad.jpg)
Steps taken (to no positive effect):
-redo the grid
-go through my custom CSS line by line, seeing if removing portions solves the problem
-confirm paths, file order in webpage, etc.
-search, search and search again
Here is the basic HTML structure:
<div class="container">
<?php require ("includes/nav-top.php") ;?>
<!--page header -->
<div class="row" id="">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
... content ...
</div>
<div class="row-fluid">
<div class="span8">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
<!--row-fluid-->
</div>
<!--span8-->
<div class="span4">
... content ...
</div>
<!--span4-->
</div>
<!--row-->
<div id="" class="row">
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
<div class="span4">
... content ...
</div>
</div>
<!--row-->
<footer>
... content ...
</footer>
</div>
<!--container-->
I am loading the external files like this:
HEAD:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
;
<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-config.css">
<link rel="stylesheet" href="css/font-awesome.css">
<script src="js/vendor/modernizr-2.6.1-respond-1.1.0.min.js"></script>
BEFORE the closing BODY tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<?php require('includes/i-modal.php');?>
<?php require('includes/i-googleAnalytics.php');?>
<?php require_once('includes/i-js.php'); ?>
NOTES:
-like I said, this could happen 10x in a row, then the next 5 refreshes/reloads and it looks fine
-in the above files loaded in there is an include for Fancybox (i-modal.php) as well as custom JS (i-js.php). There is no CSS or anything else in those files which seems like it might trigger this.
-currently the BS overwrites (bootstrap-config.css) is empty; seemingly, when I add anything to it the problem kicks in, whether or not what little I add has margin or padding.
-from my research it looks like my use of "row-fluid" for nested grid sections is allowable in the otherwise fixed layout
-so far, testing on Safari / OSX, have not seen the problem in other browsers, but as I said it happens when it chooses to.
SO. After all this, I guess I am wondering what these symptoms might suggest to the knowledgeable out there. Bootstrap is outstanding, in many ways the tool of my dreams - has anyone experienced anything like this?
Thanks for reading this.
First of all you have some bad structure in your layout it should look like this:
<div class="row" id="">
<div class="span6">
<div class="row">
<div class="span3">
... content ...
</div>
<div class="span3">
... content ...
</div>
</div>
</div>
<div class="span6">
... content ...
</div>
</div>
<div class="row">
<div class="span12">
... content ...
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div class="row-fluid">
<div class="span6">
... content ...
</div>
<div class="span6">
... content ...
</div>
</div>
</div>
</div>
You have to follow this rules:
don't use row-fluid in fixed layout.
full width span is 12.
content have to be in span - ALWAYS
sub-spans have to be in rows - ALWAYS
a sum of spans in sub-row have to be equal of container span (that don't concerns row-fluid) eg. in span8 you can place a row with span6 and span2
don't mess with bootstrap CSS if you are not SURE what you're doing
check if you didn't accidentally name some custom CSS classes same way as in BS
Fix those and it should fix your display problems.