I'm new to bootstrap still. From what I can tell in terms of layout, you can go with two main options: flex or grid. I'm currently attempting to go with the flexbox method, however I've encountered a problem with width.
My goal is to create three rows (the code I've attached only has 1 row for simplicity) that each have two equal width boxes per row. One box will have a picture and the other box will have text. I also want these boxes to be responsive, so that when the screen is small the boxes stack on top of each other (1 by 1). My only guess for the responsive part is that I use d-md-flex. Here's what I have so far:
<!--Row 1-->
<div class="d-flex flex-column mb-3 text-white">
<div class="d-flex flex-row justify-content-between align-items-center">
<div class="text-center"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" class="img-fluid w-100" alt="Responsive image"></div>
<div class="text-center"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
elit, nec pharetra arcu pretium quis. In vel sapien felis.</p></div>
</div>
My problem is that the image turns out really small and to the left, while the text takes up most of the space on the row. I've attempted playing around with flex-grow/shrink and flex-fill however nothing was changed. Any suggestions (on that and the responsiveness if its not too much to ask)?
.parent {
display : flex;
border : solid 1px;
}
.child {
flex : 1;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<div>Using Flex</div>
<div class="parent">
<div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="child bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
</div>
</div>
<div class="parent">
<div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="child bg-warning"><p class="m-0">Row 2</p>
</div>
</div>
<div class="parent">
<div class="child bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="child bg-warning"><p class="m-0">Row 3</p>
</div>
</div>
<div>Using Grid</div>
<div class="row border border-dark">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">INTRODUCTION: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac rhoncus sem. Vestibulum consectetur
arcu est, at malesuada dolor posuere in. Cras tincidunt est eget ullamcorper mattis. Sed interdum ultricies venenatis. Nam
nunc neque, imperdiet vitae auctor sed, rhoncus quis enim. Maecenas sit amet purus aliquet, gravida purus sit amet, maximus
ligula. Praesent ut enim arcu. Nunc sit amet orci velit. Sed blandit consectetur suscipit. Vestibulum interdum pharetra
elit, nec pharetra arcu pretium quis. In vel sapien felis.</p>
</div>
</div>
<div class="row border border-dark">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 2</p>
</div>
</div>
<div class="row border border-dark">
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-info"><img src="Photos/2019 SB Photos/Whole_Stadium.JPG" alt="Responsive image"></div>
<div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 bg-warning"><p class="m-0">Row 3</p>
</div>
</div>
You can do this.
If you want three rows, you need to use display: flex; as well as flex-direction: column; if you use 3 items they will stand up and the first will be on top, the second after, the third on bottom. if you want to make it any more complex, instead of stacking 3 elements, you can stack 3 more flex boxes, then organize the info from there.
check this out
https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf
let me know if that helps!
i used this sheet every time i'm working in CSS and its a life saver
Related
I have two cards One holding an image an another holding some text. The issue is when I resize the window to test for responsiveness, There is a lot of card space under the image. Is there a way to set card{
height : img height + 10px
}
using CSS?
<div class="container">
<div class="row">
<div class="col-6 card">
<div class="card-body">
<img src="../assets/" class="card-img-top" alt="...">
</div>
</div>
<div class="col-1">
</div>
<div class="col-5 card">
<div class="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sem sit amet ex cursus, a dignissim dolor faucibus. Donec venenatis ut sem vel ultricies. Vestibulum vitae leo sed dolor convallis tincidunt. Integer non eleifend purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non nulla maximus, congue leo ut, eleifend lacus. Cras a.
</p>
</div>
</div>
</div>
</div>
Instead of placing card on the col class, nest the card inside the column like this:
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
<img src="../assets/" class="card-img-top" alt="...">
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col-5">
<div class="card">
<div class="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sem sit amet ex cursus, a dignissim dolor faucibus. Donec venenatis ut sem vel ultricies. Vestibulum vitae leo sed dolor convallis tincidunt. Integer non eleifend purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non nulla maximus, congue leo ut, eleifend lacus. Cras a.
</p>
</div>
</div>
</div>
</div>
</div>
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
This is a two part question. I am trying to emulate this mockup.
I am not quite sure how to do the slight left align of the text as well as adding a circular image in the gray circle area. Currently, my code in this area looks like this:
<div class="index-banner color2">
<div class="section">
<div class="row">
<div class="col s12 center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
<p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
</div>
<div class="row center">
<a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
<span class="divider2"/>
Hackathons
</div>
</div>
</div>
</div>
It looks like this:
How do I make it look remotely close to the mockup? (ignoring the font color and size)
Run below snippet in full page mode.
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="index-banner color2">
<div class="section">
<div class="row">
<div class="col l8 s12 center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
<p class="left-align light ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a s;</p>
<div class="row center">
<a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
<span class="divider2"/>
Hackathons
</div>
</div>
<div class="col l4 s12 center"><img src="https://dummyimage.com/200x200/000/fff" class="circle">
</div>
</div>
</div>
</div>
I am teaching myself how to use Bootstrap columns, ran into a small problem.
When I resize my browser to the smallest size possible (or even halfway through, really) to make the css kick in the columns, instead of resizing to fit in 4 images for row it just becomes a single string of images like so:
Here is my html, I am using bootstrap 3. Any help would be appreciated.
<section class="container" style="padding-bottom: 60px;">
<div class="row">
<div class="col-md-6">
<h2>Passion, precision and simplicity</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor
convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa,
sodales tempor convallis et, iaculis ac massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
<strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque.
Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis
et, iaculis ac massa.
</p>
<!-- divider -->
<div class="divider styleColor">
<i class="fa fa-leaf"></i>
</div>
<!-- brands -->
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
</div>
<div class="col-md-3">
<img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
</div>
</div>
</div>
</section>
Use the smaller breakpoints like col-sm-* to make the vertical stacking happen at a narrower width. Or, you can use col-xs-* to make the columns never stack.
http://bootply.com/4JKga3vGjl
Note: Contrary to popular opinion, there's no problem having columns that total more than 12 units in a single row. It simply causes the row to wrap. From the docs (http://getbootstrap.com/css/#grid)..
"If more than 12 columns are placed within a single row, each group of
extra columns will, as one unit, wrap onto a new line"
I suggest you to take a look at the doc.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
And in a row, you should have only, on total, the number 12.
Like 4 times col-md-3, or 2x4+2x2, etc
In your case, that could be something like this.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<section class="container" style="padding-bottom: 60px;">
<div class="row">
<div class="col-md-6">
<h2>Passion, precision and simplicity</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor
convallis et, iaculis ac massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa,
sodales tempor convallis et, iaculis ac massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla,
<strong>commodo a sodales sed</strong>, dignissim pretium nunc. Nam et lacus neque.
Ut enim massa, sodales tempor convallis et, <strong>iaculis ac massa</strong>.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed,
dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis
et, iaculis ac massa.
</p>
<!-- divider -->
<div class="divider styleColor">
<i class="fa fa-leaf"></i>
</div>
<!-- brands -->
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/1.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/2.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/3.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/4.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/5.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/6.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/7.jpg" alt="">
</div>
<div class="col-md-3 col-sm-3 col-xs-3">
<img class="img-responsive" src="../assets/images/demo/brands/8.jpg" alt="">
</div>
</div>
</div>
<div class="col-md-6">
<div>
<img alt="" class="img-responsive" src="../assets/images/demo/people/woman.jpg">
</div>
</div>
</div>
</section>
It seems that you need to add col-sm-3 and col-xs-3 in addition to col-md-3, to handle your columns in lower sizes.
Check this bootply.
you are using the classes "col-md-..." this targets medium devices.
To set up your layout for smaller devices use "col-xs"
Note, that you can use both "col-xs-12 col-md-6" will display the element in 100% width on small devices and 50% width on medium devices and up.
In the bootstrap grid system, there are only 12 colums per row.
you are trying to use only 12 per row.
check out http://getbootstrap.com/css/#grid-example-basic
Wanted to build something like this: http://s29.postimg.org/n2me4y65z/img.png
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
</div>
<div class="col-md-6">
...
</div>
<img src="test.png" class="img-responsive"/>
</div>
</div>
issue 1
Cause the div2 stay below the div 1. (display: block does not work)
issue 2
Make the image always stay on the right side. (then disappearing "hidden-xs")
If someone is able to help ;/
You don't need the outer div with the full width, Bootstrap automatically assumes a 12-column layout. Just make sure you're enclosing everything within a div with a class of "container". You can set the positioning using floats.
<div class="container">
<div class="row">
<div id="div1" class="col-md-8" style="{float:left;}">
Div 1 Text
</div>
<div id="div2" class="col-md-4" style="{float:right;}">
<img src="test.png" class="img-responsive"/>
</div>
<div id="div3" class="col-md-8" style="{float:left;}">
Div 2 Text
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>Div 1 text</div>
<div>Div 2 text</div>
</div>
<div class="col-md-4">
<img src="test.png" class="img-responsive"/>
</div>
</div>
Add the bootstrap's affix or responsive-helpers to your image if you need to pin it on scroll on hide on small -resolution devices.
How about using Media object or Media list if it fits your case?
<div class="media">
<a class="pull-right" href="#">
<img class="media-object hidden-xs" src="//placehold.it/200x150" alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
Bootstrap3 - Media object
You can play around with this sample here: http://bootply.com/101967