https://codepen.io/shaan046/pen/vWmVNY
HTML code:
<body>
<div id="header" class="row">
<div class="col-md-1 col-lg-1"><h3 id="myText">Shantanu Tomar</h3</div>
<div class="col-md-offset-5 col-md-2 col-lg-offset-5 col-lg-2"><button class="btn btn-primary">Button1</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div>
</div>
</body>
</html>
CSS Code
#header{
background-color:red;
}
JS code:
$(document).ready(function() {
$("body").addClass("container-fluid");
});
What I want is that the text “Shantanu Tomar” and 3 buttons on screen should come in div #header in a single row. I am using Bootstrap3. Not sure how I can provide col-- tags so that the webpage is visible on Phone, tablet, Laptop in right manner? I tried using lg and md classes but the buttons are not lining up with text “Shantanu Tomar”.
Thanks for the help!!
Try like this. and learn bootstrap from W3schools https://www.w3schools.com/bootstrap/
<html>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="header" class="row">
<div class="col-md-12 col-lg-12">
<div class="col-md-3 col-lg-3">
<h3 id="myText">Shantanu Tomar</h3></div>
<div class=" col-md-2 col-lg-2"><button class="btn btn-primary">Button1</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button2</button></div>
<div class="col-md-2 col-lg-2"><button class="btn">Button3</button></div>
</div>
</body>
</html>
Just use col-xs-3 (since you have four elements) if you want the elements to be in a single row, and no need for jquery here.
#header {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="header" class="row">
<div class="col-xs-3">
<h3 id="myText">Shantanu Tomar</h3>
</div>
<div class="col-xs-3">
<button class="btn btn-primary">Button1</button>
</div>
<div class="col-xs-3">
<button class="btn">Button2</button>
</div>
<div class="col-xs-3">
<button class="btn">Button3</button>
</div>
</div>
</div>
Why do not use a <ul> ?
Something like this :
<div id="header" class="row">
<ul class="list-inline">
<li><button class="btn btn-primary">Button1</button></li>
<li><button class="btn btn-primary">Button2</button></li>
<li><button class="btn btn-primary">Button3</button></li>
</ul>
</div>
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 am using BootStrap grid to design my html pages. Everything is working fine except for small screens. In small screens the views are overlapping like below
I am using the below code
div class="container" >
<div class="row">
<div class=" col-xs-6 col-sm-offset-1
col-sm-4 col-md-offset-2 col-md-3">
<div id="poster">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg">
</div>
</div>
<div class="col-sm-offset-1 col-sm-4 col-xs-6 col-md-2" >
<div id="ratingdiv">
<label>Your Rating</label>
<div id="rateYo"></div>
<div class="editbtn">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>
</div>
<div class="deletebtn">
<button>Delete</button>
</div>
</div>
</div>
</div>
</div>
I gave "col-xs-6" but still its not working.
Could some one tell me what I am doing wrong.
Really appreciate any ideas or suggestions.
Thanks in advance
You missed some closing tags. Here you go. Let me know if this is what you've expected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-6 col-lg-4">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">
<div id="ratingdiv">
<div class="row">
<label>Your Rating</label>
<div id="rateYo"></div>
</div>
<div class="row">
<button type="button" class="btn btn-info btn-md">Edit</button>
<button type="button" class="btn btn-danger btn-md">Delete</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you don't have provide any css , that's why i got two opinions. first one i think you images overlapping the col-xs-6 and the solution is below . may be this will fix your issue
#poster {
width:100%;
float:left;
}
#poster img {
width:100%;
}
otherwise i think you have set position:absolute to #ratingdiv , if you set postion to #ratingdiv just change position:relative to the media queries
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>
I am trying to make a grid of buttons using bootstrap, however, when I change screen size on a desktop the layout jumps to the new position, i have seen in other questions that the answer was to change it to continer-fluid and row-fluid within the div, however this did not help.
My CSS and HTML is
.top-buffer
{ margin-top:10px;
margin-bottom: 10px;
}
<!-- Turn off zooming on Mobile page-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<p> This is the nav bar</p>
</div>
</nav>
<div class="jumbotron">
<div class="container-fluid">
<div class="row-fluid top-buffer"></div> <!-- this row is added in for iPhone Spacing. -->
<div class="row-fluid top-buffer"><!-- open the first row int he grid-->
<div class="col-md-4 col-md-offset-4"> <div class="col-sm-4 col-xs-4" >
<form action="page2JobMainMenu.html">
<button type="submit" class="btn btn-default center-block"> Job </button>
</form>
</div>
<div class=" col-sm-4 col-xs-4">
<form action= "page3CreateQuote.html">
<button type="button" class="btn btn-default center-block">
Quote </button>
</form>
</div>
<div class="col-sm-4 col-xs-4">
<form action="page4FinanceMainMenu.html">
<button type="button" class="btn btn-default center-block">
Finance</button>
</form>
</div>
</div><!--close off the cold md 4 div-->
</div><!-- Close the first row-->
</div><!-- Close the Fluid Container -->
</div><!--Close the Jumbotron-->
Any help is much appreciated.
Thanks
Your code basically works as is. Using col-xs-4 ensures that at even the smallest resolution the buttons will still retain their 3-column layout. It's not necessary to use col-md-4 in this instance, and .row-fluid has not been in use since Bootstrap 2. .center-block is also unnecessary as .btn-block is designed to treat Bootstrap Buttons as full-width elements.
<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-xs-4">
<form action="page2JobMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page3CreateQuote.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
<div class="col-xs-4">
<form action="page4FinanceMainMenu.html"><button class="btn btn-default btn-block">Button</button></form>
</div>
</div>
</div>
Note: If you can avoid using the <button> within a <form> you can make use of Bootstrap's .btn-group component for greater functionality.
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