Bootstrap CSS for wide and boxed layouts - html

I am using Bootstrap and I need two layouts for wide and boxed. And I want to easly toggle (change) between layouts when needed.
EDIT : How can I do like this : http://htmlstream.com/preview/unify-v1.7/
Beetween boxed and wide layout changing only in body class (boxed-layout container) I don't need switcher. I will put "boxed-layout container" class to body for boxed layout or I will remove boxed-layout container class from body for wide layout. But I can not do it with bootstap and need help for this.
How can I create wide and boxed layouts like following example images? And how can I change layout via class?
For example:
<html>
<head>
<style>
.main-wrapper-wide {
width: 100% !important;
}
.main-wrapper-boxed {
width: 850px !important;
box-shadow: 0 0 5px #ccc;
}
</style>
</head>
<body>
<div class="main-wrapper-wide or main-wrapper-boxed">
<!-- header content here !-->
<!-- slider here !-->
<!-- site content here !-->
<!-- footer content here start !-->
</div>
</body>
</html>


Do you just want the Navbar and the main containers to only be a max of 800px wide and then still be free to resize on all screens sizes.
If so then this is probably all you need.
Just use max-width:800px; and you also need to <center> the divs.
Here is a full size Fiddle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
}
.clear {
margin-top:60px;
margin-bottom:60px;
}
.block1 {
height: 440px;
margin-bottom:60px;
}
.block2 {
height: 200px;
}
.bg-clr {
background-color: blueviolet;
}
.bg-clr-blk {
background-color: black;
}
.section-max-width {
max-width:800px;
}
b {
color:black;
}
</style>
</head>
<body class="bg-clr">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container section-max-width">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<center>
<section class="section-max-width">
<div class="clear">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block1">
<br>
The overall <b>Max Width</b> these containers and the navbar can be is <b>800px</b>.
<br>
They are still free the reduce in size when resized to fit smaller screen sizes.
<br>
Resize to see.
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-primary block2"></div>
</div><!-- /.container -->
<div class="container col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-clr-blk clear"><br><br></div>
</section>
</center>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>


