I have an Angular MD template that uses a row layout on large screens and a column layout on mobile devices. However, in most standard browsers on mobile phones I get a weird result where the columns are too big. I have different screenschots of how it should look.
PC view
Mobile view how it looks on Chrome/ff/Opera
Mobile standard browser view (problem)
My simplified code (of the 3 rows/columns) is as follows
<div layout="row" layout-align="center center">
<div flex="50" flex-sm="90" flex-md="80" class="row3" layout="row" layout-sm="column">
<div flex="40" flex-sm="100" layout="row" layout-align "center start">
<!-- first column -->
</div>
<div flex="20" flex-sm="100" style="background: #2AFF00">
<!-- second column -->
</div>
<div flex="40" flex-sm="100" layout="row" layout-align="center start">
<!-- Third column -->
</div>
</div>
</div>
I've made a demo on codepen.io with Chrome, but it seems Safari 5.1.7 (windows), as BotanMan said, that flexbox isn't supported and I couldn't even test it on codepen with IE11.
<div layout-sm="column" layout="row" layout-align="center center" layout-padding>
<div class="row3" layout="row" layout-sm="column">
<div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin>
<div class="img"></div>
<h2>Enter the product's serial number</h2>
<button class="md-button">Verify the product</button>
</div>
<div flex-sm="100" flex="20" layout-margin layout-padding style="background: #2AFF00">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum temporibus iure voluptas recusandae molestiae saepe doloremque velit, consequatur minus sint expedita laboriosam magni architecto omnis, reprehenderit labore maxime ea, fugiat officiis. Commodi, aliquam nisi consequatur!</p>
<p>Enim aliquam nihil nam alias consequuntur amet fuga suscipit dolores deleniti ut, quo numquam quaerat harum cupiditate dolore veritatis a sit, nesciunt aut magni commodi sed doloremque quis. Voluptatum cupiditate commodi, magni consequatur, eveniet aut.</p>
<p>Sit quae natus quibusdam nesciunt quo rem totam sequi dolorem sint eum perspiciatis molestias illum debitis, nobis eos dolorum. Sunt, perspiciatis voluptas possimus, laboriosam officiis recusandae animi in, nisi suscipit ipsum eaque assumenda odit laudantium!</p>
</div>
<div flex-sm="100" flex="40" layout="column" layout-align="start center" layout-margin>
<div class="img"></div>
<h2>Click the button below to enable your webcam and start the scanning</h2>
<button class="md-button">Scan W/ webcam</button>
</div>
</div>
</div>
According to caniuse.com, every latest versions of browsers should be able to use flexbox. *See the link for further compatibility infos.
*BTW you are missing one '=' in the second 'layout-align' directive.
Related
New to Bootstrap and using version 5-2-0
In my layout I wanted to have the image of the cat take up one side and then have the content and form on the other size (content first then form underneath) but I can't get it to work.
<div class="grid">
<div class="g-col-6 g-start-1">
<img src="http://placekitten.com/g/200/300" alt="kitty kitty">
</div>
<div class="g-col-6 g-start-6">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
</div>
<div class="g-col-6 g-start-6">form</div>
</div>
Codepen:
https://codepen.io/emmabbb/pen/ExRmgZE
This should do.
Code:
<div class="row">
<div class="col-6">
<img src="http://placekitten.com/g/200/300" alt="kitty kitty">
</div>
<div class="col-6">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
<div>form</div>
</div>
</div>
In you're code, you were missing the stylesheet for https://getbootstrap.com/docs/5.2/assets/css/docs.css.
Also you need to start from g-start-7 (instead of g-start-6) as 1-6 is for the first column and 7-12 is for the second columns
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<div class="grid">
<div class="g-col-6">
<img src="http://placekitten.com/g/200/300" alt="kitty kitty">
</div>
<div class="g-col-6 g-start-7">
<h1>Hello</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
</div>
<div class="g-col-6 g-start-7">form</div>
</div>
See more details here: https://getbootstrap.com/docs/5.2/layout/css-grid/#how-it-works
I trying to make layout something like stack overflow in bootstrap 5, I am only using bootstrap grid not using other utilities class (using saas) ,
#import "../node_modules/bootstrap/scss/grid"
This layout consist of fixed header , fixed left sidebar,main content scrollable (in the main content consist of post content etc & footer )
Note in example code I used couple of hepler class, later I will take care of it, It is just for making example code...
Problem in x-axis scrollbar appear (below example code), that is unwanted, This problem need to be fix...
Before ask, I already tried it couple of way, somehow I did not resolve it, If already answer here drop the link and I will delete my question
header{
position:fixed;
top:0;
height: 50px;
background-color: rebeccapurple;
}
#sticky-sidebar {
position:fixed;
height: calc(100vh - 50px);
top: 50px;
max-width: 20%;
background-color: red;
}
main{
min-height: 100vh;
}
footer{
min-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container-fluid g-0">
<div class="row">
<header>
<div class="col-md-12">
Header
</div>
</header>
</div>
</div>
<div class="container-fluid g-0">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-12" id="sticky-sidebar">
Menu
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere!
</p>
</main>
<footer style="text-align: center;">
© Footer 2021
</footer>
</div>
</div>
</div>
You should really read the docs since the markup has several problems. Bootstrap 5 beta has the same grid rules as Bootstrap 4...
rows are wrappers for columns. This means only columns should be placed in rows, and columns shouldn't be placed directly in other columns.
g-0 (no gutters) should be on the row, not the container
there is no -xs infix. for example use col-12 not col-xs-12
<header>
<div class="row">
<div class="col-12">Header </div>
</div>
</header>
<div class="container-fluid">
<div class="row g-0">
<div class="col-4">
<div class="row">
<div class="col-12" id="sticky-sidebar"> Menu </div>
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere! </p>
</main>
<footer style="text-align: center;"> © Footer 2021 </footer>
</div>
</div>
</div>
Demo
Background: At time of writing, Fomantic-UI is the live-development fork of Semantic-UI which will one day be rolled into Semantic-UI and is for the mean time the de facto supported genus of Semantic-UI.
Issue: When the first focusable object on a page is a dropdown, then on page open the dropdown will open as if clicked.
Notes: I had this first happen in a modal situation and was confused by it, thinking it was an issue on the modal specifically, but I have since had the same thing on a plain page. I have used a modal case in the snippet below to illustrate because the SO snippet viewer does not trigger the behaviour you get on a plain page. Another user raised this as an issue on FUI's git and the support crew pointed out the answer which I am sharing here via this self-answered question.
$('.ui.dropdown')
.dropdown({
});
$('#b1').on('click', function(e) {
$('#m1').modal('show')
})
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<p>Click the 'show modal' button to open a modal. Note the language dropdown opens immediately.
</p>
<p>
<button id='b1'>Show the modal</button>
</p>
<div id='m1' class="ui modal">
<div class="header">Header</div>
<div class="content">
<div class='container'>
<div class="ui floating dropdown labeled search icon button">
<i class="world icon"></i>
<span class="text">Select Language</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
<div class="item">English</div>
<div class="item">French</div>
<div class="item">German</div>
<div class="item">Greek</div>
<div class="item">Hungarian</div>
<div class="item">Italian</div>
<div class="item">Japanese</div>
<div class="item">Korean</div>
<div class="item">Lithuanian</div>
<div class="item">Persian</div>
<div class="item">Polish</div>
<div class="item">Portuguese</div>
<div class="item">Russian</div>
<div class="item">Spanish</div>
<div class="item">Swedish</div>
<div class="item">Turkish</div>
<div class="item">Vietnamese</div>
</div>
</div>
</div>
<p>
Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
</div>
<div class="actions">
<div class="ui approve button">Approve</div>
<div class="ui button">Neutral</div>
<div class="ui cancel button">Cancel</div>
</div>
</div>
</body>
The answer is a setting on the dropdown call.
$('.ui.dropdown').dropdown({
showOnFocus: false
});
Pretty much does what it says on the tin - with showOnFocus set to True (the default setting) the dropdown will open when it gets focus. If the dropdown is the first focusable object on the page then it will therefore open immediately. To avoid this, actively set showOnFocus to False as in the snippet and the dropdown will keep its contents hidden until the user initiates the open process.
$('.ui.dropdown')
.dropdown({
showOnFocus: false
});
$('#b1').on('click', function(e) {
$('#m1').modal('show')
})
<link href="https://fomantic-ui.com/dist/semantic.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://fomantic-ui.com/dist/semantic.js"></script>
<body>
<p>Click the 'show modal' button to open a modal. Note the language dropdown opens immediately.
</p>
<p>
<button id='b1'>Show the modal</button>
</p>
<div id='m1' class="ui modal">
<div class="header">Header</div>
<div class="content">
<div class='container'>
<div class="ui floating dropdown labeled search icon button">
<i class="world icon"></i>
<span class="text">Select Language</span>
<div class="menu">
<div class="item">Arabic</div>
<div class="item">Chinese</div>
<div class="item">Danish</div>
<div class="item">Dutch</div>
<div class="item">English</div>
<div class="item">French</div>
<div class="item">German</div>
<div class="item">Greek</div>
<div class="item">Hungarian</div>
<div class="item">Italian</div>
<div class="item">Japanese</div>
<div class="item">Korean</div>
<div class="item">Lithuanian</div>
<div class="item">Persian</div>
<div class="item">Polish</div>
<div class="item">Portuguese</div>
<div class="item">Russian</div>
<div class="item">Spanish</div>
<div class="item">Swedish</div>
<div class="item">Turkish</div>
<div class="item">Vietnamese</div>
</div>
</div>
</div>
<p>
Voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p>
</div>
<div class="actions">
<div class="ui approve button">Approve</div>
<div class="ui button">Neutral</div>
<div class="ui cancel button">Cancel</div>
</div>
</div>
</body>
I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?
Here my code:
<article class="row single-post mt-5 no-gutters">
<div class="image-wrapper col-md-6">
<?php the_post_thumbnail(); ?>
</div>
<div class="single-post-content-wrapper p-3">
<?php the_content(); ?>
</div>
</article>
Here what I have now:
Here what I need to have:
I need to make text wrap around image with bootstrap 4 wihout floats, is it possible?
No, in this case, you must use the float-left class for the image. But you don't have to use any wrapper for the image. You can get rid of that wrapper div entirely and add your classes to the image.
Another thing you absolutely must do:
Put all of your content into Bootstrap columns because only Bootstrap columns may be the direct children of Bootstrap rows.
Here's a working code snippet (note: I left the image wrapper div in there but I recommend you get rid of it because that's totally unnecessary code. Add your classes directly to the image):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<article class="row single-post mt-5 no-gutters">
<div class="col-md-6">
<div class="image-wrapper float-left pr-3">
<img src="https://placeimg.com/150/150/animals" alt="">
</div>
<div class="single-post-content-wrapper p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
</div>
</div>
</article>
</div>
Updated for Bootstrap 5.0
<div class="container">
<article class="row mt-5 no-gutters">
<div class="col-md-6">
<div class="image-wrapper float-start pe-4 ">
<img src="https://placeimg.com/150/150/animals" alt="">
</div>
<div class="single-post-content-wrapper p-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ad, ex eaque fuga minus reprehenderit asperiores earum incidunt. Possimus maiores dolores voluptatum enim soluta omnis debitis quam ab nemo necessitatibus.
</div>
</div>
</article>
<div class="row">
<div class="col-lg-2 col-12">
<div class="icon mb-4 text-center"><i class="fa fa-github"></i></div>
</div>
<div class="col-10">
<h4 class="h4">Title</h4>
<p class="text-muted">Some text here</p>
</div>
I have used this in bootstrap 4.
Why don't you use something like this:
<div class="container">
<img src="img/example.png" align="left" width="50%">
<p>Text here</p>
</div>
Simpe
align="left"
will do the job!
I'm starting to get really lost in the whole Bootstrap/flexbox grid system. I'm trying to achieve a dynamic, 2 column layout with one large col-sm-12.col-md-12.col-lg-8 and two small columns of: col-sm-12.col-md-6.col-lg-4
This is what I want for large screens:
and this for medium-sized screens:
But, this is what I get!:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width" initial-scale="1">
<div class="container">
<div class="row">
<div id="big" class="col-12 col-sm-12 col-md-12 col-lg-8">
<p> Lots of text </p>
</div>
<div id="small1" class="col-12 col-sm-12 col-md-6 col-lg-4">
<p> Little text </p>
</div>
<div id="small2" class="col-12 col-sm-12 col-md-6 col-lg-4">
<p> Little text </p>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
This seems like an ideal opportunity for a nested grid:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="container">
<div class="row">
<div id="big" class="col-12 col-lg-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div id="small1" class="col-6 col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
<div id="small2" class="col-6 col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
</div>
</div>
</div>
</div>
In the above example your primary grid has two columns; the first is 12-columns wide at all breakpoints below lg. At lg it is 8-columns wide. The second column follows the same pattern but at lg it is 4-columns wide.
Inside the second column we have the nested grid. This has a different breakpoint for each column: 6-columns wide for breakpoints below lg and at lg each column is 12-columns wide.
You can use the following solution:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="big" class="col-12 col-lg-8">
<p><b>1</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quos corporis quisquam officiis sint explicabo, pariatur eveniet, quibusdam exercitationem enim quia, repudiandae laudantium reiciendis dolore quaerat asperiores accusamus! Similique dolorem ipsa veniam ducimus, excepturi nisi odio! Est quibusdam tenetur laudantium blanditiis. Corrupti omnis veniam, fugit fugiat explicabo deleniti, dolorem recusandae quod fuga qui consectetur, possimus? Dignissimos maiores, at possimus officia minus, voluptatum, ipsa magnam iste voluptatem animi quam tempore! Laborum omnis, ad soluta ducimus eligendi, fugiat natus voluptatibus sint possimus! Nihil qui excepturi, necessitatibus ipsam accusantium delectus cum culpa iure.</p>
</div>
<div class="col-12 col-lg-4">
<div class="row">
<div id="small1" class="col-12 col-md-6 col-lg-12">
<p><b>2</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
<div id="small2" class="col-12 col-md-6 col-lg-12">
<p><b>3</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit ipsa voluptas ut, id sunt provident recusandae maxime a culpa, dolore iusto explicabo, nesciunt nobis necessitatibus laudantium temporibus! Corporis aperiam, deleniti.</p>
</div>
</div>
</div>
</div>
</div>
What is happening for different devices?
small view (like iPhone 6):
All columns have the same full width (col-12) of the device. I don't recommend to create two columns for column number 2 and 3.
medium view (like iPad):
The first column is full width (col-12) and above the columns 2 and 3. The columns 2 and 3 are in one row with same width (col-6), next to each other.
large view (like Desktop / Laptop):
The column 1 is using 2/3 of the width. The columns 2 and 3 are on the right column (1/3 of width), about each other.
To check the different breakpoints I recommend the browser plugin (Google Chrome) Window Resizer or the device toolbar on Google Chrome (Ctrl + Shift + M on developer tools F12).