I have not encountered this before, and I am having a very hard time trying to find the solution. When having a column equal to medium in bootstrap like so:
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
The text-align works fine:
But when making the column equal to extra small like so:
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
Then the text-align no longer works:
Is there some bootstrap concept that I am not understanding or is this in fact a error like I think it is. I have never had this issue, as my text always has aligned in the past with xs. Any help would be greatly appreciated.
Here is my complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
col-xs-* have been dropped in Bootstrap 4 in favor of col-*.
Replace col-xs-12 with col-12 and it will work as expected.
Also note col-xs-offset-{n} were replaced by offset-{n} in v4.
I just wondered, why col-xs-6 did not work for me but then I found the answer in the Bootstrap 4 documentation. The class prefix for extra small devices is now col- while in the previous versions it was col-xs.
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options
Bootstrap 4 dropped all col-xs-* classes, so use col-* instead. For example col-xs-6 replaced by col-6.
They dropped XS because Bootstrap is considered a mobile-first development tool. It's default is considered xs and so doesn't need to be defined.
In Bootstrap 4.3, col-xs-{value} is replaced by col-{value}
There is no change in sm, md, lg, xl remains the same.
.col-{value}
.col-sm-{value}
.col-md-{value}
.col-lg-{value}
.col-xl-{value}
you could do this, if you want to use the old syntax (or don't want to rewrite every template)
#for $i from 1 through $grid-columns {
#include media-breakpoint-up(xs) {
.col-xs-#{$i} {
#include make-col-ready();
#include make-col($i);
}
}
}
If you want to apply an extra small class in Bootstrap 4,you need to use col-.
important thing to know is that col-xs- is dropped in Bootstrap4
Related
I'm working on a react js project where I'm using the mdbootstrap, I'm trying to build a component similar to this
the first picture is for desktop and another is for mobile users
So, I was trying to achieve something similar and I started playing with bootstrap classes but couldn't achieve this in my react project. But to my surprise in my project, the columns are not taking full width. Why is it happening and what can I do?
Here's it working fine in normal HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8" style="background-color: red;">
One of two columns
</div>
<div class="col-sm-4" style="background-color: yellow;">
One of two columns
</div>
</div>
</div>
</body>
</html>
Check this code on JsFiddle.
Here's the link for my react js project and the component is profile.js you can check it through navbar: https://codesandbox.io/s/dawn-flower-iqcuz
Here's what I'm getting
This is what I want
Your example code is right so it does not help in solving the problem.
I suspect that you used right class container-fluid (max-width: 100% - 100% of the parent not 100% of the viewport) but this wrapper is placed in another div with a class container (max-width: 1200px).
If so your container-fluid is limited by container and behaves like it because max-width:100% is equal 1200px.
A little unsure on when to start a new context in BEM.
Should all child elements always reference the block element?
For e.g.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem</title>
</head>
<body>
<div class="header">
<div class="header__left">
<!-- Left column content -->
</div>
<div class="header__search">
<!-- Should this be attached to the header? Or a new context <div class="search"> as it can be used elsewhere on the site? -->
</div>
</div>
</body>
</html>
Here the search is inside the 'header' div but should we really attach it to the header as this could be used elsewhere on the site?
Do you have new blocks inside blocks?
Cheers
It's my understanding there isn't any problem with blocks overlapping, as long as the css being used to target each block is discreet and separate. So, the search styling shouldn't depend on the header styling if it's usable in other places. Similarly, the header styling doesn't need to go any further down once it loses relevance to its children.
Would something like this work; does that make sense?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bem</title>
</head>
<body>
<div class="header">
<div class="header__left">
<!-- Left column content -->
</div>
<div class="header__right">
<div class="search">
<input class="search__input>
<button class="search__button>GO!</button>
</div>
</div>
</div>
</body>
</html>
There is a missing end quote on the search__button element, but stack overflow is so rigid with its edit criteria it wont let me edit it.
I have the following HTML:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</body>
</html>
For some reason the entire web page is wider than the browser window. When I remove the row class everything goes back to normal. The local CSS file has nothing to do with the issue. My guess is that the bootstrap CSS modifies the row in a way that makes it wider for some reason. So I wanted to ask if anyone has any idea that would fix this.
You may either use .container class or .container-fluid.
.container maintains some margin space from actual screen and don't stretch the page view. On the other hand .container-fluid stretches the page as it can.
See your html script modified below:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header class="row"></header>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<section class="row section2"></section>
<section class="row section1"></section>
<footer class="row"></footer>
</div>
</body>
</html>
Also, you must use .col-md-6 like class to specify width of your section within a row where md is replaceable by lg and sm as well.
md stands for Medium sized devices like laptop,desktop etc.
lg stands for Large sized Devices like projector or some bigger screens etc.
sm stands for Small sized devices like mobiles etc.
You are free to use a combination of these three. For example,
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-1 col-lg-12">
</div>
</div>
</div>
Hope it helps you get started and resolve your problem.
To fix this issue you have use class row properly.
You have not wrapped class row with class container.
Bootstrap provides grid system.
Bootstrap's grid system allows up to 12 columns across the page.
You need to arrange your page width into that 12 columns.
It is not possible to explain all of here.
Please refer following links.
Bootstrap grid template
Bootstrap grids
Maybe you have to add the grid of the bootstrap css?
Look to this example
http://getbootstrap.com/examples/grid/
Please wrap it in bootstrap .container class and then check if the problem still persists.
<body>
<div class="container">
//your content goes here
</div>
</body>
You must use containers to use any of the bootstrap functionality. This can be a set width container or a fluid container but adding one will fix your issues. I also switch around your style to use a working CDN version and moved Javascript to the recommended location. You might find this a better starting point.
Reference: http://getbootstrap.com/css/#overview-container and http://getbootstrap.com/css/#grid
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<header class="row">Test 1</header>
<section class="row section1">Test 2</section>
<section class="row section2">Test 3</section>
<section class="row section1">Test 4</section>
<section class="row section2">Test 5</section>
<section class="row section1">Test 6</section>
<footer class="row">Test 7</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
If you're using bootstrap 4,just add m-0 class to your row instead of wrapping it in an other div.It removes the margin.
Removing the margin is the easiest and quickest way to fix your problem.
You can do that by adding the m-0 class along with your row:
<div class="row m-0">
...
</div>
I have this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="visible-xs-block">visible-xs-block</div>
<div class="visible-sm-block">visible-sm-block</div>
<div class="visible-md-block">visible-md-block</div>
<div class="visible-lg-block">visible-lg-block</div>
</div>
</div>
</div>
</body>
</html>
When I run this on mobile, my phone recognise this as SM, but should as XS.
In this case, I can't see mobile menu with hamburger (code not include) and when I have div with xs-12 and sm-6 it displays wrong.
On PC works everything.
How can I recognise phone (XS size) correctly ?
Put the meta tag in head section.
<meta name="viewport" content="width=device-width, initial-scale=1">
If the problem persist after adding:
<meta name="viewport" content="width=device-width, initial-scale=1">
Try with
<div class="hidden-lg hidden-md hidden-sm col-xs-12">visible-xs-block</div>
instead of
<div class="visible-xs-block">visible-xs-block</div>
Anyways, your code was working fine for me.
You have already tried with google chrome inspect? In the latests version you can select various device type and brand. In this way you can test at different resolution.
The solution it's not always correct, but is a good approximation.
https://developer.chrome.com/devtools/docs/device-mode
I'm pretty new to Bootstrap 3. I'm having issues with the grid system: http://getbootstrap.com/css/#grid .
Everything works well below 992px. In other words, <728 px my two divs stack, >728 px they are horizontal. However, above 992px they stack AGAIN. My aim is that my two divs only stack for "Extra small devices Phones (<768px)". Not for bigger screens.
This is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class ="container">
<div class ="row">
<div class ="col-sm-6">
<img src="http://placehold.it/500x500.png" class="img-responsive">
</div>
<div class ="col-sm-6">
<img src="http://placehold.it/500x500.png" class="img-responsive">
</div>
</div>
</div>
<!-- JavaScript plugins (requires jQuery) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<!-- Enable responsive features in IE8 with Respond.js (https://github.com/scottjehl/Respond) -->
<script src="js/respond.js"></script>
</body>
</html>
EDIT:
Have a look at the images, please. It's not working for me (neither in FF nor in Chrome).
Picture one works.
Making the screen wider, it starts stacking:
Add classes below to each of your blocks, that have to be stacked one under another in small version.
col-lg-6 col-sm-12
col-lg-6 says:
Make block 50% width in LG and smaller dimensions
col-sm-12 says:
Make block 100% width in SM and smaller dimensions
Zoom. It's expected behavior. Zoom would change your page_width/element_width ratio.
So you will get other breakpoint usually after zooming.