I want to align an image, a title and a text block responsively using the bootstrap layout classes.
For the sm/xs breakpoint the title is supposed to be aligned next to the image in the top left corner, the text in full width (12col) underneath.
For the md breakpoint the text should align beneath the title but next to the image.
Here's a example image of the desired layout.
I assigned a col for each element in one row.
if I assign more than 12 column widths and push down the third column (text) with an offset, it will be aligned in a second row, while I want it to share the height of the image.
My brain hurts, thanks a lot for help and hints in any directions!
This is one of the many html sceletons I tried
<div class="container">
<div class="row">
<div class="image col-sm-6 col-md-6"></div>
<div class="title col-sm-6 col-md-6"></div>
<div class="text col-sm-12 col-md-6 col-md-offset-6"></div>
</div>
</div>
Here you go...
I suggest you to make two text boxes (i.e., text_1 and text_2). Use Bootstrap classes to show/hide them depending on the viewport width. To do so, apply d-md-block d-none to the text_1 and d-md-none d-block to the text_2.
See the snippet below.
#image {
background-color: greenyellow;
height: 200px;
}
#title {
background-color: gold;
height: 30px;
}
#text_1,
#text_2 {
background-color: red;
}
#text_2 {
height: 200px;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<div class='container-fluid'>
<div class='row d-flex justify-content-between mb-3'>
<div class='col-6' id='image'>Image</div>
<div class='col-6 pe-0'>
<div class='col-6 w-100 mb-3' id='title'>Title</div>
<div class='col-6 w-100 h-75 d-md-block d-none' id='text_1'>Text</div>
</div>
</div>
<div class='row'>
<div class='col-12 d-md-none d-block' id='text_2'>Text</div>
</div>
</div>
</body>
</html>
Related
see here:
https://getbootstrap.com/docs/4.0/utilities/flex/#direction
items stretch to full width, but that is not really my desired outcome.
I want the items to keep their original size
what is the proper way of doing that?
Wrap the flex-column element with a col-auto element so that it takes as much space as it needs.
.bd-highlight {
background: #eee;
border: 1px solid
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-auto">
<div class="d-flex flex-column bg-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
</div>
</div>
You may use a container also.
Even better, use a d-flex element to wrap the flex-column element. But if you do, remove the d-flex and flex-column classes from the element itself and instead use w-auto.
.bd-highlight {
background: #eee;
border: 1px solid
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex">
<div class="w-auto bg-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
</div>
this is simple. I'm trying to align-items-bottom a gear svg image to the bottom center of a div. However, it always keeps at the top of the div.
I tried both align-items-center and also align-bottom options.
What happens
How it should be
.gear {
height: 50px;
}
.banner {
height: 70px;
}
<footer>
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-bottom">
<img class="gear d-flex" src="/assets/gear.svg">
</div>
</footer>
There is no align-items-bottom class. The class name is align-items-end..
<div class="container-fluid orange-bg banner d-flex justify-content-center align-items-end">
<img class="gear d-flex" src="//placehold.it/300x70">
</div>
https://www.codeply.com/go/ub6hNpd9TL
Rows and column are your friends in Bootstrap.
So, create a pair, put your image/SVG inside, apply the class d-flex to the column and mt-auto (margin-top:auto) to the image.
Click the "run code snippet" button below:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<footer>
<div class="container-fluid bg-warning banner d-flex justify-content-center">
<div class="row" style="height: 60px;">
<div class="col d-flex">
<img class="gear mt-auto" src="https://placehold.it/30">
</div>
</div>
</div>
</footer>
Working with Material Design Lite, and the initial test is proving unreliable. I'm trying to reproduce the demo shown here: The first Layout Example.
It looks like this, a menu header with a hamburger icon: . However when I try to implement this in my project I get the header with the "Title" text, but no Hamburger Icon. What am I doing wrong?
Here is my code:
<head>
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-desktop.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.cyan-light_blue.min.css">
</head>
<body>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link1</a>
<a class="mdl-navigation__link" href="">Link2</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
</body>
</html>
There's no explicit mention of the menu icon and I believe that is because the default is for it to appear although the documentation is unclear on this point.
Here's the code they list to use for this demo to work:
<style>
.demo-layout-transparent {
background: url('../assets/demos/transparent.jpg') center / cover;
}
.demo-layout-transparent .mdl-layout__header,
.demo-layout-transparent .mdl-layout__drawer-button {
color: white;
}
</style>
<div class="demo-layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
<main class="mdl-layout__content">
</main>
</div>
<div class="mdl-layout__drawer-button"
role="button" aria-expanded="false">
<i class="material-icons">menu</i>
</div>
add this between these two divs mdl-layout__drawer, mdl-layout__content
I have a strange problem: the site I build is using flexbox and LESSHAT. The strange thing I encounter is that it doesn't render correctly i.e. flexbox things seems to be omitted.
However, if I hit F12 and reload the page it is rendered is it should.
What is wrong?
UPDATE - This is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=0, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="c header">
<div class="box">Title</div>
</div>
<div class="box content">
<div class="cv flex page">
<div class="cl item">
<div class="cvl flex item-title">
<div class="cl">Item 1</div>
<div class="cl">
<div class="c button">1</div>
<div class="c button">2</div>
<div class="c button">3</div>
</div>
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 2
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 3
</div>
<div class="cl item-more">
>>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
Style CSS is compiled from this LESS file:
#import "lesshat";
* {
margin: 0;
padding: 0;
}
.header {
width:100%;
height: 48px;
background: #0000ff;
color: #fff;
}
.content {
width:100%;
background: #00ff00;
}
.page {
width:100%;
background: #00ffff;
}
.item {
background: #ffff00;
margin: 5px;
}
.button {
width: 30px;
border: 1px solid #efefef;
}
.box {
.display(flex);
}
.c {
.display(flex);
.justify-content(center);
.align-items(center);
}
.cl {
.display(flex);
.align-items(center);
}
.cv {
.display(flex);
.flex-direction(column);
}
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
The reload and F12 solution seems to indicate one of the following issues:
<link> or <style> tag for CSS outside of the <head>
document.write via a downloaded <script>
Asking for computed styles in related JavaScript code, via:
offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
getComputedStyle()
Changing individual styles in related JavaScript code
Getting and setting styles in a loop
References
Rendering: repaint, reflow/relayout, restyle
I am starting with Twitter Bootstrap and have a question about how layout functions in it. Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row">
<div class="span12">c</div>
</div>
</div>
</body>
</html>
style.css:
div.container
{
background-color:#aaa;
}
div.span4, div.span8, div.span12
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
Adding border to span4 and span8 increases their width and I end up with this:
span4 and span8 get stacked while they should be on the same line. I realize I could decrease their width in my .css file and correct this, or use this:
http://paulirish.com/2012/box-sizing-border-box-ftw/
but does Bootstrap provide means to correct this (not adding extra CSS every time I add or remove border, etc)
The span classes in bootstrap have specific widths so adding a border throws off the total for the row and forces them to wrap. To get around this I usually put the border styling on a div inside the div with the span class. Something like this:
HTML
<div class="row">
<div class="span4">
<div>a</div>
</div>
<div class="span8">
<div>b</div>
</div>
</div>
CSS
.span4 > div, .span8 > div
{
background-color:#eee;
border: 1px solid #888;
border-radius:3px;
}
I had exactly the same issue and playing with the box-sizing didn't help at all. The only solution that worked for me in the end was to use row-fluid.
The difference with row-fluid is that they are based on percentages, not fixed pixels. Then the child spans in a row always add up to 12, instead of adding up to their parent span width in the normal pixel width rows.
So for example yours would now be
<div class="container">
<div class="row-fluid">
<div class="span4">a</div>
<div class="span8">b</div>
</div>
<div class="row-fluid">
<div class="span12">c</div>
</div>
</div>
Now you don't get any issues with changing margins, paddings, or borders.
It sounds like you want your divs to stay on the same line, yes? To do that you'll have to specify a width and float them. Divs tend to always want to stack on top of each other.
Here's a fiddle: http://jsfiddle.net/me73v/
Another option would be to tweak the span widths with JQuery:
$(".some-bordered-container [class*=span] ").each(function(index) {
$(this).width($(this).width()-1);
});
It seems to work well for me. I don't miss the pixels.
You may also use negative margins :
div.span4, div.span8, div.span12
{
background-color: #eee;
border: 1px solid #888;
border-radius: 3px;
margin: -1px;
}
It's not as good a solution as using box-sizing: border-box, IMHO, but it's just worth noticing it works, if you're forced to use box-sizing: content-box.