Bootstrap col not taking full width - html

I've used col-xs-3 and col-xs-9 for my 2 col. However the form doesn't seem to take up all the space on the right. How can I fix this?

Try this:
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-sm-6" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-4</div>
</div>
</div>
</body>
</html>
The columns will automatically stack on top of each other when the screen is less than 768px wide.

Related

How can I remove the padding of the bootstrap jumbotron on the mobile screen?

Hello I use the bootstrap jumbotron class and whenever the screen goes below 500 pixels I want to get padding 0 bootstrap automatically padding: 2rem 1rem; but it doesn't work if I want to change it. What is the solution? Thanks in advance for your answers.
#media (max-width: 500px) {
.jumbotron {
padding:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="berkay.css">
<link rel="stylesheet" media="(max-width:500px)" href="mobile.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron row" style="height:100px;">
<div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</body>
</html>
Simply set the padding to 0 by default with p-0, or px-0 if you want to remove only the horizontal padding (py-0 for vertical). Then add a padding on larger screen, for exemple p-md-5 to have an horizontal and vertical padding from md breakpoint.
You can do it without any custom CSS.
<div class="container-fluid">
<div class="jumbotron row p-0 p-md-5" style="height:100px;">
<div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
There you go:
#media (max-width: 500px) {
.container-fluid .row.jumbotron {
padding:0px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet" href="berkay.css">
<link rel="stylesheet" media="(max-width:500px)" href="mobile.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="jumbotron row" style="height:100px;">
<div class="col-xs-12 col-sm-12 mol-md-9 col-lg-9 col-xl-10">
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>
</div>
</div>
</body>
</html>

Bootstrap: overlapping columns

I have the following code :
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.class1 {height: 100px; background-color: DarkSlateGrey}
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="col-xs-6">Website</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
<div class="col-xs-1">Services</div>
</div>
</div>
</body>
</html>
The problems with me are:
When i do "inspect" to see the website on mobile:
-the background doesn't take all the width of mobile.
-Words "services" are overlapped, i want them to be separated with some spaces between them
How can I avoid these problems? Any help will be appreciated
Your width for each child inside the row is simply too small. For mobile size, you are setting the div to only 1/12 width of the mobile screen. You can add padding and overflow: hidden to it so it doesn't go over the desired width, but that doesn't seem ideal to me. I added a sample code based on your codes as an option for you to explore. If the screen is less than >=720px (col-md) then your first child in the row will take full width, and give more space for the rest so it looks more presentable.
.class1 {
height: 100px;
background-color: DarkSlateGrey
}
.tomato{
background: tomato;
}
.white{
background: white;
}
row div{
text-align: center
}
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container-fluid class1">
<div class="row">
<div class="tomato col-xs-12 col-md-6">Website</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
<div class="white col-xs-4 col-md-1">Services</div>
<div class="tomato col-xs-4 col-md-1">Services</div>
</div>
</div>
</body>
</html>

Bootstrap shift div and align content

I have some troubles with my website template. Is it possible to shift div (or container) and leave the content aligned with other content on the page? I can do this with classic HTML + CSS but have some troubles with bootstrap.
See the picture.
<!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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row">
<div class="col-xs-4 col-xs-offset-2" style="background-color:lavender;">.col-sm-4</div>
<div class="col-xs-4" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>

The image inside the columns doesnt fit in the 320px screen

How to wrap images responsively inside the columns. The images doesn't fit inside the column and the screen of 360px.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
<meta name="viewport" content="width=device-width initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|EB+Garamond|Great+Vibes" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
<div class="col-xs-6 col-sm-4"><img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853"></div>
</div>
</body>
</html>
Set the max-width attribute on the images and they should fit nicely.
css: img{max-width:100%}
Or, you can apply the style directly to the element. For example, change this:
<img src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">
to this:
<img style="max-width:100%" src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">
You need to declare width and height like this.
<img style="width:100%; height:auto;" src="https://www.google.com.ph/url?sa=i&rct=j&q=&esrc=s&source=imgres&cd=&cad=rja&uact=8&ved=&url=https%3A%2F%2Fwww.w3schools.com%2Fcss%2Focean.jpg&psig=AOvVaw3Li5y49HHEkCc_jj8yhZQn&ust=1509070722216853">
add this style and your images should automatically fit which ever grid size you set, Avoid pixel in Grid unless you need a fix size try percentage like 20%, rest depends on your project
<style>
body img{max-width:100%;width:100%;vertical-align:unset;text-align:center;}
</style>
That's it.

Foundation 6 columns grid classes not being applied

I am just trying to get a simple project started using foundation 6. My very simple html is:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="row">
<div class="large-2 columns">
<h1>test</h1>
</div>
<div class="large-2 columns">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
However, when testing the website, the column classes are not getting applied and the grid is not working as it should be. Is there something I am missing?
Unless you're using < foundation 6, you need to be using the XY-grid because the old float grid was deprecated.
Check this out: https://foundation.zurb.com/sites/docs/xy-grid.html
Your html would look something like this using the XY-grid:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.min.css">
</head>
<body>
<div class="grid-x">
<div class="cell large-2">
<h1>test</h1>
</div>
<div class="cell large-2">
<h1>test2</h1>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Just wanted to add that you can still use the float grid in Foundation 6. If you visit the download page, you can select "Float Grid" under "Grid" in the left column and download that custom build. You do not have to use the XY Grid.
If you do that, your existing grid markup will work.