Take a look at this code snippet and try changing the main-wrapper-wide class to main-wrapper-boxed:
body {
background-color: #E5E5E5;
}
.container {
max-width: 850px;
border: solid 1px #6c757d;
padding: 10px;
margin-bottom: 10px;
}
.main-wrapper-boxed {
max-width: 850px;
margin: 0 auto;
padding: 10px;
background-color: #FF7777;
}
.main-wrapper-boxed .container-fluid {
padding-left: 0;
padding-right: 0;
}
.slider {
padding: 10px;
background-color: #CDCDCD;
}
.footer {
color: #fff;
padding: 10px;
background-color: #1C1C1C;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper-wide"> <!-- change class name to main-wrapper-boxed -->
<div class="container">
<div class="row header mx-0">
<div class="col-3">Logo</div>
<div class="col-8 offset-1">Header menu</div>
</div>
</div>
<div class="container-fluid slider">
<div class="container">Slider</div>
</div>
<div class="container">Site content</div>
<div class="container-fluid footer">
<div class="container">Footer</div>
</div>
</div>
These were the steps I took:
First of all, I created the page as you wanted in the Bootstrap wide example. This became the main-wrapper-wide version.
After that, I changed the class to main-wrapper-boxed and customized it for the Bootstrap boxed example by giving it max-width=850px.
Done!
Here's a Fiddle just in case...

Related

how can i avoid spaces that come at the bottom of screen when resizing window? How to make the space same for all sizes of window?

<!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/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>
<style>
.navbar-custom {
background-color:rgb(128 128 128 / 18%);
height:48px;
width:100%
}
.close{
margin-bottom: 40px;
}
h5{
margin-top: 30px;
margin-left: 30px;
margin-bottom: 10%;
}
.container-fluid {
max-width: 100%;
padding-right:0;
padding-left:0;
margin-right:0;
margin-left:0
}
html, body {
margin: 0;
padding: 0;
position: relative;
width: 100%;
right:0;
padding-right: 0px!important;
margin-right: 0px!important;
width: 100vw;
overflow-x: hidden;
}
.row row-cols-1{
width: 100%;
right: 0;
}
.img-fluid{
max-width: 100%;
height : auto;
}
.btn btn-primary{
width: 100%;
text-align: center;
display: block;
width: 48%;
box-sizing: border-box;
text-align: center;
margin-right: 10px;
position: absolute;
margin-left: 5px;
margin-right: 5px;
}
</style>
</head>
<body>
<nav class="navbar navbar-custom ">
<a class="navbar-brand" href="#">
<img src="logo.png" class="logo1" alt="logo" style="width:50px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<button type="button" class="close " aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</li>
</ul>
</nav>
<div class="container-fluid ">
<h5><b>Do you have Fever above 101.4?</b></h5>
</div>
<div class="container-fluid ">
<img src="fever.png" class="img-responsive center-block d-block mx-auto mt-5" alt="logo" style="width:200px;">
</div>
</div>
<div class="container mt-5">
<div class="row row-cols-1 mx-2 ">
<button type="button" class="btn btn-primary mt-5 ">Yes,I do</button>
<button type="button" class="btn btn-primary mt-1">No, I don't</button>
</div>
</div>
</body>
</html>
I am experiencing a gap (space) below buttons when i'm resizing the window in vertical manner, the gap increases as i vertically upsize the window, it takes a space, i have tried different techniques including margin bottom, but didn't accomplish what i want to be, kindly suggest a solution which includes bootstrap 4. Thanks
moreover i want to center align the image on ipad such that is aligned on iphone screens
here the gap is increased
here the gap is decreased
i want to fill the gap below screen so that the image comes at center
just like it comes at center on iphone screens

Add fixed-bottom to your last div
like this:
<div class=" fixed-bottom row row-cols-1 mx-2 ">
<button type="button" class="btn btn-primary mt-5 ">Yes,I do</button>
<button type="button" class="btn btn-primary mt-1">No, I don't</button>
</div>

Put a frame and a picture together

I put a frame and a picture together but my photo is not fully displayed, and in each size a part of the image is displayed, for example, for a mobile phone, only a small part of it is displayed, and in a larger and medium size, a larger part of the photo is displayed. can you help me?
My html markup:
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture height-80 img-responsive "></div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
This is my CSS:
body {
font-family: 'Roboto', sans-serif;
}
.height {
min-height: 100vh;
}
.title-underline {
width: 200px;
height: 5px;
margin: 0 auto;
}
.height-80 {
min-height: 100vh;
}
.height-11 {
max-height: 11vh;
}
.about-picture {
background: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
}

You can use background image as you have done, but you need to give it a size and position, and stop it repeating, otherwise it is just picking up the defaults for these values.
Here is what to put in your CSS. I have deliberately explicitly set each value so it's easier to see what is going on:
.about-picture {
background-image: url("https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Of course, you may want to change the positioning, but the size contain makes sure the whole image is always visible whatever the actual dimensions of the column on any device.

After I see your code, maybe I don't think you can put the image in the css if it's used like that. I changed your code in the css section in .about-picture.
And I also changed the html markup in this section:
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
Like this edited from me:
<html>
<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"/>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
body{
font-family: 'Roboto', sans-serif;
width: 100%;}
.height{
min-height: 100vh;}
.title-underline{
width: 200px;
height: 5px;
margin: 0 auto;}
.height-80{
min-height: 100vh;}
.height-11{
max-height: 11vh;}
.about-picture{
align-items: center!important;
}
.about-picture img{
width: 100%;
position: relative;
padding-top: 120px;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- about section -->
<section id="about" class="bg-secondary">
<div class="container-fluid">
<div class="row">
<!-- about img column -->
<div class="col-md-6 about-picture">
<img src="https://cdn.mos.cms.futurecdn.net/6t8Zh249QiFmVnkQdCCtHK.jpg">
</div>
<!-- about text column -->
<div class="col-md-6 about-text height-80 px-5 d-flex align-items-center justify-content-center">
<!-- this is for centering -->
<div class="about-text-center">
<!-- title -->
<div class="row">
<div class="col text-center">
<h1 class="display-4 text-uppercase text-dark mb-0"><strong>about</strong></h1>
<div class="title-underline bg-warning"></div>
<p class="mt-2 text-capitalize">hi it is a test</p>
</div>
</div>
<!-- end of title -->
<!-- single item -->
</div>
</div>
</div>
</div>
</section>
</body>
</html>

How to Set Column Heights - Bootstrap 4?

I am playing around with bootstrap 4 and I am not sure how to get my heights correctly. I have a "side nav", "header", "main" and "footer".
I want "main" to take up most of the height. However for some reason my heights must be messed up as the side nave does not go all the way down and I got this white chunk in the bottom left hand corner.
If you do full screen on my code you will see it.
body,
html,
.container-fluid {
height: 100%;
}
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
background-color: blue;
color: white;
}
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
}
<!DOCTYPE html>
<html>
<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>test</title>
<!-- Bootstrap CSS CDN -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="style4.css">
</head>
<body>
<div class="wrapper h-100">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>
<div class="container-fluid ">
<div class="row h-100">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 h-100" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>
</body>
</html>

The problem currently is the that using h-100 on the row, makes the child col-12 also set to h-100 exceed the viewport height which causes scrolling and the whitespace under the sidebar.
As of Bootstrap 4.1, there is a flex-fill util class that is helpful for this layout...
.flex-fill {
flex: 1 1 auto;
}
In this case, you can use it so that the child divs grow to fill remaining height. Just set min-height on the .wrapper:
.wrapper {
min-height: 100vh;
}
And then, make container-fluid also a flexbox container (using d-flex). Use the util flex-fill to make row and the middle col-12 fill height:
<div class="wrapper d-flex">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li>
<a>
Home
</a>
</li>
</ul>
</nav>
<div class="container-fluid d-flex flex-column">
<div class="row flex-fill flex-column">
<div class="col-12" style="background-color: red;">
One of three columns
</div>
<main class="col-12 flex-fill" style="background-color: yellow;">
test
</main>
<div class="col-12" style="background-color: pink;">
test2
</div>
</div>
</div>
</div>
https://www.codeply.com/go/VvogWj44cS

Bootstrap 3 Navbar with Icons & Carousel

I am working on creating a site with bootstrap3. Unfortunately, even after watching many videos I am still having problems.
I would like the logo on my navbar to remain on the left side (which I have) and other additional icons that will be links to other area of the page to be toward the left - unfortunately I have not figured this out via html/css. Please check out www.frobot.net to see what I am attempting to emulate. Essentially, there are multiple icons next to the text.
I would like a white background for the navbar and for it to have a definitive bottom rather than meshing into the rest of the website, if that makes sense. As of right now, there is not a consistent horizontal white area with the navigation tools.
I set up a carousel for three images and only the first image appears.
Can someone please point out issues in my code?
HTML:
<!DOCTYPE html>
<html>
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title>THE BEST YOGURT</title>
<meta name="description" content="Frozen Yogurt">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container" id="main">
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="img/logo.png" alt="#Logo">
</a>
</div>
<div class="navbar navbar-custom">
<div class="navbar-header">
<a class="icons" href="icons">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web' rel='stylesheet' type='text/css'>
<img src="img/froyo.png" alt="Froyo"<li>FROYO</li>
<img src="img/story.png" alt="Bots"<li>BOTS</li>
<img src="img/team.png" alt="Press"<li>PRESS</li>
<img src="img/talk.png" alt="Team"<li>TEAM</li>
<img src="img/contact.png" alt="Contact"<li>CONTACT</li>
</div>
</nav><!--End Nav Bar -->
</div>
<!-- Carousel Begins -->
<div class="carousel-slide" id="myCarousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
<div class="item" id="slide2">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
<div class="item" id="slide3">
<div class="carousel-caption">
<h4></h4>
<p></p>
</div><!-- end carousel-caption-->
</div><!-- end item -->
</div><!-- carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" data-slide="prev" href="#myCarousel"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"><span class="icon-next"></span></a>
</div><!-- end myCarousel -->
<div class="row" id="FroYo">
<img src="img/contact-para-bg.png" alt="Bots"
</body>
</html>
CSS:
/* --------------------------------------
Layout
-------------------------------------- */
.nav-bar {
position:fixed;
top:0;
background-color:white;
padding-top:30px;
padding-left:100px;
}
.navbar-brand {
padding: 13px 15px;
background-color:white;
}
.icons {
margin:0;
padding-top: 25px;
padding-right: 200px;
padding-left:100px;
background-color:white;
}
.icons a{
font-family: 'Titillium Web', sans-serif;
text-decoration: none;
float: left;
display: block;
padding: 20px 15px;
color:gray;
background-color:white;
}
.icons a:hover{
color:purple;
}
* --------------------------------------
Carousel
-------------------------------------- */
#myCarousel {
margin-top: 300px;
background-color:gray;
}
.carousel-caption {
font-size: 24px;
}
.carousel-caption h4 {
font-size: 32px;
}
#myCarousel .item { height: 700px; }
#slide1 {
background: url('../img/best-slide.png') top center no-repeat;
}
#slide2 {
background: url('../img/good.png') top center no-repeat;
}
#slide3 {
background: url('../img/slide3.png') top center no-repeat;
}

