when user scolling, the element of navbar migrate to become a sidebar.
the very example of what I am trying to do is the navbar of this site:https://www.bechtle.com/fr-en
actually i create i responsive and simple navbar who don't satisfact me
<form class="d-flex" role="search" style="margin-top: 16px;">
<img src="/assets/connexion.jpg" alt="" class="position-absolute top-0 start-0" style="height:72px;width:72px; margin-top:16px;margin-left:16px;">
<input class="form-control me-2" style="width:84rem; margin-right:16rem;height:36px;" type="search" placeholder="Search...">
</form>
Use this SO to create a navbar to smooth size
Create two divs inside the navbar
use transformY or change the opacity of the divs insides "playing" with the class
happy coding :)
Related
I have a problem with making my input field good looking and not too big.
The problem is that when I add to input the w-25 class thats width 25% the input width changes according to its original width and not the parent container and it leaves blank space inside the container , I can fix the problem by passing the width in pixels but I am supposed to use only bootstrap and no css styling.Maybe there could be a different approach to making it.
<div class="container my-5">
<h1 class="fw-normal">Fibonacci Calculator</h1>
<div id="calculatorContainer" class="d-flex align-items-center">
<span>The Fibonacci Of</span>
<small>
<input
type="number"
class="mx-2 d-inline-block w-25"
placeholder="#"
/>
<button type="button" class="btn btn-primary">ls</button>
</small>
</div>
</div>
Here is a codepen with the front end
https://codepen.io/amirovalex-the-animator/pen/OJjgbpo
You can use col-md-1 col-12 on the input class.
I have the following markup in a form.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">
States
<img id="clear-selection" src="~/images/delete.png" title="Clear Selection" />
</label>
<select class="form-control"></select>
</div>
</div>
</div>
The control label (States) is followed by an icon. But I would really like the icon to be aligned to the right.
Instead of this:
I want this:
Is there any way to do this within the intended framework of Twitter Bootstrap? I'm not really clear about what sort of Bootstrap styles are considered acceptable within a <label> tag.
You can solve this simply by moving the image above and outside of the label and giving it a class of float-right.
This will float the image to right.
I'm using Bootstrap 4 to create a navigation header for my site. It's arranged like this:
I want it to be responsive when I shrink the browser size. I'm using col-4 for each of the three columns in the navbar.
Once it reaches a certain size, though, the 3rd (last) link drops onto a new line.
I have each element centered within its respective col-4 div, and I've set margin: 15% for the first two links. How do I keep all three links on the same line when I shrink the viewport?
Here's the HTML for the page:
<div class="container-fluid">
<nav class="navbar">
<div class="col-3 offset-1">
<form style="width: 90%">
<input class="form-control" type="text" placeholder="Search for someone..." aria-label="Search">
</form>
</div>
<div class="col-4">
<img class="mx-auto" src="logo.png">
</div>
<div class="col-4 nav-links">
MY FEED
HOT
<a id="last-nav-link" href="#">MY PROFILE</a>
</div>
</nav>
</div>
Set padding instead of margin for spacing them, and have all the col's add up to total columns and no more. Not sure how bootstrap is set up but it's the margin causing the wrapping/line-breaking you're seeing.
If the total column width is 12 and you have 4 columns they must equal 12 when added up.
As Jacob said, post your HTML for the Nav. Without seeing the HTML we can only guess.
I have the following navbar at the top of my page (heavily copied from a bootstrap 3 example) - you can ignore the Django template code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand plain" href="{% url 'home' %}">Miniquad Maps</a>
</div>
<form method="POST" action="{% url 'spot_search' %}" class="navbar-form navbar-left" role="search">
<div class="form-group">
<input id="spotsearch" type="text" class="form-control" placeholder="Search spots" name="spotsearch">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
{% csrf_token %}
</form>
</div>
</nav>
I am trying to figure out how to resize the search input (the one with id="spotsearch"). I would like to make it much wider, and I have tried many things, but the element seems to be constrained by something else (some bootstrap class no doubt, but I have not been able to figure out which one).
I have tried using .col-size-* in various places (among other things), but nothing seems to affect the input's width.
What am I missing here? Any suggestions as to how to resize the input, or where to look for good information on form sizing would be appreciated (I have read through the bootstrap docs on forms, but this has not been helpful so far in this respect).
Here is an example of the navbar: https://jsfiddle.net/38apotau/
I would like to resize the input to be at least twice the size it is in that example.
The width of the element is set to width: auto by bootstrap, giving the class hierarchy you have set.
You could override the input's width by giving it a specific pixel size:
#spotsearch { width: 350px; }
I have a top level nav bar, But currently the login username, the date & time and the search are having many space between them as follow:-
but is there a way to minimize the space between the components same as shown below:-
my current html for the top navigation is :-
<section id="login" class="navbar-search pull-right">
<span class="username" style=" display:block;"><i class="icon-user"></i><strong> #User.Identity.Name.Substring(User.Identity.Name.IndexOf("\\") + 1)</strong></span>
<div style="text-align:right">
<p id="currentdate"></p>
<p id="currenttime" ></p>
</div>
<form class="customSearch" method="GET" action="#Url.Action("Search", "Home")">
<input class="searchInput" placeholder="Search" name="searchTerm2" data-autocomplete-source= "#Url.Action("AutoComplete", "Home")" type="text" />
</form>
</section>
I'd suggest you use Chrome browser to inspect the elements and see where goes wrong in your CSS, easy and handy, I do it all the time.
use line-height, margin or padding property in css.