I have three elements in my layout, top bar, content and bottom bar.
I am using twitter bootstrap 4
On mobile I want them to stack as such:
top bar
content
bottom bar
on desktop I want this:
content top bar
bottom bar
a visual guide:
How do I even? I can't seem to get them to line up properly and I'm way down the bottom of a rabbit hole here so I'm asking the stack.
code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class=container>
<div class=row>
<div class="col-12 col-md-5 order-md-2">
<h3>Top Bar</h3>
</div>
<div class="col-12 col-md-7 order-md-1">
<h3>Content</h3>
<p>A bit of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac turpis ac massa mollis posuere.</p>
<p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p>
<p>Praesent imperdiet a nisi at aliquet. Curabitur velit mi, vestibulum sed molestie non, egestas sit amet elit.</p>
<p>Donec commodo tincidunt ligula sed pharetra. Etiam efficitur blandit laoreet. Aliquam eu pellentesque dui, eu accumsan dolor. Vestibulum congue facilisis porta. Praesent venenatis, risus eu mollis varius, erat est ornare felis, in rhoncus arcu metus eget ante.</p>
</div>
<div class="col-12 col-md-5 order-md-2 offset-md-7">
<h3>Bottom Bar</h3>
</div>
</div>
</div>
</body>
Either disable flex on Bootstrap or add a modifier on the row and set
display: block;
Float the middle child left, and then float the top and bottom bar right. Also remove the offset so it fills in the gap gracefully.
This should get you what you want on desktop; of course you will need to remove those for your mobile breakpoint.
<div class="container">
<div class=row style="display: block;">
<div class="col-12 col-md-5 order-md-2" style="float:right;">
<h3>Top Bar</h3>
</div>
<div class="col-12 col-md-7 order-md-1" style="float:left;">
<h3>Content</h3>
<p>A bit of Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac turpis ac massa mollis posuere.</p>
<p>Duis urna purus, sagittis eget fermentum in, aliquam sed est.</p>
<p>Praesent imperdiet a nisi at aliquet. Curabitur velit mi, vestibulum sed molestie non, egestas sit amet elit.</p>
<p>Donec commodo tincidunt ligula sed pharetra. Etiam efficitur blandit laoreet. Aliquam eu pellentesque dui, eu accumsan dolor. Vestibulum congue facilisis porta. Praesent venenatis, risus eu mollis varius, erat est ornare felis, in rhoncus arcu metus eget ante.</p>
</div>
<div class="col-12 col-md-5 order-md-2" style="float:right;" >
<h3>Bottom Bar</h3>
</div>
</div>
</div>
You can use the order class to reorder your elements when changing viewports.
Check it here: https://getbootstrap.com/docs/4.0/layout/grid/#reordering
Related
Here's the basic html structure I'm using:
<main>
<article>
<header></header>
<div class="article-content"></div>
</article>
</main>
<aside>
<div class="aside-content"></div>
</aside>
By using Bootstrap 4 I'm positioning main section and aside element side by side:
<div class="row">
<div class="col-md-8">
<main>
<article>
<header></header>
<div class="article-content"></div>
</article>
</main>
</div>
<div class="col-md-4">
<aside>
<div class="aside-content"></div>
</aside>
</div>
</div>
Which gives me this:
However what I'd like to achieve is to make sidebar content start at the same point as article content, i.e. below the header portion, like this:
But I need to maintain the basic HTML structure that was in the beginning. The point is that aside element should remain outside of the main element, but it's content should start below header element (which is a child of main element).
It's fairly easy to achieve this with jQuery, by finding out calculated height of header and then set it as the top padding in aside.
Is it possible to achieve this with just CSS?
Can you modify the html so that the header sits on another row? If so you can add another row on top with just the header in it with a .col-md-8 so that is spreads as wide as the article content.
Here is a jsfiddle
<div class="row">
<div class="col-md-8">
<header><h1>Some long Header of an article</h1></header>
</div>
</div>
<div class="row">
<div class="col-md-8">
<main>
<article>
<div class="article-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu cursus lorem. Duis fermentum erat id ex porttitor, eget sollicitudin lorem blandit. Duis tellus leo, dictum a mauris sed, sollicitudin aliquam enim. Maecenas purus orci, luctus nec orci eu, tempor volutpat tellus. Aliquam pretium lorem justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur sollicitudin nisi ipsum, quis dignissim turpis cursus at. Donec euismod egestas sapien, at dignissim urna eleifend fringilla. Nunc malesuada velit eu nunc faucibus fermentum. Vestibulum tempus in arcu vel posuere. Fusce efficitur pretium dolor, eu condimentum turpis. Nam gravida bibendum sapien nec hendrerit. Proin leo nulla, elementum ut augue sit amet, lobortis efficitur quam.</div>
</article>
</main>
</div>
<div class="col-md-4">
<aside>
<div class="aside-content"><h3>Sidebar</h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
</aside>
</div>
</div>
I need to place two consecutive lines with half the text aligned left and half aligned right and after them another paragraph. I'm trying like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML Page</title>
<style>
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div>
<div>
<p class="left">Left align.</p>
<p class="right">Right align.</p>
</div>
<div style="clear: both;">
<p class="left">Left align.</p>
<p class="right">Right align.</p>
</div>
<div style="clear: both;" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula neque, tempus ut dictum in, feugiat non sem. Nam ultricies cursus sodales. Duis est justo, hendrerit non accumsan vitae, rutrum vel elit. In quis elit purus. Aenean nec massa elementum, laoreet augue sed, gravida felis. Nullam nec faucibus nisl. Donec vel nunc vitae justo auctor placerat ut eu purus. Duis ut porta felis. Fusce mollis, nibh a cursus consectetur, lorem metus lobortis felis, ac gravida sapien purus non enim. Nam pharetra dolor nisi, in scelerisque eros fermentum ut.
</div>
</div>
</body>
</html>
But there is a bigger vertical spacing between the first two lines than between the second line and the following <div>.
Do you know how to solve the problem, or another way to obtain the expected result? Thanks.
That is just because your p tag has this top and bottom margin and on the other side, the div with bigger content does not have the top margin.
Solution: remove the top-margin from p tag. See eg below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML Page</title>
<style>
p{
margin-top:0;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
</head>
<body>
<div>
<div>
<p class="left">Left align.</p>
<p class="right">Right align.</p>
</div>
<div style="clear: both;">
<p class="left">Left align.</p>
<p class="right">Right align.</p>
</div>
<div style="clear: both;" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula neque, tempus ut dictum in, feugiat non sem. Nam ultricies cursus sodales. Duis est justo, hendrerit non accumsan vitae, rutrum vel elit. In quis elit purus. Aenean nec massa elementum, laoreet augue sed, gravida felis. Nullam nec faucibus nisl. Donec vel nunc vitae justo auctor placerat ut eu purus. Duis ut porta felis. Fusce mollis, nibh a cursus consectetur, lorem metus lobortis felis, ac gravida sapien purus non enim. Nam pharetra dolor nisi, in scelerisque eros fermentum ut.
</div>
</div>
</body>
</html>
I'm trying to create the layout below in Bootstrap 3.
I can achieve layout shown under 'sm', and with flexbox I want to swap div 1 and 2 for xs screens. The problem is when I make the containing div a flexbox, it pushes down div 3 on the sm layout, so that it is underneath div 2.
<!--[2 Column]-->
<div class="row flex-container">
<!--[DIV 2]-->
<div class="col-xs-12 col-sm-4 flex-item">
<p class="portfolio-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et turpis mi. Maecenas ultrices orci mi, eu pellentesque nunc laoreet consequat. Nulla viverra nunc elit. Nam accumsan auctor pulvinar. Duis dignissim quam id lorem molestie, et accumsan turpis dapibus. Vivamus vitae ligula a augue luctus dignissim. Integer condimentum mauris eget arcu sodales, id hendrerit lorem laoreet. Suspendisse quis dolor molestie ante consequat finibus. Mauris mollis efficitur velit, at facilisis arcu sodales fermentum. Donec sed elit sed eros dapibus consequat vel quis ante. Morbi accumsan feugiat magna in accumsan. Suspendisse eu tincidunt odio. Aenean ut dignissim nisi, ac condimentum neque. Nulla vitae sollicitudin sapien.
</p>
</div>
<!--[/DIV 2]-->
<!--[DIV 1]-->
<div class="col-xs-12 col-sm-8 flex-item">
<!-- main image-->
<img class="img mb-20" src="img/6.jpg"/>
</div>
<!--[/DIV 1]-->
<!--[DIV 3]-->
<div class="col-xs-12 col-sm-8 flex-item">
<img class="img" src="img/1.jpg"/>
<img class="img" src="img/2.jpg"/>
<img class="img" src="img/3.jpg"/>
</div>
<!--[/DIV 3]-->
</div>
<!--/[2 Column]-->
And the CSS
.flex-container {
display: flex;
flex-wrap: wrap;
}
If I remove 'flex-container' from my containing div class, it then goes back to being as I would like it to be in the picture above. Is there a way to solve this so that I can have my correct layout for sm, even with flexbox?
I originally tried to solve this using Masonry, but a Stackoverflow user suggested flexbox instead (which I'd not used before) so hopefully I'm on the right track. If not.. any pointers would be grand!
Here is a JS Fiddle with the media query and flexbox ordering included.
Use the Boostrap grid columns like this..
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4 pull-right">
<div class="well">
<h4>1</h4>
</div>
</div>
<div class="col-xs-12 col-md-8">
<div class="well tall">
<h4>2</h4>
</div>
</div>
<div class="col-xs-12 col-md-4 pull-right">
<div class="well">
3
</div>
</div>
</div>
</div>
Demo: http://www.codeply.com/go/94pLz9xLab
I am trying to create something like image on left and content on right and alternate order. As you can see my picture below the second one of the image is not on the right side. And is not responsive on smaller screen size. Please help!
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<title>Example</title>
<style>
body {
margin-top: 50px;
}
.img-1 {
height: 250px;
width: 350px;
margin: 10px 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6" >
<img class="img-1" src="img-1.jpg">
</div>
<div class="col-md-4 col-sm-4">
<h3>h3 title</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6" >
<img class="img-1" src="img-1.jpg">
</div>
<div class="col-md-4 col-sm-4">
<h3 class="">h3 title</h3>
<p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
And this is not responsive on smaller screen size, How can I fix it?
Your help much appriciate!
To switch the order so the picture is on the right, in your second row the first div with the class="col-md-6 col-sm-6" should have the h3 and p in it, and then the second div in that row with class="col-md-4 col-sm-4" should have the img in it. To make the images responsive, add the "img-responsive" class in the img tags, and make the height and width you defined in the CSS a max-height or max-width so the images can scale down to a smaller height/width to fit in smaller screens.
Use can use .col-sm-push-* and .col-sm-pull-* to switch the ordering of grid columns. Here is reference:http://getbootstrap.com/css/#grid-column-ordering.
To make the images responsive, add the "img-responsive" class in the img tags.
.img-1{
margin-bottom:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6" >
<img class="img-1 img-responsive" src="https://pioneerwoman.files.wordpress.com/2010/11/springy-flower-pot-desserts1.jpg">
</div>
<div class="col-sm-4">
<h3>h3 title</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-push-4" >
<img class="img-1 img-responsive" src="http://www.blog.designsquish.com/images/uploads/jason-whatever-flower-pots.jpg">
</div>
<div class="col-sm-4 col-sm-pull-6">
<h3 class="">h3 title</h3>
<p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
</div>
See if this helps.
Please click the link to see how it works. https://jsfiddle.net/2d7vab0t/
HTML:
<img class="img-1" src="img-1.jpg" width="350px" height="250px">
<div id="container">
<h3>h3 title</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div id="container2">
<img class="img-1" src="img-1.jpg" width="350px" height="250px">
<h3 class="">h3 title</h3>
<p class="">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Nulla vitae elit libero, a pharetra augue. Nulla vitae elit libero, a pharetra
augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel
eu leo. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
CSS:
body {
margin-top: 50px;
}
.img-1 {
border: 1px solid black;
max-width: 50%;
margin: 10px 50px;
}
#media only screen and (min-width:768px) {
img {float: left;}
#container2 {clear: left;}
}
I have an index that link to sections throughout the page but for some reason all of them will only take me to the top of container that contains the sections. See the code below (all of the sections are made up of the same section code (minus section container) listed below but with different schools):
<!-- Outter container -->
<div class="container chapter">
<!--Section Index-->
<div class="container chapters-index">
School |
</div>
<!-- Section container (this is where the anchors link to)-->
<div class="container chapters">
<!-- Section to be linked to -->
<div id="school-id">
<div class="col-md-5 chapters">
<img src="images/chapters/school-logo.jpg" class="school responsive">
<h6>Meets weekly on Wednesday after school, <strong>3:30pm-6pm</strong>.</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis euismod suscipit gravida. Donec non magna pretium, commodo nisl nec, sollicitudin enim. Phasellus lobortis lectus a urna auctor maximus. Donec nibh metus, finibus et rhoncus ut,
aliquam sit amet mauris. Sed odio libero, pretium nec placerat ac, commodo quis mi. Integer aliquam mauris lacus, at finibus nibh fringilla id. Ut congue sit amet tortor nec laoreet. Duis posuere finibus nisi, sed fermentum sapien. Curabitur
porta interdum elit, nec ultrices neque aliquet at. Vivamus eleifend est sit amet hendrerit vehicula. Nulla malesuada metus eget luctus consequat.</p>
</div>
</div>
</div>
</div>
I've been trying to figure out the issue all night! Am I missing something here? Why are my links not going to their appointed anchors?
Seems to work okay for me in the JSFiddle you linked.
My diagram below shows the boundaries of the school-id div, is this correct? The image is part of the school div, and not the categories at the top?
The image is appearing at the top of the anchor, which I believe is correct?
http://jsfiddle.net/tze3uhrL/1/