I am following along with the exercises in the Jump Start Bootstrap (DOWNLOAD LINK https://learn.vccs.edu/courses/406438/files/108188236/preview )
In chapter 02, we are creating a grid system. I have entered the code for the index.html and style.css files to format the grid as shown in the book.
The columns in the grid need to align vertically and horizontally, however, they simply align vertically only. The column divs also do not respond to the style.css file that is supposed to format them in size and color.
Bootstrap grid example screenshot
Bootstrap grid that my code outputs screenshot
I have checked my code several times and compared it to the code in the book (which I added a download link above [Chapter 02 index.html file]) and I cannot find anything wrong with it.
This here is the code that I am using for the html and css files:
https://pastebin.com/MQWnJXvT
If anyone can take a look and give any suggestions or just managed to spot and point out a mistake that I missed, I would greatly appreciate it. I am scratching my head with this one and will probably continue to do the rest of the night.
The only issues I can think of is that I am assigning the wrong classes in the column divs or am placing the <link href="css/style.css" rel="stylesheet"> line in the wrong section.
I thank everyone in advance who has any advice or suggestions!
Your code seems to be working fine. The problem should be the link tag, set the path correctly.
<!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/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.col1 {
background: #5C7080;
}
.col2 {
background: #6BC0FF;
}
.col3 {
background: #E8AA4C;
}
.col4 {
background: #FF384E;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col1">
<h4>Column 1</h4>
</div>
<div class="col-xs-12 col-sm-6 col2">
<h4>Column 2</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col3">
<h4>Column 3</h4>
</div>
<div class="col-xs-12 col-sm-6 col4">
<h4>Column 4</h4>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Related
So, I've this little piece of test code where I'm trying to fit an image into the parent div as below in BS5. The challenge is that the image leaves a sizeable gap width-wise. This inspite of using .img-fluid class. Outcome attached which isn't ideal. There's a big gap.
<!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">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="app.css">
<title>Practice </title>
</head>
<body>
<section class="container-fluid">
<div class="row g-0 h-50 border border-2 border-success ">
<div class="col-6 px-0"></div>
<div class="col-6 px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
Why not write an inline css.
<img src="image-header-desktop.jpg" alt="" style="width: 100%">
I think your col-6 that has the image inside it... It's making the thing appear just on the left side of the page?? This should work...
<div class="col-6 mx-auto px-0">
<img src="image-header-desktop.jpg" alt="" class="img-fluid">
</div>
Tha above only takes your normal thing and centers it on the page, I only added mx-auto to center the Div which contains your image.
You could also try col-8 col-9 col-10 to make the image bigger. It will still be fluid and extend the full width no matter how many columns wide you are. Naturally you wouldn't want it fluidly expanding larger than it's normal pixel size though.
I just started learning front end development and after studying basics of html5/css3, moved on to bootstrap 4. Now, O have been trying to make a copy of facebook login page, and used container-fluid for 100% width and then used container and row and column inside it. To match the background color, i added a custom class to container-fluid and then to align items vertically, i used align-items-end in row. But, for some reason, it does not work; I had been looking into it but couldn't find anything. Then, I tried something which let it happen. below is the code of both the cases, kindly help me understand what is going on and why it didn't work before and now why is it working? Help is appreciated. Thanks.
<head>
<!-- Charset -->
<meta charset="utf-8">
<!-- Responsive -->
<meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no">
<!-- styelsheets -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<style>
.bg-fakebook {
background-color: #3b5999 !important;
min-height: 82px;
}
.fakebook-weight {
font-family: Tahoma;
font-weight: bold;
color: white;
margin: 0;
}
</style>
<!-- Title -->
<title>fakebook</title>
</head>
<body>
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
<!-- -------------------------------------------------------------
JS files: jQuery first, then Popper.js, then Bootstrap JS
--------------------------------------------------------------- -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
output
Then, after trying many things, i added bg-fakebook to row as well which worked.
<div class="container-fluid bg-fakebook">
<div class="container">
<div class="row align-items-end bg-fakebook">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
ouput
if you want to align middle first you have to display: flex the parent. Than add the alignment top center or bottom. like this
<div class="container-fluid bg-fakebook d-flex align-items-center">
<div class="container">
<div class="row align-items-end">
<div class="col-md-6">
<h3 class="fakebook-weight">fakebook</h3>
</div>
</div>
</div>
</div>
To learn bootstrap 4 you must learn flex first. BTW Happy Learning.
i've just started learning web dev with bootstrap.
I'm running into a problem i don't understand. When i view my project in IE or edge everything looks as expected (columns side by side):
Internet explorer vs chrome:
https://i.stack.imgur.com/CWe8Y.png
I've checked whether this is due to screen size, but the columns remain stacked vertically no matter how big I make the screen in chrome.
index.html code:
.customDiv{
margin:3px;
min-height:300px;
background-color:silver;
text-align:center;
font-size:large;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="CustomStyles.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<!--Columns must always be the children of a row class-->
<div class="col-2">
<!--Content must always be inside a col class-->
<div class="customDiv">Column 1</div>
</div>
<div class="col-md-8">
<div class="customDiv">Column 2</div>
</div>
<div class="col-md-2">
<div class="customDiv">Column 3</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="bootstrap/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Would really appreciate any help. Been stuck on this for a while and I can't find anyone else who has had this exact problem.
I created a cta with image and text overlay using the bootstrap card-img-overlay class. Also added a div with dark low opacity to make the text brighter. Everything work good on all browsers except IE 11.
Q1:
where is the column width breaking in IE, i don't think its my css that's
causing this part. is it a known bootstrap 4 issue?
Q2:
how to fix the overlay div to show on top of the image like chrome and other browsers. Is there a better approch that works for both?
broke IE IMAGE
Chome and other browsers that are working good
.dnow-regionsContent .overlay-div {
height: 100%;
width: 100%;
position: absolute;
background-color: #000;
opacity: 0.3;
}
.dnow-regionsContent img {
max-height: 40rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" alt="">
<div class="overlay-div"></div>
<div class="card-img-overlay d-flex align-items-center container">
<div class="row mb-5">
<div class=" col-sm-12 text-content">
<h2 class="card-title ">
Canada
</h2>
<p class="">
Viewl all Location Viewl all Location
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
The actual reason:
It's not col-sm-12, but the d-flex on card-img-overlay which makes your design look not proper in IE.
Why?
When display:flex is applied to an element, the immediate child (i.e. the flex items) would need some width to be specified or else they would not expand or take up enough space as we require unless content is not sufficient enough.
In your case we have d-flex along card-img-overlay so the immediate child (i.e. flex item) of it .row, would not be having 100% width. Now for col-sm-12 column, 100% would be full horizontal space that is with its parent (.row) which is not itself wide enough. That's the real issue here.
Solution:
Give 100% width to .row, you may use class of Bootstrap 4 w-100.
This could have been the real solution to your issue/query but few things are still needed to get the look you want, as you have it in other browsers.
Giving position: absolute does not work alone, the smart browsers would know what to do, but the other ones would need offset values like top & left. In your case with value as 0.
Finally image with actual dimensions to attributes width and height of <img> tag, here in your case it would be width="1200" & height="800".
So basically bootstrap has nothing to do with this issue, it's just the flow of markup and CSS properties.
Side Note:
I hope the above steps helped you to clear issue or understand it. I would suggest to always have width and height attributes for an <img> tag so that the browsers(old ones) would know to make that specific size of the block on a page.
.dnow-regionsContent .overlay-div {
height: 100%;
width: 100%;
position: absolute;
background-color: #000;
opacity: 0.3;
/*Added*/
top:0;
left:0;
}
.dnow-regionsContent img {
max-height: 40rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" width="1200" height="800" alt="">
<div class="overlay-div"></div>
<div class="card-img-overlay d-flex align-items-center container">
<div class="row mb-5 w-100">
<div class=" col-sm-12 text-content">
<h2 class="card-title ">
Canada
</h2>
<p class="">
Viewl all Location Viewl all Location
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
It was not you, it was IE.
Hope this helps you!
I've not got anyway of testing IE.
But i've used your example and taken it to the grass roots of Bootstrap 4.
I have modified your css and html to use :before to overlay the image with your black opaque style. I apply this on .card-img-overlay and any child elements will naturally appear above the :before pseudo style.
HTML
<div class="card bg-dark text-white">
<img src="https://www.dropbox.com/s/9fvw247x7ml90mf/canadaN.jpg?dl=1" class="card-img" alt="...">
<div class="card-img-overlay">
<div class="container h-100">
<div class="row h-100">
<div class="col align-self-center">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
</div>
</div>
</div>
SASS/CSS
.card-img-overlay {
overflow: hidden;
&:before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: #000;
opacity: 0.3;
}
}
Try this fiddle in IE... https://jsfiddle.net/joshmoto/xm4ude0L/
If this still doesn't work in IE still then you are going to have to be old school and find a work around. If it was me, I would output a browser body class, and control the problem for the IE users using css. You have not mentioned how you generate your html so I cant advise on a browser body class function.
Or just use browser happy to promote better ways of web browsing to force visiting users to up their game and get with the times :)
You have a lot of unnecessary stuff going on here.
Here is a snippet that works in IE.
Also for whatever reason your img link did not work in IE, so I replaced it with another image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>slick slider</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="dnow-regionsWrap">
<div class="dnow-regionsContent">
<div class="card bg-dark text-white">
<img src="https://cdn2.outdoorphotographer.com/2018/04/DShow_Echoconfl-824x548.jpg" alt="">
<div class="card-img-overlay align-items-center d-flex">
<div class="card-body ">
<h2 class="card-title">
Canada
</h2>
<p class="card-text">
Viewl all Location Viewl all Location
</p>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 4 uses the flex property for the column. This property as far as I know is not entirely compatible with IE. Also IE was discontinued by Microsoft, I would not worry about giving support.
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