you can throw a bottom border on the navbar and modify the css of the border to make the space between the navbar and the rest of your page. You also forgot the data-ride="carousel" in the div tag for the carousel.

Menu on full height of container

I'm trying to make a responsive design, where I will have
structure like this.
But I want the vertical menu to go from the header to the footer, no matter if there is some text or not.
Here is my code:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<meta charset="UTF-8">
<title>template</title>
</head>
<body>
<div class="">
<div class="row">
<header class="col-sm-12 col-lg-12 bordered header"> <!-- Header -->
Header
</header> <!-- End of header -->
</div>
<div class="row">
<div class="col-sm-12 col-lg-12 bordered menu-horizontal"> <!-- Horizontal menu -->
Menu horizontal
</div><!-- End of horizontal menu -->
</div>
<div class="site-container container-fluid">
<div class="row">
<div class="col-sm-2 col-lg-2 bordered"> <!-- Vertical menu -->
<menu class="menu-vertical" role="menu">
Menu vertical
</menu>
</div> <!-- End of vertical menu -->
<div class="col-sm-10 col-lg-10 bordered"> <!-- Content -->
Content
</div> <!-- End of content -->
</div>
</div>
<div class="row">
<footer class="col-sm-12 col-lg-12 bordered footer"> <!-- Footer -->
Footer
</footer> <!-- End of footer -->
</div>
</div>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
And here is CSS
.bordered {
border: 1px solid black
}
.footer {
position: fixed;
bottom: 0;
}
.header {
height: 67px;
}
.menu-vertical {
position: relative;
height: 100%;
}
.site-container {
position: absolute;
height: 100%;
width: 100%;
}
.menu-horizontal {
height: 18px;
}

