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.
Related
I'm struggling with creating a dynamic layout which is different for mobile and desktop. The items should be different sorted based on the screen width and the layout should change.
Below is the main objective, where the left layout is for mobile and the right one is desktop:
The content of the blue, purple and yellow div can vary so the height is adjustable. The purple and yellow block must always be on the side of the gray + blue block on desktop.
Right now I have it working for only 3 columns but the 'dynamic' height is duplicated on all columns: Bootstrap 4: sidebar between columns on mobile. Columns under each other layout
To give you a clear idea of the possibilities here are some desktop variations:
I've managed to get it working with floats but the columns align on each other. Also have fixed it with a static max-height for the parent and use column wrap but I don't want to use a static max-height since the content should have a dynamic height..
I don't want to use some glitchy javascript or unsupported grid-css.
Looking forward to ideas/suggestions! Cheers.
You should be able to get this layout to work with a combination of CSS columns (not CSS grid) on "desktop", and flexbox on "mobile".
<div class="container">
<div class="d-flex d-md-columns flex-column min-vh-100">
<div class="d-md-inline-block light order-0">
light
</div>
<div class="d-md-inline-block blue order-2">
blue
</div>
<div class="d-md-inline-block purple order-1">
purple
</div>
<div class="d-md-inline-block yellow order-3">
yellow
</div>
</div>
</div>
The only extra CSS you'll need is a media query for the columns on larger (md) desktop widths. The the flexbox ordering will kick-in on mobile..
#media (min-width: 768px) {
.d-md-columns {
display: inline-block !important;
column-count: 2;
-webkit-column-gap: 0
-moz-column-gap: 0;
column-gap: 0;
}
}
https://codeply.com/go/QWIlredUTk
This works specifically for this 4 column layout. However, generally speaking flexbox columns do NOT fit together vertically like a "masonry" layout: Is it possible for flex items to align tightly to the items above them?
I think there is no pure CSS solution for this (at least without using CSS-grid or display:contents). Every CSS way I thought had bugs: float & column flexbox simple don't work in this particular case.
Column flexbox cannot wrap correctly an item if we work with a content without fix height and float can't create a "masonry" layout. Also Bootstrap card-columns are not a solution because your main objective is to align left and right column in height.
I know, you don't want glitchy javascript, but I think it is necessary to create your layout. So, I post you my solution (a jquery solution) without use any d-none class to prevent duplicate HTML & SEO problems.
Moreover, you are using Bootstrap and this framework makes extensive use of jQuery so, I think, it not a problem to ask jQuery for a little help. This help:
function move(){
if($(".main .col-lg-8").css('display')=='block'){
$('.purple').insertAfter('.gray');
} else {
$('.purple').insertBefore('.yellow');
}
}
$(window).resize(function(){move()})
$(document).ready(function(){move()})
To move our purple div in second position when .col-lg-8 have display:block
This is all code in action:
function move(){
if($(".main .col-lg-8").css('display')=='block'){
$('.purple').insertAfter('.gray');
} else {
$('.purple').insertBefore('.yellow');
}
}
$(window).resize(function(){move()})
$(document).ready(function(){move()})
.gray{
background-color: gray;
}
.blue{
background-color: blue;
}
.purple{
background-color: purple;
}
.yellow{
background-color: yellow;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="container mt-5">
<div class="row main">
<div class="col-lg-4 d-lg-flex flex-lg-column">
<div class="gray mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales finibus faucibus. Morbi blandit neque a diam laoreet pellentesque. Vivamus in orci sed turpis posuere iaculis quis sed augue. Curabitur lorem magna, bibendum vitae vestibulum nec faucibus. Morbi blandit neque a diam laoreet pellentesque. Vivamus in orci sed turpis posuere iaculis quis sed augue. Curabitur lorem magna, bibendum vitae vestibulum nec, feugiat eget justo. Ut aliquam quis velit non euismod. Ut vehicula, sem quis cursus pretium, purus libero tincidunt eros, vitae hendrerit nisi mi vitae erat. Curabitur augue purus, sagittis tempor volutpat quis, congue sed mi. Sed gravida odio sed orci iaculis tincidunt. Etiam ac mauris sit amet turpis consequat fermentum ut vitae sem. Aliquam tincidunt convallis sem.</div>
<div class="blue flex-fill mb-4 mb-lg-0">
Lorem ipsum dolor sit amet, consectetur.Quisque sodales finibus </div>
</div>
<div class="col-lg-8 d-lg-flex flex-lg-column">
<div class="purple mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. faucibus. Morbi blandit neque a diam laoreet pellentesque. Vivamus in orci sed turpis posuere iaculis quis sed augue. Curabitur lorem magna, bibendum vitae vestibulum nec, feugiat eget justo. Ut aliquam quis velit non euismod. Ut vehicula, sem quis cursus pretium, purus libero tincidunt eros, vitae hendrerit nisi mi vitae erat. Curabitur augue purus, sagittis tempor volutpat quis, congue sed mi. Sed gravida odio sed orci iaculis tincidunt. Etiam ac mauris sit amet turpis consequat fermentum ut vitae sem. Aliquam tincidunt convallis sem. </div>
<div class="yellow flex-fill">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
</div>
</div>
Waiting a pure CSS solution, this could be a way.
I am using Bootstrap 4 on my web page, which uses the bootstrap grid layout in flex mode.
In one of the columns I have a button that I want to fill the column. This is done by setting the button to 100% height using CSS.
This works without any problem in all browsers except Safari, where it seems to be ignored.
The html I'm using looks like this:
<div class="container">
<div class="row">
<div class="col-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius.
</div>
<div class="col-1">
<button class="btn btn-primary" type="button">Lorem ipsum</button>
</div>
</div>
</div>
In addition to regular bootstrap code I have added the following css:
button { height: 100%; }
Here is an codepen example that shows the issue http://codepen.io/anon/pen/BppMvw
Does anyone have any suggestion on how to solve this? Since the other columns in the row may be of variable hight, it's not possible for me to set a fixed height. Javascript is not an option either.
A solution might be to set flex:1 on the button and make its parent a flex container. See here.
I have a parent class which contains 4 sub-classes, each of which contain 2 more classes. The problem I have is all sub-classes have the same name! As its a wordpress theme I cant change that html so I simply want to use a custom css sheet to change each one individually. The content differs for each class, so is there a way using child elements or the like?
<div class="feature-box-main site-aligner">
<div class="feature-box ">
<img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon1.png">
<div class="feature-title">Page Title 1</div><!-- feature-title -->
<div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
Read More >
</div><!-- feature-box -->
<div class="feature-box ">
<img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon2.png">
<div class="feature-title">Page Title 2</div><!-- feature-title -->
<div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
Read More >
</div><!-- feature-box -->
<div class="feature-box ">
<img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon3.png">
<div class="feature-title">Page Title 3</div><!-- feature-title -->
<div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
Read More >
</div><!-- feature-box -->
<div class="feature-box last">
<img src="http://orchardeducation.co.za/wp-content/themes/gravida-pro/images/icon4.png">
<div class="feature-title">Page Title 4</div><!-- feature-title -->
<div class="feature-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget sapien nec eros ultricies eleifend non imperdiet tortor. Duis vulputate dignissim ante. Suspendisse vehicula quam vel pharetra molestie.</div>
Read More >
</div><!-- feature-box --><div class="clear"></div>
</div>
Select the first div with:
.feature-box-main.feature-box:nth-child(1) {
// styles
}
and the second div with
.feature-box-main.feature-box:nth-child(2) {
// styles
}
simply use the n(th) child selector:
Notice the space between the classes, otherwise you are looking for one element with both classes.
.feature-box-main .feature-box:nth-child(1) {
/*styles for first div here*/
}
.feature-box-main .feature-box:nth-child(2) {
/*styles for second div here*/
}
Also, since you mentioned you want to change the image and title, if you mean not just css changes maybe jQuery come in hand like this:
var div1 = $('.feature-box-main .feature-box').eq(1);
var div2 = $('.feature-box-main .feature-box').eq(2);
//for example:
div1.children('.feature-title').html('new Title');
div2.children('img').attr('src','new-imge.jpg');
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>
Having read carefully the article about "block formatting context" (BFC) I still have one basic question which is whether is possible or not to create a BFC, writing in first place the "overflow: hidden" div followed by the floated div (either left or right).
It is easier with an example than with words.
Suppose a CSS layout like this one:
.container{
background-color:#ccc;
padding:10px;
}
.secondary{
float:right;
width:200px;
background-color:yellow;
margin-left:10px;
padding:10px;
}
.primary{
overflow:hidden;
}
This works fine when the content of the secondary container is not enough long so that mailboxes trim the mail body at a not desired point. When its content is too long, some mailboxes trim the mail content. As a result of that, the only content displayed is indeed the secondary content.
So my question comes as an approach to solve this unfortunate circumstances. I have prepared two JSFiddles. By this way, you can check what I would like to achieve, the means of which for the moment I ignore.
Working BFC: http://jsfiddle.net/vnZ5c/2/
<div class="container">
<div class="secondary">
<strong>.secondary</strong>
<p>This is a secondary content which should not be displayed in any circumstances before the main content. It exists a risk with those mailboxes that trim long emails which would make only visible this secondary content instead of the main content.</p>
</div>
<div class="primary">
<strong>.primary</strong>
<p>This is the primary content, which must appear before anything else, regardless of the length of the secondary content.</p>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt ultrices leo faucibus condimentum. Suspendisse potenti. Phasellus sollicitudin ullamcorper pharetra. Sed sodales sagittis ultricies. Vestibulum feugiat lacus augue, a pellentesque elit tincidunt quis. Vestibulum fringilla aliquet urna, et porttitor velit facilisis ac. Donec euismod fermentum lacus, ac egestas dolor tincidunt vel. Pellentesque at accumsan tortor.</em></p>
</div>
</div>
Not working BFC: http://jsfiddle.net/eZFXH/
<div class="container">
<div class="primary">
<strong>.primary</strong>
<p>This is the primary content, which must appear before anything else, regardless of the length of the secondary content.</p>
<p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt ultrices leo faucibus condimentum. Suspendisse potenti. Phasellus sollicitudin ullamcorper pharetra. Sed sodales sagittis ultricies. Vestibulum feugiat lacus augue, a pellentesque elit tincidunt quis. Vestibulum fringilla aliquet urna, et porttitor velit facilisis ac. Donec euismod fermentum lacus, ac egestas dolor tincidunt vel. Pellentesque at accumsan tortor.</em></p>
</div>
<div class="secondary">
<strong>.secondary</strong>
<p>This is a secondary content which should not be displayed in any circumstances before the main content. It exists a risk with those mailboxes that trim long emails which would make only visible this secondary content instead of the main content.</p>
</div>
</div>
Is it possible to make a "block formatting context" with the floating div written in second place?
Thank you so much!
PS: of course I had the temptation of a table layout...