I have two fixed rows.In first one there is a image and in second one there is a menu bar. when i am trying to add next row (which will contain another image file) below that two fixed row, the image file overrides to the first row (fixed row). Someone please help me!
Thank You.
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top" style="width:100%">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="images/logo.png"></div>
</div>
<div class="row" >
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav nav-tabs navbar-inverse">
<li style="margin-right:15px">Home</li>
<li style="margin-right:15px">Our AIMS</li>
<li style="margin-right:15px">Mission</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="images/sideImg.jpg" alt="save humanity">
</div>
</div>
</div>
</body>
</html>
Since the container of the first two rows is fixed, it is out of the normal flow of the document. You will need to add padding-top to the third div/row which is > the height of the first two rows/container.
HTML
<div class="third-row"> <!-- Add custom div wrapping the container -->
<div class="container">
CSS
.third-row {
padding-top: 150px;
}
Output:
.third-row {
padding-top: 150px;
}
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top" style="width:100%">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="http://placehold.it/100x100">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav nav-tabs navbar-inverse">
<li style="margin-right:15px">Home
</li>
<li style="margin-right:15px">Our AIMS
</li>
<li style="margin-right:15px">Mission
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="third-row">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="http://placehold.it/1200x300" alt="save humanity">
</div>
</div>
</div>
</div>
</body>
</html>
Try as following example .
HTML
<div class="row custom">
</div>
CSS
.custom{
//your codes
}
Related
I'm trying to created nested columns within the bootstrap nav. I've tried everything. But it seems like only containers possess this sort of functionality. How can I do this inside a bootstrap nav. Attached is an image of how I want things to be and the current code that I have (which currently has alignment issues).
<nav class="container">
<div class="row">
<div class="col-6 col-md-2">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<div class="col-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<ul class="row navbar-nav col-12 col-md-8">
<li class="nav-item col-4">hello</li>
<li class="nav-item col-4">hello</li>
<li class="nav-item col-4">hello</li>
</ul>
</div>
</nav>
nav mobile
Try this, The image you tag in your question i am doing this code for that only. Check and tell me you want the same.
<!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.4.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.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="container">
<div class="row">
<div class="col-lg-6 col-sm-6 col-xs-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
<div class="col-lg-6 col-sm-6 col-xs-6">
<img src="images/nexletol-logo.png" alt="NEXLETOL™ (bempedoic acid) tablets" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
<div class="col-lg-4 col-sm-4 col-xs-4">
<p class="text-center"> Hello </p>
</div>
</div>
</nav>
</body>
</html>
I want to show header just in small size but col-sm-* class of div inside container not work correctly and not float them
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" style="background-color:purple">
<div id="header" class="d-none d-sm-block d-md-none">
<div class="container">
<div class="col-sm-3" style="background-color:red"> a </div>
<div class="col-sm-6" style="background-color:blue"> b </div>
<div class="col-sm-3" style="background-color:green"> c </div>
</div>
</div>
</div>
This is because you forgot one crucial element: The row.
You always need a div with the row class to put your column(s) in.
Here's the working code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid" style="background-color:purple">
<div id="header" class="d-none d-sm-block d-md-none">
<div class="container">
<div class="row">
<div class="col-sm-3" style="background-color:red">a</div>
<div class="col-sm-6" style="background-color:blue">b</div>
<div class="col-sm-3" style="background-color:green">c</div>
</div>
</div>
</div>
</div>
I need to reorder these columns in a certain order for screens smaller the col-md in bootstrap. I tried this answer Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 and it works for just 3 columns but not for the specific way the columns need to stack in mobile view. This way works but it feels dirty hiding and un-hiding the columns. Is there a cleaner way to accomplish this?
Desktop View here
Mobile View here
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 visible-md visible-lg">
<div class="col-md-4"><div class="well">1</div></div>
<div class="col-md-4"><div class="well">2</div></div>
<div class="col-md-4"><div class="well">ad1</div></div>
<div class="col-md-4"><div class="well">3</div></div>
<div class="col-md-4"><div class="well">4</div></div>
<div class="col-md-4"><div class="well">ad2</div></div>
<div class="col-md-4 col-md-push-8"><div class="well">ad3</div></div>
</div>
<!--col-md-12 visible-md visible-lg -->
<div class="col-xs-12 visible-xs visible-sm">
<div class="col-xs-12"><div class="well">ad1</div></div>
<div class="col-xs-12"><div class="well">1</div></div>
<div class="col-xs-12"><div class="well">ad2</div></div>
<div class="col-xs-12"><div class="well">2</div></div>
<div class="col-xs-12"><div class="well">3</div></div>
<div class="col-xs-12"><div class="well">ad3</div></div>
<div class="col-xs-12"><div class="well">4</div></div>
</div>
<!-- col-xs-12 visible-xs visible-sm -->
</div>
<!-- row -->
</div>
<!-- container -->
</body>
</html>
Codepen here
Please check:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<div class="row hidden-xs hidden-sm">
<div class="col-md-8"><div class="well">728x90 Ad</div></div>
</div>
<div class="row">
<div class="col-md-8"><div class="well">Title</div></div>
<div class="col-md-4"><div class="well">ad1</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="well">1</div></div>
<div class="col-md-4 col-md-push-4"><div class="well">ad2</div></div>
<div class="col-md-4 col-md-pull-4"><div class="well">2</div></div>
</div>
<div class="row">
<div class="col-md-4"><div class="well">3</div></div>
<div class="col-md-4 col-md-push-4"><div class="well">ad3</div></div>
<div class="col-md-4 col-md-pull-4"><div class="well">4</div></div>
</div>
</div> <!-- container -->
I'm trying to add two dividers inside another divider, yet I couldn't figure out how force the child dividers to be inside the parent divider.
How can I control the child dividers location inside the parent divider?
#graph-container {
border: solid;
}
#graph-info {
border: solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Main
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="home">Main</div>
<div class="container" id="graph_panel">
<div class="row">
<div class="container col-xs-12 col-sm-12 col-md-8 col-lg-8 bg-info " style="height: 800px;" id="graph-container">
</div>
<div class="container col-xs-12 col-sm-12 col-md-4 col-lg-4 bg-danger" style="height: 800px" id="graph-info">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add width:auto to your #graph_panel
You are already inside a .container > .row so it is not needed to add one more inside it.
See this bootply fiddle
I am trying to make a fixed column ( header- containing a image) with full width using bootstrap. Below this column there is another row containing three column( another image in the middle div). When I run my code the things get messy and also other contents passes above the fixed column which should be pass below it. Someone please help me. I am new to bootstrap. Here is my code
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="header"><img class="img-responsive" src="images/profile.jpg"></div>
</div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6"><img class="img-responsive" src="images/helpUs.jpg"></div>
<div class="col-sm-3"></div>
</div>
</div>
Here is CSS
.container-fluid{
background-color:#B8DB4D;
}
#header{
position: fixed;
width:100%;
background-color:red;}
Bootstrap has a convention for what you're describing, which can be accomplished by using the .navbar-fixed-top class on the content which should be sticky/fixed to the top of the page.
The only requirement for this to work as expected is that your <body> element has its padding-top property set to the expected height of the .navbar-fixed-top nav element. (in this example, the image 150px tall, so we set the body's padding-top to that height). This way, no content will be hidden behind the nav on page load (only when the user scrolls).
.container-fluid {
background-color: #B8DB4D;
}
#header {
position: absolute;
background-color: red;
}
body {
padding-top: 150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=header%20img&w=350&h=150">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-6">
<img class="img-responsive" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=other%20img&w=350&h=150">
</div>
<div class="col-sm-3"></div>
</div>
</div>