I'm using Bootstrap 3's grid system (for the first time) to prototype a site. One of the pages should end up laid out like this:
My initial markup is along these lines (I've added <div>s to group elements into what I think I'll want to turn into blocks of grid content.)
<body>
<h1>Plays</h1>
<h2>The Chair</h2>
<div id="intro">
<h3>Intro</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis, dolor felis eleifend diam, nec convallis orci libero eget augue. Vestibulum quis pretium tellus. Morbi nulla nulla, tempus congue viverra id, iaculis ultricies lorem.</p>
</div>
<div class="excerpt" id="excerpt-1">
<h3>Excerpt 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
<p>Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
<p>...</p>
</div>
<div class="excerpt" id="excerpt-2">
<h3>Excerpt 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
<p>Cras at elit nibh, in pretium tellus. Donec id dui mi. Nam malesuada, velit sed porta mollis</p>
<p>...</p>
</div>
</body>
I'm pretty much a beginner with grid-based designs in general, and I'm a little lost as to how I would mark this up with Bootstrap's rows and columns.
The key things in my mind are: 1) #excerpt-2 starts at the same height as #intro, and 2) the start height of #excerpt-1 is before the end height of #excerpt-2. How do I cope with this in a Bootstrap 3 grid? Am I missing an obvious trick? Is there a way of laying this out without changing the document source order?
This code sample will get you started:
<div class="container">
<div id="row-1st" class="row">
<div class="col-xs-12">
<h1>Header</h1>
</div>
</div>
<div id="row-2nd" class="row">
<div class="col-xs-12">
<h1>Header Second</h1>
</div>
</div>
<div id="row-3rd" class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="row">
<div class="col-xs-12">
<h1>Intro</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
Excerpt 1
</div>
</div>
</div>
<div class="col-sm-6 col-xs-12">
Excerpt 2
</div>
</div>
</div>
</div>
</div>
Related
I need to layout a row so that the background of the row expands outside of the row area.
The required layout is in the picture, I want to have the extra white area before the actual text of the row.
When I start a new row and set it's background to white, only the area where the text start is white .
In ur app.css
body{
background-color:white !important;
}
this sets the page background to white
Your HTML structure can look like this:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!--
main: semantic distinction between nav, main, section, ...
bg-light: bs utility: override background-color
-->
<main class="bg-light" role="main">
<!--
section: semantic distinction between sections
typically to create components for CMS integration
-->
<section class="some-container-component my-3">
<div class="container">
<div class="row py-3">
<div class="col">
<p>Provide as much detail as possible about your question and what you've already tried. For this question specifically, your current HTML structure can boost your responses and potentially be more beneficial to future SO users.</p>
</div>
</div>
</div>
</section>
<section class="some-fluid-component my-3">
<!-- container-fluid: stretch full-width -->
<div class="container-fluid">
<div class="row py-3">
<!-- bg-white: override background-color -->
<!-- px-0 px-sm-3: fix on small screen alignment -->
<div class="col bg-white px-0 px-sm-3">
<!-- container: align the content -->
<div class="container">
<div class="row py-3">
<div class="col">
<h2 class="text-uppercase">Study history</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id lectus egestas, tincidunt nisl tristique, congue urna. Vestibulum vel iaculis tortor, non finibus eros. Donec nec bibendum mauris. Vivamus maximus velit et vulputate ullamcorper.
Integer sit amet sem vitae nibh auctor blandit vitae sit amet est. Mauris porttitor a nibh eu fringilla. Integer imperdiet rutrum aliquam. Pellentesque vel dictum lectus, vitae interdum tellus. Nullam consequat lorem a venenatis consequat.
Vivamus dictum nunc eget suscipit volutpat. Mauris nec elit et ante efficitur pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
Hope this suits your needs.
I am trying to achieve the following layout:
I have been able to do this more or less with two issues:
The columns overlap with the image
The circles are not centered. Moreover when I see this on the mobile, amongst other issues, the two circles stack on top of each other.
Here's my HTML:
<div class="container"> <!-- can't change this -->
<div class="col-md-8 column"> <!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img alt="Some Image" src="http://lorempixel.com/340/340/" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="circle">450
<br> reviews </div>
<div class="circle">4.2 million
<br> readers </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet
</p>
</div>
</div>
</div>
</div>
Live Demo
Please help resolve these issues.
It doesn't necessarily overlaps, in this particular case, simply give the image img-responsive class so the width of the image is always at max 100%.
To solve the circle issues, you can put them inside a col-xs-6 so they don't stack on top of each other.
Here is a demo: https://codepen.io/anon/pen/WMEMbW
<div class="container">
<!-- can't change this -->
<div class="col-md-8 column">
<!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img alt="Some Image" src="http://lorempixel.com/340/340/" class="img-responsive" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="center-block">
<div class="col-xs-6">
<div class="circle">450
<br> reviews
</div>
</div>
<div class="col-xs-6">
<div class="circle">4.2 million
<br> readers
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
I guess you should be using the help of some media queries as well.
Have made some changes to the demo you shared.
Updated Demo
CSS
.circle {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
margin-right: 10px;
width: 200px;
height: 200px;
font-size: 35px;
border-radius: 50%;
color: #fef;
background: #000
}
.img-left {
max-width: 100%;
}
.circle-wrapper {
text-align: center;
}
#media (max-width:500px) {
.circle-wrapper .circle{
width: 150px;
height: 150px;
font-size: 25px;
}
}
HTML:
<div class="container"> <!-- can't change this -->
<div class="col-md-8 column"> <!-- can't change this -->
<!-- can change anything below this -->
<div class="row">
<div class="col-md-3">
<img class="img-left" alt="Some Image" src="http://lorempixel.com/340/340/" />
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row circle-wrapper">
<div class="circle">450
<br> reviews </div>
<div class="circle">4.2 million
<br> readers </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
I'm trying to set a bottom margin to the div with the class "thisrow" but couldn't get it working. Basically, i want that row to be at the bottom (footer) of the card.
here's the code:
<div class="leftbar" style="margin-top:10px;">
<div class="row">
<div class="col-md-4">
<div style="background:#ffc016; height:150px;">
<div class="text-center">
Company Name
</div>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-10">
<h4>Summer Communication Intern</h4>
</div>
<div class="col-md-2 text-right heart"><span class="glyphicon glyphicon-heart-empty"></span></div>
</div>
<div class="row">
<div class="col-md-3"><small>Nike Inc</small></div>
<div class="col-md-3"><small>England</small></div>
<div class="col-md-3"><small>Internship</small></div>
<div class="col-md-3"><small> </small></div>
</div>
<div class="row thisrow">
<div class="col-md-2"> </div>
<div class="col-md-10 text-right heart">
<div class="btn-group" role="group" aria-label="...">
<span class="btn btn-default monthly"><small>Save</small></span>
<a class="btn btn-default applynow">View</a>
</div>
</div>
</div>
</div>
</div>
</div>
http://i.stack.imgur.com/6KEpg.png
In my experience, positioning something at the bottom right is best done by postioning it absolute. This is by far the easiest and most 'dynamic' way of doing this. The css is not that hard:
.leftbar {
position: relative;
}
.bottom-right {
position: absolute;
bottom: 0;
right: 15px; /* == padding of .row in TB3 */
}
This does require you to move that button group directly into the .leftbar, so it uses the correct element to position against. This is nessecary since a .col gets postion relative by default in TB3.
I went ahead and cleaned up your HTML while I was at it. There where a lot of elemnts in there that are not required, as you can see. The result of the markup below should be the same as your code,and is a lot cleanier and easier to understand imo:
<div class="leftbar row" style="margin-top:10px;">
<div class="col-xs-4 text-center" style="background:#ffc016; height:150px;">
Company Name
</div>
<div class="col-xs-8">
<a href="#" class='pull-right'>
<i class="glyphicon glyphicon-heart-empty"></i>
</a>
<h4>Summer Communication Intern</h4>
<ul class="row">
<li class="col-xs-3">
<small>Nike Inc</small>
</li>
<li class="col-xs-3">
<small>England</small>
</li>
<li class="col-xs-3">
<small>Internship</small>
</li>
</ul>
</div>
<div class="btn-group bottom-right" role="group" aria-label="...">
<span class="btn btn-default monthly">
<small>Save</small>
</span>
<a class="btn btn-default applynow">
View
</a>
</div>
</div>
and a demo: http://jsfiddle.net/2tg55z5n/
(note that I changed your col classes to xs just so they would show up in that small fiddle panel, you can just as easy change them back to md of course)
Try setting margin to the button division
<div class="btn-group" role="group" aria-label="..." style="margin-top:_px">
<span class="btn btn-default monthly"><small>Save</small></span>
<a class="btn btn-default applynow">View</a>
</div>
I think you should use an additional container to get your buttons together with the bottom part.
see here for an example of working with containers
Containers example
Bootstrap 3 Container Examples and Common Misuse
View in Desktop mode
Demo by scotch.io
Rows are orange
Toggle Padding to help visualize even more
<main>
<section id="with-container-example">
<h2>With Container</h2>
<div class="container">
<div class="row">
<p class="absolute-example">
This is positioned-absolute, relative to the row to help visualize
</p>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div>
</div>
</section>
<section id="with-no-container">
<h2>With No Container</h2>
<div class="row">
<p class="absolute-example">
This is positioned-absolute, relative to the row to help visualize
</p>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div>
</section>
<section id="with-container-fluid">
<h2>With Container-Fluid</h2>
<div class="container-fluid">
<div class="row">
<p class="absolute-example">
This is positioned-absolute, relative to the row to help visualize
</p>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
<div class="col-xs-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
</div>
</div>
</div>
</section>
</main>
I am using Boostrap 3 for some website I am creating, what i want to make i next.
Here is a code
<section class="container-fluid">
<div class="container">
<div class="row">
<div class="col-md-6"><img class="img-responsive" src=
"http://webdesignledger.com/wp-content/uploads/2009/09/logo_design_4.jpg" /></div>
<div class="col-md-6">
<h2">Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean eu sollicitudin felis. Vestibulum vitae imperdiet nibh. Curabitur euismod
auctor libero sit amet varius. Maecenas eu porta libero. Pellentesque et sem et
turpis scelerisque hendrerit vel ac nibh. Nam tempor ullamcorper scelerisque.
Aenean accumsan ac justo ac laoreet. Aliquam eu libero</p>
</div>
</div>
</div>
<section>
Here is working fiddle
http://jsfiddle.net/gSmRw/
On big screen text always to be allign in the middle of the picture, i dont know how big picture will it be, maybe small maybe big, any idea, or help.
Here is picture what i want to make and how it has to look up
http://jsfiddle.net/gSmRw/3/
I've basically added a calss table to the .container element and changed the CSS of this container to be styled as table.
it's important to give the image div wrapper a width of 1% so the cell will not be wider than the image.
I want to affix the following code to the top of the page, below the nav so it is always visible.
<div class="col-lg-5 nopadd affix">
<h3>Project One</h3>
<p>Lorem ipsum dolor ...</p>
</div>
However when I add the bootstrap .affix it makes it ignore the col-lg-5 class that has been applied.
Here is the code I have so far.
http://jsfiddle.net/P9d5k/2/
http://jsfiddle.net/P9d5k/2/embedded/result/
try this fiddle
I just add a 100% width div with the affix class and inside a .container with your grid inside
<div class="affix" style="width:100%;z-index:2">
<div class="container">
<div class="col-lg-5">
<h3>Project One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae. Sed dui lorem, adipiscing in adipiscing et, interdum nec metus. Mauris ultricies, justo eu convallis placerat, felis enim.</p>
</div>
</div>
</div>