I'm developing a small site using Bootstrap 5. And when I've been testing the mobile part using the dev tools in Firefox (IPhone 12/13 selected).
And that breaks the line way to early instead. Surely "558/" should fit. And when I try it on my Iphone 12 it doesn't seem to care about the padding to the right of the container to determine the word break.
Here's how it looks on my phone:
Here how it looks (and should look) in the dev tools for Firefox Iphone 12/13:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="content-container" class="container-xxl mx-auto p-4 bg-white">
<main>
<div class="row p-xl-4">
<div class="container">
<div class="mb-5 col-sm-12 col-md-8 p-4" style="border: 2px solid red">
www.trrrrrrrrrr.co.uk/rrrrrrr/558/rrrwwwwrrrrr-rrrrrr
</div>
</div>
</div>
</main>
</div>
How can I adjust this so it breaks right?
Add text-break class on the div
<div class="text-break mb-5 col-sm-12 col-md-8 p-4" style="border: 2px solid red">
www.trrrrrrrrrr.co.uk/rrrrrrr/558/rrrwwwwrrrrr-rrrrrr
</div>
Or add custom css
.classname{word-break: break-all;}
hope it works for you
Related
I have been experimenting with full responsive layouts between desktops, tablet, and mobile phone sizes for a bit but am having trouble with the layout below.
I was using a grid layout from bootstrap but since it is two columns, as the width shrinks, the second column of two goes below the left, main content section. I want to split it up as the screen caps below state.
This is the starting view:
This is what I want to happen:
This would be the mobile phone view:
So the wide view will get shrunk during testing and I want it to jump to the mobile view where the top side bar goes above the main content and matches the width of the main content while the bottom sidebar does the same thing to the bottom.
It is easy to put both sidebars on the bottom but I want to try to figure out the possibility of splitting it up.
For testing I am using flexbox, css3 and bootstrap5+ and no plugins or javascript.
Solution 1: You can use CSS float feature with float-end and float-start bootstrap classes ref:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid vh-100 vw-100 py-2 bg-light clearfix">
<div class="float-sm-end col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="float-sm-start col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="float-sm-end col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>
Go in Full page view and reduce browser width below 576px to see the responsive change.
I've used breakpoint small col-sm-* here, use different breakpoints to handle different devices.
There are only d-*-grid rules in entire boostrap v5.1.3 CSS file. Rest of the stuff is experimental.
Solution 2: Using flexbox, playing with order and wrap. Improved version of #Rana's answer:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light">
<div class="order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="order-sm-2 order-1 col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="order-sm-3 order-3 col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>
You may want to try out Bootstrap's Flex order utility to achieve the desired result
https://getbootstrap.com/docs/5.0/utilities/flex/#order
Also, share a code example so others can see what you have already tried, I believe you may face some issues even with Flex's Order utility, but that depends on your HTML structure.
For such layout my preference would be to create a copy of the top column for mobile / desktop, and use d- utility to show hide the right one.
<div class="container">
<div class="row ">
<div class="col-12 d-md-none d-block">
<div class="box box-1">sidebar top col (only for mobile)</div>
</div>
<div class="col-md-8">
<div class="box box-2">main col</div>
</div>
<div class="col-md-4">
<div class="box box-3 d-none d-md-block">sidebar top col (only for desktop)</div>
<div class="box box-4">sidebar bottom col</div>
</div>
</div>
</div>
Example - https://jsbin.com/yidokokewu/1/edit?html,css,output
Alternatively if you are already using Bootstrap 5, then you should also consider using CSS Grid, Bootstrap 5 comes with a lot of useful utilities for that -
https://getbootstrap.com/docs/5.1/layout/css-grid/
If you do not want to duplicate your HTML to show one on desktop and the other on mobile then CSS Grid for layout is the best choice - it has some learning curve but it is worth trying out
You can try following properties
flex-flow: column;
flex-wrap: wrap/nowrap;
order: 1/2/3/....;
When screen-size reaches certain limit than change these values like in below snippet
.container {
display: flex;
flex-flow: column;
flex-wrap: wrap;
background-color: lightgray;
}
.containerBox {
width: 50%;
}
.containerBox1 {
background-color: lightgreen;
order: 2;
}
.containerBox2 {
background-color: yellow;
order: 1;
}
.containerBox3 {
background-color: lightblue;
order: 3;
}
#media screen and (max-width: 700px) {
.container {
background-color: grey;
flex-wrap: nowrap;
}
.containerBox {
width: 100%;
}
.containerBox1 {
order: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container vh-100 vw-100">
<div class="containerBox containerBox1 h-25">Sidebar Top</div>
<div class="containerBox containerBox2 h-100">Content</div>
<div class="containerBox containerBox3 h-25">Sidebar bottom</div>
</div>
Using float-start for left column and float-end for right columns is the best solution. col-12 and col-sm-* were used only in order to defining width of columns. Avoid of using row class for parent div because this will force columns to act like flex items.
Also clearfix class for parent div is required to prevent overlapping following elements.
More information about float: https://getbootstrap.com/docs/5.1/utilities/float/
More information about clear-fix: https://getbootstrap.com/docs/5.1/helpers/clearfix/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="clearfix">
<div class="col-12 col-sm-4 float-end bg-secondary">Sidebar Top Area</div>
<div class="col-12 col-sm-8 float-start bg-primary">Content<br>Some Text<br>Some Text</div>
<div class="col-12 col-sm-4 float-end bg-success">Sidebar Bottom Area</div>
</div>
go to enter link description here
or
enter link description here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-9 bg-success">col-12 col-sm-9</div>
<div class="col-12 col-sm-3 bg-warning">col-12 col-sm-3</div>
</div>
</div>
</div>
</body>
</html>
.content {
background-color: #faaa03;
height: 500px;
}
.sidebarTop {
background-color: #ccd0d5;
}
.sidebarBottom {
background-color: #99d2f2;
}
.custom-row {
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="custom-row clearfix d-flex flex-wrap d-lg-block">
<div class="col-12 col-md-8 col-lg-8 content order-2 float-lg-start">Content</div>
<div class="col-12 col-md-2 col-lg-4 sidebarTop order-1 float-lg-end">Sidebar Top Area</div>
<div class="col-12 col-md-2 col-lg-4 sidebarBottom order-3 float-lg-end">Sidebar Bottom Area</div>
</div>
</div>
Give this a Try
I have this design:
Desktop or large screens.
Notes* Red or green boxes are not the same height.
Mobile or lower screens.
How to create this layout type on bootstrap 4 grid or custom CSS grid, what is better?
Thanks, have a nice day.
First of all, if you would like to build a masonry-like columns, a regular Bootstrap grid system won't give you what you want. Instead, you will have to use the card columns or JavaScript masonry plugins.
Layout with Card Columns
<div class="container">
<div id="example" class="card-columns">
<div id="card1" class="card border-success">
<div class="card-body">
<p class="card-text">Card #1 - height: 20rem;</p>
</div>
</div>
<div id="card2" class="card border-success">
<div class="card-body">
<p class="card-text">Card #2 - height: 12rem;</p>
</div>
</div>
<div id="card3" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #3 - height: 18rem;</p>
</div>
</div>
<div id="card4" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #4 - height: 14rem;</p>
</div>
</div>
</div>
</div>
With little bit of styling to setup 1 column for mobile view and 2 for others:
#example.card-columns {
column-count: 1;
}
#media(min-width: 576px) {
#example.card-columns {
column-count: 2;
}
}
You can get something closed to what you would like to achieve:
demo: https://jsfiddle.net/davidliang2008/n3fhyp8c/60/
Problems on Mobile View
Now there is a problem on the mobile view. Since the order of the CSS columns is top to bottom, left to right, and there is no way to change it, the only way to get what you want on the mobile view is to duplicate contents and hide/show them based on the breakpoints...
Again, your second screenshot is missing a red box so I don't know which one you want to put in the middle. Here I am assuming you want to put both red boxes there:
<div id="card1" />
<div id="card2" class="card border-success d-none d-sm-block">
...
</div>
<div id="card3" />
<div id="card4" />
<div id="card2" class="card border-success d-block d-sm-none">
...
</div>
Then you can get something you want to achieve on mobile view:
demo: https://jsfiddle.net/davidliang2008/n3fhyp8c/63/
Why does the border color of the image turn red on Safari Browser on Mac but appears grey(expected color) on other non safari browsers ? The website I am working on is based on Drupal 7.
Can anyone here explain the reason behind this behavior?
<style>
.img-full-width {
width: 100%;
border: solid 1px #cccaca !important;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-6">
<img src=" http://media.istockphoto.com/vectors/language-translation-line-icon-outline-vector-sign-linear-pictogram-vector-id668592940?s=170x170" alt="" class="img-responsive img-full-width">
<div class="row">
<div class="col-md-7 col-sm-7">
<div class="product-pricing product-pricing-min">
<h6>Random Text</h6>
<p>From $.1599.00</p>
</div>
</div>
<div class="col-md-5 col-sm-5">
Select
</div>
</div>
</div>
</div>
</div>
I tried set-resetting css properties in css & also using jquery. Also tested the page on safari for windows, and the display was as expected(grey border) instead of red which appears in safari for Mac.
On all other browsers the css works fine. Also the bug wasn't there during the initial release of the site a year ago. So I assume its a bug in Safari-Mac.
Why doesn't this bootstrap layout work in jsfiddle?:
https://jsfiddle.net/1mdodv7r/2/show/
<body>
<div class="container">
<div class="row">
<div class="col-xs-6"
style="border:solid black 1px;height:200px;">Map</div>
<div class="col-xs-6" style="border:solid black 1px;height:200px;">
<div style="border:solid black 1px;height:100px;width:100%;">SideViewSection1</div>
<div style="border:solid black 1px;height:100px;width:100%;">SideViewSection2</div>
</div>
</div>
<div class="row">
<div class="col-xs-6"
style="border:solid black 1px;height:200px;">MapParameters</div>
<div class="col-xs-6"
style="border:solid black 1px;height:200px;display:none;">
[Empty]
</div>
</div>
</div>
</body>
It works in my local environment withoutissue. I googled and found out that /show/ should be appended to the jsfiddle to display the view in fullscreen. However, even in full screen mode, the bootstrap styling does not seem to be getting applied. Is there a special trick for this or are there other sites which are better for sharing bootstrap code?
Beacuse you have added URL with link tag so this is not working. Just call URL "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap-grid.min.css"
Using Bootstrap 4 Alpha 6. I have the following markup:
<header class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row justify-content-center flex-column-reverse flex-sm-row">
<div class="col-12 col-sm-6">
<h1 class="display-4">
<a class="border-0" href="/#v">Vic</a>
</h1>
<p class="lead mb-100">We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
<p>
<svg>...</svg>Boston, MA, US<br>
</p>
</div>
<div class="col-12 col-sm-2">
<a class="border-0" href="/#v">
<img class="d-flex rounded-circle avatar--m" alt="Random Name" src="/system/profiles/avatars/000/000/001/avatar_m/firefox-copy-link.jpg?1489589655">
</a> </div>
</div>
</div>
</header>
which produces the following result on mobile and desktop respectively:
Mobile
Desktop
The desktop version currently looks perfect. How do I center the image on mobile only?
You can use the Bootstrap 4 responsive margin utils on the image. Use mx-auto to center, and then mx-sm-0 to keep normal margins on sm an up.
<img class="d-flex rounded-circle mx-auto mx-sm-0" src="//placehold.it/80">
Demo: http://www.codeply.com/go/qDSHKeueac