After finishing the entire layout of my webpage using twitter bootstrap (all rows are fixed) - I would like to set the width to be fixed, that is for the layout to stay the same regardless of the browser size.
That is, if the browser is too small, then only a part of the page will be visible.
My layout's structure is as follows
<body>
<div style="container">
<div class="row">
<div class="span12">
<div class="span4">
</div>
<div class="span8">
</div>
</div>
</div>
<div class="span9"> </div>
<div class="span3"> </div>
</div>
</body>
I've tried making a div that contains the container, and setting its position to absolute, but this doesn't keep the elements from moving when the browser is resized.
How I could do this?
Here is what is in head:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="script.js"></script>
</head>
I think you have included bootstrap-responsive.css in your html. Remove it! and then you can set your container to be whatever you want. width: (x)px;
Related
I'm new to bootstrap, trying to align 2 divs vertical on responsive mode, but no luck so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div>
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
</div>
<div class="col-xs-12 col-sm-11">
<p>The estimated delivery date is provided to you as a guide only.</p>
</div>
</div>
</body>
On normal desktop mode, the divs are vertically aligned. But once I go to mobile mode, the second div is sitting below the first div. How can I make the 2nd div to sit next to the first div vertically?
Most of the boostrap over mobile devices tend to make things one below another because that is pretty much what bootstrap does in CSS/Div elements on mobile.
There are some solutions over it, but I see in your elements before
<div class="col-xs-12 col-sm-1" ><i class="material-icons">cloud</i>
that you don't use the triple rule.
Using bootstrap col- elements should be always into container and row like this:
<div class="container"> <!-- Or container-fluid -->
<div class="row">
<div class="col-xs-12 col-sm-1">
most inner div
<div/>
<div/>
<div/>
A little harder as solution is to copy the whole Bootstrap grid css file into a new file you make and you modify the things you need the most, like the .col-lg xs or the flex and the max width
Last but not least, go check the #media element over here:
https://www.w3schools.com/css/css_rwd_intro.asp
This could help you understand the most of what I said before about auto-resizing over mobile devices and css elements
<!--Try this one, It's simple and responsive in all widths and are aligned vertically can also do this using css flex box but little bit lengthy.-->
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- 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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div class="col-md-12">
<div class="d-flex flex-column">
<img src=" https://i.ytimg.com/vi/hF_LjTUvP-U/maxresdefault.jpg" alt="firstImg" class="img-fluid" style="width: 150px;
height: 150px;">
<img src="https://wallpapercave.com/wp/wp2554641.jpg" alt="secondImg" class="img-fluid mt-2" style="width: 150px;
height: 150px;">
</div>
</div>
</div>
</body>
</html>
strong text
You wrote
<div class="col-xs-12 col-sm-1" >
The col-xs-12 means, that on small screens, this element should fill the complete container. Use
<div class="col-xs-6 col-sm-1" >
for both containers, or one col-xs-1 and the other col-xs-11.
There are 12 columns in bootstrap and you decide, how they are filled
The HTML of the website
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-3"><div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
The output leaves a space as such on the left:
I have tried to replace the padding and tried various float options, but none of them seem to work. Any solutions?
You are using .container class, this is to create a centered container.
If you don't want this use .container-fluid class as detailed in the documentation:
Use .container-fluid for a full width container, spanning the entire width of the viewport.
If you don't want to use a container, then don't use a container at all.
.navbar-pink {
background-color: pink
}
.title-yellow {
background-color: yellow
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<header class="navbar navbar-expand navbar-pink">
<h1> NAVBAR </h1>
</header>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<h2 class="title-yellow">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
If i got correctly, you are trying to remove spacing from this portion
see the arrow in the image
If this is the case, you can simply use bootstrap's css class "container-fluid" instead of "container".
The "container" class leaves paddings/spaces to left and right whereas,
the "container-fluid" class utilizes full width of the screen.
Here is the full code--
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="float-left" style="background-color:grey;">
<h2 style="background-color:yellow;">Notifications</h2>
<div>You have a new follow </div>
<div>Your previous request was approved</div>
<div></div>
</div>
</div>
<div class="col-md-9">Hiiiii</div>
</div>
</div>
<script src="jquery.slim.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
</html>
Please note, i have used bootstrap cdn.
I am attempting to create an image gallery using w3.css. I am constructing it with w3-cell-row and w3-cell elements. When I place images of varying size in these w3-cell elements the images will display with unequal heights, contrary to how you would believe they would from reading this:
https://www.w3schools.com/w3css/w3css_layout.asp
I will put some code here that shows the problem:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
</html>
As you can see the images are displayed with varying heights. My expectation would be that the widths of the images would change to create a uniform cell height across the row.
Andrew, you are missing another concept of 'Layout cells Adjust to equal heights', please refer to that section.
In your example I added cell colors to be red green and blue and you can see whats happening. width wont impact height but height impacts other cells height.
Also you can refer to Images URL for responsive images.
Hope this helps!!
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- link css -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<title> test </title>
</head>
<body>
<div class="w3-cell-row">
<div class="w3-cell w3-red">
<img src="http://shashgrewal.com/wp-content/uploads/2015/05/default-placeholder-300x300.png" style="width:100%;" >
</div>
<div class="w3-cell w3-green">
<img src="http://www.pixedelic.com/themes/geode/demo/wp-content/uploads/sites/4/2014/04/placeholder.png" style="width:100%;" >
</div>
<div class="w3-cell w3-blue">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ4zIFE2vpdnB_b_qmWEa2NBKd_vFa_7f5XQpZUcyKs6vNNN85G" style="width:100%;" >
</div>
</div>
</body>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
Hey there!, first post here, can anybody tell me why this won't work? i've simplified my code to the maximum. The thing is that it will work if i make my browser window smaller than 1200px.
The problem with your page is that you did not put in place all the structure required by bootstrap's grid support: columns should be in rows, rows should be in containers, see the bootstrap documentation for details.
The following modification of your code works as intended:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/c\
ss/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey" class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</div>
</body>
</html>
(Technically the problem occurs because the "col-lg-12" class makes the div containing the "hello" a float, so it is no longer contained in the div with the grey background, and then the grey div has height 0, so isn't visible.)
Add the position or height attribute to the div
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey;position:absolute">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
I am trying to beat a bootstrap layout into fitting some requirements I have. The layout started as the default generated by an MVC 5 project template, but I am stuck on getting an image to fill the entire browser width. I need the image to appear as follows:
If I add a section, with an img tag, the image doesn't stretch across the entire screen, but starts 'indented' from the left, and causes the brower so 'overflow' to the right, like:
The only alternative I can see is to set a background image for body-content, but that presents a whole lot of scary positioning issues for the content below the image, and there is quite a lot of that, e.g. below the text "Here's what you'll get' there is still a whole lot of content.
Here is an abridged version of my first attempt:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>s</title>
<link href="/Content/bootstrap.css" rel="stylesheet" />
<link href="/Content/site.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar">
...
</div>
<div class="container body-content">
<section id="landing">
<img src="/Content/Images/landing_back.png" alt="The Tax-Free Investment Account" />
</section>
<footer>
...
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
</body>
</html>
You can set the background image of the entire body like this:
body {
background-image: url("http://www.placecage.com/1000/800");
background-size:100%;
}
However if you are looking to make a specific element full width with Bootstrap then you should use container-fluid rather than container to hold your content as that element reaches the boundary of your screen width instead of being fixed width.
Note: run this snippet in full screen to get the full effect.
.container,
.container-fluid {
background-image: url("http://www.placecage.com/1000/800");
min-height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">Fixed width</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">Full width</div>
</div>
</div>