How can I have this header 'full width'. So that the image is on the left side of the screen. But that the content inside (President Jean ...) is in the grid?
I was thinking about creating a new container.
.container--full { max-width: 1400px; width: 100%; }
My .container grid has a max-width of 1170px. So my new container is wider than .container.
And then set a background-image, position left and background color grey.
Inside that .container--full, create .container
<div class="container--full">
<div class="container">
</div>
</div>
Test with container-fluid.
<div class="container-fluid" style="background-image: url('<?php bloginfo('template_directory'); ?>/images/commission-header.png');">
<div class="container">
<div class="col-sm-3">
<div class="info">
President
</div>
</div>
<div class="col-sm-9">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime obcaecati consequatur illum dolor quasi labore molestiae voluptatum consectetur laborum vel, modi nulla totam blanditiis quam sapiente, suscipit laudantium. Necessitatibus, eos.
</div>
</div>
</div>
CSS
.commission-business {
.container-fluid {
background-color: $grey--lighter;
background-position: left top;
background-repeat: no-repeat;
}
.info {
background: red;
display: block;
padding: 1rem 2rem;
}
}
Just use bootstraps 'container-fluid' class. (learn more)
<div class="container-fluid">
<div class="row>
...
</div>
</div>
Related
I'm having trouble obtaining equal height bootstrap cards with differing length body content with a slick carousel. I've looked at similar answers on here and none of them appear to work in my scenario.
I've managed get equal height slides but for some reason I cannot get the cards within the slides to be 100% height of the slide (parent container). I'm trying to achieve what the Bootstrap class 'card-deck' achieves but in a carousel.
HTML
<div class="container">
<div class="row">
<div class="col-10 mx-auto s_container">
<div class="slider">
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates, rem?</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quasi soluta dolorum pariatur hic porro.</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto magnam esse molestiae est. Nisi aliquam libero dolorem? Qui, enim nam.</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates, rem?</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, quasi soluta dolorum pariatur hic porro.</div>
<div class="card-footer">
More Info
</div>
</div>
<div class="card">
<img class="card-img-top" src="img-ph.jpg" alt="place holder">
<div class="card-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto magnam esse molestiae est. Nisi aliquam libero dolorem? Qui, enim nam.</div>
<div class="card-footer">
More Info
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.s_container{
margin: 0 auto;
padding: 0 40px 0 40px;
width: 100%;
}
.slider{
border: 2px solid red;
}
.slick-track {
display: flex !important;
}
.slick-slide{
margin: 12px;
height: auto;
border: 2px solid green;
}
.slick-frame {
visibility: hidden;
}
An example of running can be found here:
Example
Equal height has been a problem for a lot of developers over the years.
In my opinion you can choose between 2 different solutions:
Javascript solution
You loop over all the cards and save the biggest height. Set all cards to this height with JS after biggest one has been defined.
https://www.bootply.com/LnwZjxWe7L
// Get cards
var cards = $('.card-body');
var maxHeight = 0;
// Loop all cards and check height, if bigger than max then save it
for (var i = 0; i < cards.length; i++) {
if (maxHeight < $(cards[i]).outerHeight()) {
maxHeight = $(cards[i]).outerHeight();
}
}
// Set ALL card bodies to this height
for (var i = 0; i < cards.length; i++) {
$(cards[i]).height(maxHeight);
}
CSS only solution
This one is a bit more complex to explain so here is an example how to do it:
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
<div id="container3"> <!-- added -->
<div id="container2"> <!-- added -->
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Super long text! Wow looks at this text, it is so long it needs to break on multiple lines!</div>
</div>
</div> <!-- added -->
</div> <!-- added -->
I got this solution from here:
https://matthewjamestaylor.com/equal-height-columns
How can I place an image that goes from end of .col-md-4 to the end of the screen?
Here is what I have to do by design - red lines are .container boundaries, text is aligned to the left, and on the right is an image (or slider). I can't do .col-md-8 since the image needs to go as far as the screen is wide.
Can I combine .container and .container fluid somehow? What would you suggest? Image must be visible full width across all desktop sizes.
I currently did this with position absolute but this way the image is cut out and this is not desirable. https://codepen.io/ivan-topi/pen/pGYYjj
If I remove position: relative from .row and place it on .content then I can position image nicely with right: 0 to the end of the screen, but in that case I am not sure how can I position it without overlapping text on the left?
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="img-wrapper">
<img src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
.img-wrapper {
left: 435px;
position: absolute;
width: 100%;
height: 450px;
overflow: hidden;
}
img {
width: 100%;
}
You can consider negative margin while using col-md-8. The trick is to add the amount space on the right as a negative margin to the container inside col-md-8 to create the overflow you want:
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
img {
width:100%;
}
#media (min-width: 768px) {
.negative {
margin-right: calc((720px - 100vw)/2 - 15px);
}
}
#media (min-width: 992px) {
.negative {
margin-right: calc((960px - 100vw)/2 - 15px);
}
}
#media (min-width: 1200px) {
.negative {
margin-right: calc((1140px - 100vw)/2 - 15px);
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8">
<div class="negative">
<img src="https://via.placeholder.com/1300x450" class="d-block">
</div>
</div>
</div>
</div>
</div>
If i understand you, you need this:
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4 p-0 d-flex align-items-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8 p-0">
<img class="img-fluid" src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
And from .img-wrapper remove position:absolute and left: 435px;
Check it here: https://codepen.io/gionic/pen/QYoPqq
I hope it helps you.
I've been searching for an answer all day and have not quite found one.
Using Bootstrap 4, how does one wrap text around an image using d-flex or flex-wrap in with the grid layout with columns and rows. I have provided my code and two image examples. I hope this is possible.
I have viewed this example - https://www.codeply.com/api/run but it's quite different whereas the image is fixed sizing but we need the image to be responsive.
Cheers and thanks in advance.
Example image here with photo
Example diagram here
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container" style="margin-top: 30px;">
<div class="row" style="border: 1px solid #ddd;">
<div class="col-sm-6 col-lg-6 col-xl-5">
<div class="imagebox">
<figure>
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
</div>
<div class="col-sm-6 col-lg-6 col-xl-7">
<div class="row">
<div class="col-12"><small>BPP Rating - 88%</small></div>
<!-- this below line will wrap on all screens -->
<div class="col-6"><small>Online Rating - 88% </small></div>
<div class="col-6 text-right"><small>Total Beds - 50</small></div>
</div>
<hr style="margin: 0.5rem 0;">
<div class="row">
<div class="col-sm-6 col-6"><small>Share Rooms from NZD $30</small></div>
<div class="col-sm-6 col-6 text-right"><small>Private Rooms from NZD $60</small></div>
</div>
<div class="row">
<div class="col-12 d-none d-lg-block d-xl-block">Lorem ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vel postea scripta alienum, eam te enim feugiat ornatus. Exerci quidam melius has ad. Mel ut ludus choro
instructior. Erat dictas antiopam quo ea, pri at audiam offendit.Cetero albucius pri ne, erant nobis aliquip cu sit, eam dolore.</div>
</div>
</div>
</div>
you can try like this, by giving background-image on the row and its property to set it one center of the div
here is an example - https://jsfiddle.net/erymag7b/27/
you can use float:left in .imagebox to wrap text around an image and use clean:both in P tag to let text under an image
https://codepen.io/lichunbin814/pen/yqEOKm?editors=1100
tip : Avoid Inline Styles for CSS Design
.imagebox {
float: left;
margin-right: 1em;
}
div.container {
max-width: 100%;
}
figcaption.imagebox-desc {
top: 0;
position: absolute;
left: 0;
color: white;
background: rgba(4, 4, 4, 0.8);
width: 100%;
padding: 0.7rem 0 0.5rem 1.2rem;
font-size: 1.2rem;
}
.imagebox-inner {
position: relative;
display: inline-block;
}
.img {
width: 100%;
}
#media (max-width: 768px) {
.text {
clear: both;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-12">
<div class="imagebox">
<figure class="imagebox-inner">
<img class="rounded img-fluid" src="https://www.bbh.co.nz/hostelImages/hi_2243_gal.jpg" alt="" />
<figcaption class="imagebox-desc">VERANDAHS<br>
<span class="small">Superior Central Location...</span></figcaption>
</figure>
</div>
<div><small>BPP Rating - 88%</small></div>
<div class="d-flex justify-content-between"> <small>Online Rating - 88% </small> <small>Total Beds - 50</small></div>
<hr class="m3">
<div class="d-flex justify-content-between"><small>Share Rooms from NZD</small><small>Private Rooms from NZD</small></div>
<div class="d-flex justify-content-between"><small>$30</small><small>$60</small></div>
<p class="mt-2 text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque explicabo aspernatur delectus voluptate, nesciunt quibusdam ab reprehenderit, non et temporibus. Aut commodi, voluptates nulla deleniti pariatur vitae vel eos sit asperiores aliquid,Lorem
ipsum dolor sit amet, at assum perpetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No vetua dissentiet
sit, et sea probatus sententiae ullamcorper, voluptatibus signiferumque ex has. No v molestiae recusandae placeat corporis earum assumenda dolorem! Earum necessitatibus tempora enim nisi officiis in. Ducimus illo placeat eveniet.</p>
</div>
</div>
</div>
How is possible to fill-in the height of a row with a cell in the following >>JSFiddle:
.x { height: 50px; }
.row { background: #eee; }
.row>:nth-child(odd) { background: lightblue; }
.row>:nth-child(even) { background: pink; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3">fill height v</div>
<div class="col-xs-9"> <div class="x"> unknown height </div> </div>
</div>
PS. in order to be mobile compatible and also IE 11, I can't use flex
add .row{display: flex}
.x { height: 50px; }
.row {background: #eee; display: flex;}
.row>:nth-child(odd) {
background: lightblue;
}
.row>:nth-child(even) {
background: pink;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-3 cell">fill height v</div>
<div class="col-xs-9 cell">
<div class="x"> unknown height </div>
</div>
</div>
width absolute position jsfiddle.net/kth9vqhf
with display: table jsfiddle.net/kth9vqhf/1
with jQuery https://jsfiddle.net/kth9vqhf/3/
Using jQuery you can calculate the height of .x on the fly and set that as the minimum height for the cell.
$('.col-xs-3.cell').css("min-height", $('.x').height() + "px");
.x {
height: 50px;
}
.row {
background: #eee;
}
.row>:nth-child(odd) {
background: lightblue;
}
.row>:nth-child(even) {
background: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-3 cell">fill height v</div>
<div class="col-xs-9 cell">
<div class="x"> unknown height </div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fill Row Height </title>
<style>
.WrapperRow{float: left; display: table; table-layout: fixed; vertical-align: top; width: 100%;}
.WrapperRow > div{display: table-cell; float: none; vertical-align: top; padding: 10px;}
.bgblue{background-color: blue;}
.cell.bgblue{width: 30%;}
.bgpink{background-color: pink;}
</style>
</head>
<body>
<div class="WrapperRow">
<div class="cell bgblue">
</div>
<div class="cell bgpink">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. In ipsa natus, vel non earum, distinctio iusto reprehenderit alias quisquam possimus, at qui nostrum ad enim totam repudiandae consectetur eius iste? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illum, aut sunt molestias tempora amet maxime ipsum? Vero animi beatae, dicta? Ut repudiandae fugit alias quasi esse culpa. Facere, dolore?
</div>
</div>
</body>
</html>
I've spent a lot of time trying to figure out how I can create a layout similar to this, where the pages content is constrained by the container element's width, but the column on the left has a background that stretches to the far left of the user's screen (the yellow one in the example).
I'm trying to do this with Bootstrap, but it seems impossible as the container element contains the content of the page and also it's background.
Here is the JSFiddle for what I have so far.
Some sample code of the structure:
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Would really appreciate if someone can solve this mystery for me.
Here's the full code:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body{
background: #eee;
}
.left-one{
background: yellow;
height: 500px;
padding-top: 20px;
}
.right-one{
background: #eee;
height: 500px;
padding-top: 20px;
}
.some-content{
background: lightslategray;
padding: 20px 0;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
<div class="container">
<div class="col-xs-6 left-one">
This one's background needs to stretch to the far left, on large screens.
</div>
<div class="col-xs-6 right-one">
This one's background can be that of the body
</div>
</div>
</div>
<div class="some-content">
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
</div>
</div>
Just do what the guy have done in example & use the before element.
DEMO
CSS:
.left-one:before{
background: yellow;
bottom: 0;
content: "";
position: absolute;
right: 100%;
top: 0;
width: 9999px;
}