There is many ways to achieve what you want. One possible solution is :
1/ Remove "menu-vertical" from the menu element and put it on it's parent. Like this :
<div class="col-sm-2 col-lg-2 bordered menu-vertical">
<menu role="menu">
Menu vertical
</menu>
</div>
2/ Then, add this CSS :
.site-container > .row:first-of-type {
height:100%;
}
And you should be far closer to what you want ;)

.menu-vertical {
position : absolute;
top : height1 px;
bottom : height2 px;
}
see my screen :
http://screencast.com/t/N2NuyOju

I hope here you'll find something that can help.
<head lang="en">
<meta charset="UTF-8">
<title>template</title>
<style>
.bordered {
border: 1px solid red
}
.header {
height: 10%;
}
.menu {
height: 10%;
}
.vertical {
width: 30%;
float: left;
height: 70%;
}
.content {
float: left;
}
.footer {
position: fixed;
bottom: 0;
height: 10%;
}
</style>
</head>
<body>
<div class="">
<div class="bordered header">
<header>
Header
</header>
</div>
<div class="row">
<div class="bordered menu">
Menu horizontal
</div>
</div>
<div class="">
<div class="row">
<div class="bordered vertical">
<menu class="" role="menu">
Menu vertical
</menu>
</div>
<div class="bordered content">
Content
</div>
</div>
</div>
<div class="row">
<footer class="bordered footer">
Footer
</footer>
</div>
</div>
</body>
</html>