I started learning Web Designing and I have some doubt in Grid System.
Question might seem very nooby, so assume that I have no knowledge about it.
I have the following code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Grid System</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4" style="background-color: yellow">
<h4>Grid</h4>
</div>
<div class="col-md-4" style="background-color: grey">
<h4 >System</h4>
</div>
<div class="col-md-4" style="background-color: yellow">
<h4>Practice</h4>
</div>
</div>
</div>
</body>
</html>
Suppose I wish to print "Grid" in the center of it's div. How can I do it?
Add the following to the h4: class="text-center". That should do it.
you could try
<div class="col-md-4 text-center" style="background-color: yellow">
<h4>Grid</h4>
</div>
If you want to positionate only the Grid word(the rest part of it`s div will be on left) you can simply use the center html tag:
<center><h4>Grid</h4></center>
Or if you want to move the entire content of the div to the center you can add the text-center class to div tag as it was mentioned before my answer:
<div class="col-md-4 text-center" style="background-color: yellow">
<h4>Grid</h4>
</div>
Use :
<div class="col-md-4 text-center" style="background-color: grey">
Example: jsFiddle
Related
This is basic html with bootstrap flexbox. The second div may contain it's nested div upto 8. And the result should be like attached screenshots.
Can it be done with given structure. Am attaching most of the scenario's along with this.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chat 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.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.chat{
}
.chat .chat-part{
height: 100px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Grid Structure</h1>
<p>Condition is one div always one or more than div inside it.</p>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row chat">
<!-- This is first div -->
<div class="col" style="background-color:yellow;">owner</div>
<!-- This is second div -->
<div class="col d-flex px-0 chat-part">
<!-- This div may have upto 8 nested div's -->
<div class="col" style="background-color:orange;">chat1</div>
<div class="col" style="background-color:yellow;">chat2</div>
<div class="col" style="background-color:orange;">chat3</div>
<div class="col" style="background-color:yellow;">chat4</div>
</div>
</div>
</div>
</div>
</body>
</html>
In your case, You can achieve this by using flexbox.
Use .flex-column to set a vertical direction
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chat 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.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style>
.chat{
}
.chat .chat-part{
min-height: 100px;
}
</style>
</head>
<body>
<div class="container-fluid">
<h1>Grid Structure</h1>
<p>Condition is one div always one or more than div inside it.</p>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row chat flex-column">
<!-- This is first div -->
<div class="col chat-part" style="background-color:red;">Owner</div>
<!-- This is second div -->
<div class="col d-flex px-0 chat-part">
<!-- This div may have upto 8 nested div's -->
<div class="col" style="background-color:orange;">chat1</div>
<div class="col" style="background-color:yellow;">chat2</div>
<div class="col" style="background-color:orange;">chat3</div>
<div class="col" style="background-color:yellow;">chat4</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want to create a layout responsive like the pic down, with bootstrap 4 or other support. (full screen)
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="~/Content/StyleSheet1.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="flex-row">
<div class="col" style="background-color: blue;">Header</div>
</div>
<div class="flex-row">
<div class="col-md-4" style="background-color: orange;">Left Nav</div>
<div class="col" style="background-color: gray;">Content</div>
</div>
<div class="flex-row" style="background-color: green;">
Footer
</div>
</div>
#RenderBody()
</body>
</html>
.container
{ height: 100%;
width: 100%; }
Any idea for this ?
p.s. I work with VS2019
I created your design using bootstrap col.You can modify the height as you wish but you can use this layout for your blueprint.For more info you can check : https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
<!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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-12" style="background-color:yellow;height:200px">Header</div>
</div>
<br>
<div class="row" style="height:450px">
<div class="col-sm-4" style="background-color:yellow;">Left Navigation</div>
<div class="col-sm-8" style="background-color:orange;">Content</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm-12" style="background-color:yellow;height:225px">Footer</div>
</div>
<br>
</div>
</body>
</html>
Try following,
<div class="container-fluid">
<div class="flex-row">
<div class="col" style="background-color: #5B9BD5;">Header</div>
</div>
<div class="flex-row">
<div class="col-md-4" style="background-color: #ED7D31;">Left Nav</div>
<div class="col" style="background-color: #A5A5A5;">Content</div>
</div>
<div class="flex-row" style="background-color: #70AD47;">
Footer
</div>
</div>
I want the replacement of classes col-sm-push-9 and col-sm-pull-3 of bootstrap-3 in bootstrap-4, can any one write classes in below html code in bootstrap 4?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Bootstrap 4</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-push-9" style="border: 1px solid #ccc">
Div 1
</div>
<div class="col-sm-9 col-sm-pull-3" style="border: 1px solid #ccc">
Div 2
</div>
</div>
</div>
</body>
</html>
Basically this has been asked before. If you read the Bootstrap 4 docs you'll see that push pull are no longer used for column ordering. Instead use the column ordering classes.
<div class="container">
<div class="row">
<div class="col-sm-3 order-sm-last" style="border: 1px solid #ccc">
Div 1
</div>
<div class="col-sm-9 order-sm-first" style="border: 1px solid #ccc">
Div 2
</div>
</div>
</div>
https://www.codeply.com/go/6wcDwJR2Ex
In Bootstrap 4 you cans use class="order-md-**" for ordering your columns in a row.Please check the below snippet
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 order-md-12 border">column 1</div>
<div class="col-md-6 order-md-1 border">column 2</div>
</div>
</div>
</body>
</html>
I have provided the code snippet
here i want to display the marque below logo but it is covering the whole header.
Visit here
use display: inline-block and width: 100%; on alert-info div it will work fine that you want.
UPDATED
You missed at least a container-fluid style declaration. See your snippet updated, here https://www.w3schools.com/code/tryit.asp?filename=FEL4BAHI14YZ.
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.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body id="bootstrap-overrides">
<header class="container-fluid">
<div class="header">
<img width="300" class="img-responsive" style="height: 120px; float:left" src="images/logo.jpg" />
<button class="btn btn-primary pull-right">BUTTON</button>
</div>
</header>
<div class="container-fluid">
<form id="frm" runat="server" class="form-horizontal">
<div class="alert alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</body>
</html>
Hope this helps.
Updated- Just wrap your header and alert-form individually inside a container-fluid with a row. Thats the best solution using bootstrap.
below is the wokring code. For logo I am using dummy image
<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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<div class="container-fluid">
<div class="row">
<div class="header">
<img width="300" class="img-responsive" style="height:120px; float:left;" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" />
<button class="btn btn-primary pull-right">BUTTON</button>
<!--- Remove this inline style style="height: 120px; float:left" -->
</div>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<form id="frm" runat="server">
<div class="alert-info" role="alert" style="color: red">
<marquee>Welcome To IDB WEB APPLICATION. All (*) Fields Are Mandatory</marquee>
</div>
</form>
</div>
</div>
I can't figure out what is the problem with my code. I'm very new in bootstrap my problem is kinda trivial. One of my field is out of position. I have tried a different route by making only one row and instead of increasing the div sizes I reduced them, but it had the exact same problem. (Run the code in full screen mode).
Please if you can help me out!
.row {
background-color: yellow;
}
.col-sm-3, .col-sm-6 {
border:solid 2px black;
}
div {
height:200px;
}
.two-div {
height:400px;
}
.three-div {
height:600px;
}
<!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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 three-div pull-left">Works</div>
<div class="col-sm-6">Works</div>
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div">Works</div>
<div class="col-sm-3 three-div">Works</div>
</div>
<div class="row">
<div class="col-sm-3 two-div pull-right">Works</div>
</div>
<div class="row">
<div class="col-sm-6">:(</div>
</div>
</div>
</body>
</html>
With some nesting and pull-right on the appropriate columns you can reverse the float:left and make it work (albeit a hack!)...
http://www.codeply.com/go/rgHEL6DW12
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-4 three-div">works</div>
<div class="col-sm-8">works</div>
<div class="col-sm-4 three-div pull-right">works</div>
<div class="col-sm-4 two-div pull-right">works</div>
<div class="col-sm-8 pull-right">
;-)
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 two-div">works</div>
<div class="col-sm-12 two-div">works</div>
</div>
</div>
</div>
</div>
Think about it like this...
http://www.codeply.com/go/rgHEL6DW12
Your unhappy smiley box is off because your setting different heights for the containers. I altered your code to explain how you work with BS grid system. See comments.
.row {
background-color: yellow;
}
.col-sm-3,.col-sm-6 {
border:solid 2px black;
}
div { height:200px; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!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.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-3 three-div">Works</div> <!-- no need for pulling left. BS does that already -->
<div class="col-sm-6">Works</div>
<div class="col-sm-3 two-div">Works</div> <!-- no need for pulling right -->
</div>
<div class="row">
<div class="col-sm-3 two-div">Works</div>
<div class="col-sm-3 three-div">Works</div>
</div>
<div class="row">
<div class="col-sm-3 col-sm-offset-9">Works</div> <!-- use -offset-X to move your divs horizontally along the grid -->
</div>
<div class="row">
<div class="col-sm-6">:(</div>
</div>
</div>
</body>
</html>