I have a grid layout where I want a menu on the right in desktop mode, but on the top in mobile. This works fine like this:
<div class="row">
<div class="col-sm-4 col-md-push-8"><div id="menu"></div><div id="side-content"></div></div>
<div class="col-sm-8 col-md-pull-4"><div id="main-content"></div></div>
</div>
But, I'd like to add other content directly below the menu on the right in desktop mode and have it move below the main content on mobile.
In other words, I'd like it to end up looking like what this would do on mobile:
<div class="row">
<div class="col-xs-12"><div id="menu"></div></div>
<div class="col-xs-12"><div id="main-content"></div></div>
<div class="col-xs-12"><div id="side-content"></div></div>
</div>
Is there any way to make it so I could have two cells on the right in desktop mode, but have one flow above the main content while the other flows below the main content on mobile?
Edit: Here's a picture of what I mean
Go with the link or below code also may be it can help you -
JSFiddle
HTML Code -
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-4 menuDiv">
<div id="menu">
<h1>menu</h1></div>
</div>
<div class="col-xs-12 col-sm-8">
<div id="main-content">
<h1>main</h1></div>
</div>
<div class="col-xs-12 col-sm-4 sideDiv">
<div id="side-content">
<h1>side</h1></div>
</div>
</div>
</div>
CSS Code -
#menu{
background-color:#60E877;
}
#main-content{
background-color:#E86060;
}
#side-content{
background-color:#685818;
}
#media(min-width:768px){
.menuDiv, .sideDiv{
float:right;
}
}
Try this it will work--
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: blue;"><div id="menu"><h1>menu</h1></div></div>
<div class="col-sm-pull-8 col-md-pull-8 col-lg-pull-8"><div id="main-content" style="background-color: red;"><h1>main</h1></div></div>
<div class="col-sm-4 col-sm-push-8 col-md-4 col-md-push-8 col-lg-4 col-lg-push-8" style="background-color: green;">
<div id="side-content"><h1>side</h1></div></div>
</div>
</div>
</body>
</html>
Related
Recently, I'm developing using bootstrap for a chatting system. But publishing a job is very difficult for me.
I want to develop the message template using bootstrap. I'm only using a bootstrap grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container-fluid">
<div>NickName</div>
<div class="row flex-nowrap">
<div class="col-auto" style="background-color: beige;">
<div class="row flex-nowrap">
<div class="col-auto">
<div class="text-break">
FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
</div>
<div>
SIZE
</div>
</div>
<div class="col-auto align-self-center">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto align-self-center text-nowrap">
PM 7:32
</div>
</div>
</div>
</body>
</html>
I want to show all contents when class is set to flex-nowrap. But above code is not working well.
If I reduce browser size in the above code, then the image tag and PM7:32 are hidden.
I don't know what to do. I want to show the following picture always.
You need to play with class col and col-auto inside row structure and use text-break class for braking single line text without spaces.
I hope this below snippet will help you a lot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div>NickName</div>
<div class="row">
<div class="col-12">
<div class="row flex-nowrap align-items-center">
<div class="col">
<div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
<div class="col">
<div class="text-break">
<strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
</div>
<div>
<strong>Size:</strong> 100kb
</div>
</div>
<div class="col-auto">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto text-nowrap">
PM 7:32
</div>
</div>
</div>
</div>
</div>
"d-flex" is important. You can try:
<div class="d-flex flex-nowrap">
...
</div>
I'm trying to create a layout similar to the one pictured above at the top of my page. Im using bootstrap 4, and I've created the appropriate row and column arrangement
<div class = "row">
<div class = "col-sm-2"> </div>
<div class = "col-sm-1" > Image goes here</div>
<div class = "col-sm-1" > Image goes here </div>
<div class = "col-sm-8"></div>
</div>
<div class = "row">
<div class = "col-sm-2"> </div>
<div class = "col-sm-1"> <!-- --> </div>
<div class = "col-sm-5">
<div class="row">Title Text goes here </div>
<div class="row"> More text goes here </div>
</div>
<div class = "col-sm-4"></div>
</div> `
my biggest issue comes with defining the size of the images. I would like for them to maintain a certain aspect ratio, and decrease in size (while maintaining the ratio) for smaller displays. I tried fixing the size of the columns and setting the image dimensions to fill the columns, but that doesn't work. also trying to modify the size of the images themselves make them stick out of the grid.
Also is there anyway where i can control the size at which a column wraps?
heres the code for it:
<!DOCTYPE html>
<html>
<head>
<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 img-responsive"">
<div class="row">
<div class="col-sm-2 col-xs-2" > </div>
<div class="col-sm-1 col-xs-1">
<img src="1.jpg" class="img-responsive" >
</div>
<div class="col-sm-1 col-xs-1">
<img src="2.jpg" class="img-responsive" > </div>
<div class="col-sm-8 col-xs-8"></div>
</div>
<div class="row">
<div class="col-sm-2 col-xs-2"> </div>
<div class="col-sm-1 col-xs-1"> <img src="3.jpg " class="img-responsive" ></div>
<div class="col-sm-5 col-xs-5">text goes here </div>
<div class="col-sm-4 col-xs-4" ></div>
</div>
</div>
</html>
<script src="" async defer></script>
</body>
</html>
you just put some images and see
check out the fiddle:https://jsfiddle.net/tyu867tk/
Haii, I wrote the following code using bootstrap:
<div class="row">
<div class="col-lg-3 col-sm-3 col-xs-12 ROOD" >
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-6 image GEEL" >
<img src="images/camera.png" class="home">
<h4>Vraag uw foto digitaal op!</h4>
</div>
<div class="col-md-12 col-sm-12 col-xs-6 image GROEN">
<img src="images/card.png" class="home">
<h4>Probeer het proeflidmaatschap!</h4>
</div>
</div>
</div>
<div class="col-lg-8 col-sm-8 col-xs-12 nieuws PAARS">
<h1>..</h1>
</div>
</div>
Which should result in this on mobile devices:
phone
But the two nested rows keep being put on top of each other, whereas they should be placed next to each other on mobile phones. Like this:
How it should be
What I am doing wrong?
Copy the HTML below to begin working with a minimal Bootstrap document.
<!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">
The above 3 meta tags must come first in the head; any other head content must come after these tags
Than you need to link bootstrap in you html code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>...</body>
Next you can paste html code from snippet into the body.
.ROOD {
background: red;
}
.GEEL {
background: yellow;
}
.GROEN {
background: green;
}
.PAARS {
background: violet;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-12 ROOD" >
<div class="row">
<div class="col-sm-12 col-xs-6 image GEEL" >
<img src="images/camera.png" class="home">
<h4>Vraag uw foto digitaal op!</h4>
</div>
<div class="col-sm-12 col-xs-6 image GROEN">
<img src="images/card.png" class="home">
<h4>Probeer het proeflidmaatschap!</h4>
</div>
</div>
</div>
<div class="col-sm-8 col-xs-12 nieuws PAARS">
<h1>..</h1>
</div>
</div>
</div>
As you can see, "11111111..." and "22222222..." are overlapping. I think this is because the former exceeds the grid it belongs to, i.e. <div class="col-xs-6 col-lg-4">.
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>11111111111111111111111111111111</h2>
</div>
<div class="col-xs-6 col-lg-4">
<h2>22222222222222222222222222222222</h2>
</div>
</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
It looks like this in my browser(Safari Version 9.1.2 (11601.7.7)):
What am I doing wrong?
Add word-wrap: break-word; to h2 element. because the default setting for word-wrap is normal. which wrap only for limited set of split tokens (example: whitespaces, hyphens).
HTML:
<div class="container">
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2 class="w-wrap">11111111111111111111111111111111</h2>
<p class="text-muted ">11111111111111111111111111111111</p>
</div>
<div class="col-xs-6 col-lg-4">
<h2 class="w-wrap">22222222222222222222222222222222</h2>
<p class="text-muted">22222222222222222222222222222222</p>
</div>
</div>
</div>
CSS:
.w-wrap{
word-wrap: break-word;
}
I am trying to design a website for our organisation. In this website I wish to display contents from different links to a particular content area on home page. For example, suppose if a user clicks on "About Us" link then in that particular content area contents of "About Us" will be displayed and same case with the other links too. By default Contents of "Home" link will be displayed there. I have no idea how to achieve this....someone please help me!
(I am using Bootstrap,Html and Css. If other language is also needed for this purpose then please inform me that too.) Thank You all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link type="text/css" href="design.css" rel="stylesheet" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="row" >
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">Some Text...</div>
</div>
<div class="row">
<div class="col-md-1 col-lg-2" ></div>
<div class="col-xs-12 col-sm-12 col-md-10 col-lg-8" >
<ul class="nav nav-tabs navbar-inverse">
<li>Home</li>
<li>About Us</li>
<li>Mission</li>
</ul>
</div>
<div class="col-md-1 col-lg-2" ></div>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6" ></div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<button type="button" class="btn btn-primary">Home</button>
<button type="button" class="btn btn-primary">About Us</button>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">Main Content Area</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
I wish to display all contents of links according to users choice in the 2nd div (from bottom).
In bootstrap you can set class "btn" in the tag "a" to get the same style of a button
About Us
To display content acording of link you need set a "id" of tag "div" and the tag "a" set the name of the "id" in the "href=#aboutus" for example:
<div id="aboutus">
<!-- content -->
</div>
About Us