I need move bootstrap elements of row div to the bottom of the page and make it responsive.
I tried add position:absolute to row class, but didn't worked so well.
How can i do this?
jsfiddle
I assume you are trying to absolutely position the element with the id bottom-list.
In order to make it go to the bottom of the page add
bottom:0;
to the selector.
In this way you specify the offset of the absolutely positioned element from the bottom of the containing element.
If however in your layout one of the parent elements has a CSS property
position: relative;
then this may work differently.
Hence I suggest the outermost container element i.e. .container must be absolutely positioned with bottom:0;
Edited fiddle: https://jsfiddle.net/fz93cgxd/4/
If you need to have a Responive bootstrap navbar fixed on bottom you may need to start with Bootstrap navbar itself then add your custom style on it
like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<nav class="navbar navbar-default nav-justified fixed-bootm navbar-fixed-bottom">
<div class="container-fluid ">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-tabs nav-justified">
<li class="active">01 INTRO <span class="sr-only">(current)</span></li>
<li>02 WORK</li>
<li>03 ABOUT</li>
<li>04 CONTACTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Note: all those code is with bootstrap style I didn't write a single line of CSS
Now you can start adding your custom styles
Related
This question already has answers here:
Does :before not work on img elements?
(16 answers)
Closed 6 years ago.
I'm trying to put pseudo-element ::before with img but it just won't show. ( Is Bootstrap messing with it?)
I did look at other answers and tried to put content = "something" but it still won't show.
I also tried display: block too but it will still stay invisible.
Here's the HTML
<header class = "header container-fluid navbar navbar-fixed-top navbar-inverse">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Anime</li>
<li>Manga</li>
<li>Games</li>
<li class="dropdown">
Dropdown
<ul class="dropdown-menu">
<li>
<a data-toggle="modal" data-target="#myModal" >Log-In</a>
</li>
<li>Sign-Up</li>
<li role="separator" class="divider"></li>
<li>Watch Paralax</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</header><!-- end of header-->
<!-- MAIN IMAGE -->
<div class = "container">
<img class = "img-responsive main-pic" src="http://vignette4.wikia.nocookie.net/naruto/images/d/dc/Naruto's_Sage_Mode.png/revision/latest?cb=20150124180545" alt = "naruto">
</div>
Here's the CSS
img{
margin-top:70px;
border-radius:10px;
}
img::before{
content:"This is not working";
color:black;
font-size:200px;
}
The before and after properties don't work on img elements for most browsers. See here - Does :before not work on img elements?
It is the same reason in my answer of other post.
From the specification.
Authors specify the style and location of generated content with the :before and :after pseudo-elements. As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content. The 'content' property, in conjunction with these pseudo-elements, specifies what is inserted.
I am working with bootstrap, and I have for example this code snippet :
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Symptoms
<li class="divider-vertical"></li>
</li>
<li>
Services
<li class="divider-vertical"></li>
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I can see the navbar, navbar-inverse, navbar-fixed-top, container, navbar-header, navbar-toggle, sr-only, icon-bar,navbar-brand, collapse, navbar-collapse, nav navbar-nav, etc...
So - Lets say I want to align the list in this code to the center. Which class, of the 12+ classes, do I have to modify with text-align? Is there a way of "backtracking" through the divs to see which one to change? The class that directly contains the list is nav navbar-nav, but if I change :
.navbar-nav > li > a
to include text-align:center; , nothing happens. Which must mean that I changed the wrong class.
If you know a way of determining which class to change, I appreciate it!
Thank you.
As rsn said in a comment, the best way is to install a developer tool that comes with the browsers. I personally like the Chrome one but the Firefox one works well too. You can select an individual item on your page using the select icon (arrow pointing to a box) and see what styles are attached to it. If you're trying to change padding, look at which element on your page has the padding, and then change that class.
Add an Id to the one you want to edit. Id overrules classes making the site then use the styling of the id instead of the class.
Or edit starting with .navbar and add classes after that...
Eg: .navbar{...} or .navbar .navbar-header .navbar-brand{...}
If you want the sub-menu (symptoms, services, contact) center aligned you can just use Bootstrap's text-center helper class on the UL as follows:
<ul class="nav navbar-nav text-center">
I'm trying to use Twitter Bootstrap for the first time (first time with frontend too), however I already have problems. One is that the navbar is always shown over others components.
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container theme-showcase" role="main">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
In this case for example the div .container .theme-showcase is under and I can never see it.
What am I missing? Thank you.
EDIT: removing-fixed-top is not a solution, I need the nav always present
.navbar-fixed-top will give the navbar position: fixed removing it from the flow so other elements will start at the top of the page. If you want a sticky nav, add top padding to .container.theme-showcase or if you want the navbar static, then simply remove the .navbar-fixed-top class.
Because .navbar-fixed-top is position: fixed, the nav element will lay on top of the underlying div. Be sure to give .container .theme-showcase some padding-top to show it beneath the navbar.
Having CSS/HTML issues with Bootstrap. For some reason it seems the navigation is not pushing down the aspects of the HTML that follows. See https://jsfiddle.net/xaazf6u2/
<div id="topNavigation">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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="#">BCF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">History <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>FGT</li>
<li>BB</li>
</ul>
</li>
</ul>
<ul id="login" class="nav navbar-nav navbar-right"></ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="pageContent" class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<p>Use the form below to upload an order feed. Once uploaded, FedEx shipping will be purchased, labels and packing slip generated for us. Use the navigation above to access previously generated files.</p>
</div>
</div>
From the examples you can see that the jumbotron should have some space below the navigation http://getbootstrap.com/examples/theme/
When you used the fixed navbar Bootstrap recommends you add padding to your body to prevent this problem. So in your CSS you need to add
body { padding-top: 70px; }
The navbar is position:fixed so that it stays on the screen as you scroll. Elements with fixed position don't affect layout of other elements, so you'll need to manually set margin or padding on them.
See the Bootstrap documentation for notes on this.
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the bottom of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Copy
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
The class "navbar-fixed-top" means that the content is scrollable and goes under the navbar.
Add a margin-top to the content if you want to keep this feature or remove the "navbar-fixed-top" class if you don't.
Navigation bar is fixed to the top by default you can change that by removing the class 'navbar-fixed-top'.
I am trying to use the Boostrap 3 grid system. I have a navigation header that i'm trying to customize in the regular desktop screen resolution. The columns work fine until I size the screen down to about 1200px wide. Then the left two links - a button and a regular link start stacking. I don't know how to resolve this. When I change the column sizes the middle column menu links start stacking which I don't want either. I feel like I am missing something really basic here. And I am a newbie in advance so my apologies for lack of knowledge in certain areas.
The live link is here:
http://www.splashdesignstudios.com/template/template3.html
You can use the navbar bootstrap and the collapse plugin.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">
<img alt="Brand" src="img/mocklogo.png" style="height: 100%;">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link1 <span class="sr-only">(current)</span></li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
<li>Link6</li>
<li>Link7</li>
</ul>
<form class="navbar-form navbar-right">
<span class="fa fa-sign-in"></span>Login
<button type="submit" class="btn btn-custom"><span class="fa fa-search"> </span>Sign Up</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can change the appearance just by changing the bootstrap-css. You can find some themes at the bootswatch.
Check this link to see how it's working. In this example, I'm using the Paper theme.
Hope it's useful!
Specifying fixed width classes to three columns gives less width to last column once your screen size reduces. I would divide the header into two columns (both with display: table-cell and vertical-align: middle) with first one containing the logo and menu and second one containing the buttons. However, to make it act properly under 1200px, you will need to use media queries and adjust the styles for every element accordingle.