I'm having some trouble ensuring my text and bootstrap button stay in the vertical middle of my bootstrap row as the screen size reduces/expands. There must be an easy way to achieve this...
<div class="cta-promo">
<div class="container">
<div class="row">
<div class="hidden-xs col-sm-7 col-md-7 col-lg-8">
<p class="cta-promo-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere pharetra rhoncus. Sed et lorem vehicula, tincidunt quam at, pharetra nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget mollis magna, a fermentum mauris. Mauris orci neque, egestas nec diam nec, vestibulum vestibulum nibh.</p>
</div>
<div class="col-xs-12 col-sm-offset-1 col-sm-4 col-md-offset-1 col-md-4 col-lg-offset-1 col-lg-3">
<button>Apply for this today</button>
</div>
</div>
</div>
Here's a fiddle https://jsfiddle.net/74vsr332/
The text is hidden on xs view.
To do this in Bootstrap you can combine Flexbox and media queries and add rule when min-width: 768 because you are using sm DEMO
#media(min-width: 768px) {
.flex {
display: flex;
align-items: center;
}
}
Related
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
<div class="border">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-6 block">
<h4>Weddings</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Studio</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Nature</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Events</h4>
</div>
</div>
</div>
</div>
</div>
</div>
I need help achieving a layout like this:
Desired layout
I'm having trouble getting the child divs on the right to match the height of the parent. Any help would be much appreciated.
In order for children to match the width and height of their parent element you need to remove all padding and margins from the child element. You can then set the height and the width of the child to 100%. The height and width would then be controlled by the parent element.
Here is the code for your solution. Please check
.h-100{
height:100%;
}
.h-50{
height:50%;
}
.block{
text-align:center;
background-color:#f2f2f2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
<div class="border">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
<div class="container-fluid h-100">
<div class="row align-items-center h-100">
<div class="col-xs-12 col-md-6 block h-50">
<div class="d-flex align-items-center h-100 justify-content-center"><h4>Weddings</h4> </div>
</div>
<div class="col-xs-12 col-md-6 block h-50">
<div class="d-flex align-items-center h-100 justify-content-center"><h4>Studio</h4> </div>
</div>
<div class="col-xs-12 col-md-6 block h-50">
<div class="d-flex align-items-center h-100 justify-content-center"><h4>Nature</h4> </div>
</div>
<div class="col-xs-12 col-md-6 block h-50">
<div class="d-flex align-items-center h-100 justify-content-center"> <h4>Events</h4> </div>
</div>
</div>
</div>
</div>
</div>
</div>
.container-fluid .row {
display: grid;
grid-template-columns: 1fr 1fr;
}
.container-fluid .row .about-info {
margin: 40px;
}
.container-fluid .row .about-info .border {
border: 1px solid #0086c5;
padding: 40px;
}
.container-fluid .row .about-info .border h3 {
color: #0086c5;
}
.container-fluid .row .about-container .container-fluid {
height: 100%;
background: #0086c5;
}
.container-fluid .row .about-container .container-fluid .row {
display: grid;
grid-template-columns: 1fr 1fr;
justify-items: center;
align-items: center;
height: 100%;
padding: 40px;
box-sizing: border-box;
}
.container-fluid .row .about-container .container-fluid .row > div {
color: #fff;
text-transform: uppercase;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.container-fluid .row .about-container .container-fluid .row > div h4 {
align-self: center;
}
.container-fluid .row .about-container .container-fluid .row > div:not(:nth-child(2n)) {
border-right: 2px solid #fff;
}
.container-fluid .row .about-container .container-fluid .row > div:not(:nth-last-child(-n + 2)) {
border-bottom: 2px solid #fff;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
<div class="border">
<h3>About Me</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
</div>
</div>
<div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-xs-12 col-md-6 block">
<h4>Weddings</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Studio</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Nature</h4>
</div>
<div class="col-xs-12 col-md-6 block">
<h4>Events</h4>
</div>
</div>
</div>
</div>
</div>
</div>
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'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>
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>