Why is my search bar not aligning to the right? - html

I am creating a search bar with bootstrap and the problem is that I want it to align to the right side of the nav bar, instead it is staying on the left. Here is the issue:
FYI, the search text is being overlapped by the logo, but we don't need to worry about that. The problem is I want the search bar to be on the right side of the screen. By the way, the navbar element is parented to a container-fluid, but not a row.
Why is it not aligned to the right side of the navbar?
#search-bar {
background: #FFFFFF;
float: right;
height: 28px;
width: 32%;
margin-right: 40px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="navbar col-12"> <img class="navbar-brand" src="https://via.placeholder.com/50" alt="Ventr Logo" width="100">
<input class="form-control" type="text" placeholder="Search" aria-label="Search" id="search-bar" align="right">
</nav>

Solved, Bootstrap is not necessary for this, I'm just going to use regular HTML and CSS.

Go take a look at the bootstrap navigations that are pre-built. In most cases, they've been the base of what I needed. You can customise them as much as you really want. The code is provided and the search bars are aligned to the right from the start.
https://getbootstrap.com/docs/5.0/components/navbar/

Related

bootstrap d-flex layout in mobile not working

I have three divs nested inside a parent div that look something like this:
.button-class {
margin-top: 0.5rem;
margin-right: 0.5rem;
margin-left: 45rem;
}
.svg-class {
margin-top: 1rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="d-flex mb-3">
<div class="mr-auto p-2">
<h2>text</h2>
</div>
<div class="button-class p-2">
<ion-button></ion-button>
</div>
<div class="svg-class p-2">
<svg></svg> //code
</div>
</div>
where I have used mr-auto to align the first element to the extreme left, and the other two elements are supposed to go towards the left (but not extreme left) with a certain margin difference.
So, currently what my problem is that I want to show this in the following way. There is a text to the left, and a button and an info symbol svg to the right. And for mobile I want to the text and the button + svg group to go into a columnar style so to speak. So the button extends a bit until it takes almost 80% of the space of the column with the info symbol at the end.
For larger screens it appears fine, but when I do mobile settings, like either using a mobile version of d-flex or adding a line break after the text and before the button (which is visible only in mobile), it ceases to function, and appears as three elements side by side in mobile. For example, I changed d-flex to d-md-flex and got the button and the info-symbol inside a single div (to make them move into separate columns as a group), but then what happens is that in both mobile and larger screens the text and the button appear in one col, and the info-symbol moves to the next. Could anyone please help with this even if its with default CSS? I have tried a variety of different bootstrap classes and they do not work. Really struggling to figure out how best to do this in a way that fits both for larger screens and for smaller ones.
EDIT:
I have tried changing this to default CSS flex where I make the parent container a flex-box and then for the two child elements (one containing the text and the other the button and the svg) I give them flex-grow of 2 and 1 respectively, and then do a flex-direction: row in larger screens and flex-direction: col in smaller screens. It does work, but for some reason one problem with that is that I am unable to style the SVG element on its own, for example if I want to push it down by giving it a margin-top, it has sort of become an svg styling problem now.
I basically just made what you had sketched up. I exchanged some markup for demonstration purposes, but these classes will work for you.
Essentially, Bootstrap doesn't have xs classes specifications in this version of Bootstrap. However, you can use flex-sm-row and flex-column classes for responsiveness. You could use flex-sm-row to keep the row horizontal on sm and up, then flex-column to stack vertically on xs screen widths (<576px).
I also added text-center or text-align: center; on your h2 so that it is centered on a mobile device. I also changed your markup a bit. Re-size the browser below 576 pixels to see the mobile view. See the CSS and HTML changes below:
img {
width: 30px;
height: 30px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="d-flex flex-sm-row flex-column justify-content-between">
<div class="wrapper">
<h2 class="text-center">text</h2>
</div>
<div class="d-flex mr-2 justify-content-center align-items-center">
<div class="button-class">
<button class="mr-3">Button</button>
</div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/%3Fuestionmark_encircled.svg/1280px-%3Fuestionmark_encircled.svg.png">
</div>
</div>
Add this inside head tag.
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</head>
This will work for mobile.

Align Button in the Vertical Center and Keep it Stationary in Bootstrap

I currently have a bootstrap button that is vertically aligned in a column on the left of the screen. I am using the following code:
<div class="col-sm-1 align-self-center">
<button class="btn btn-primary" type="button">Button</button>
</div>
It looks exactly how I want it to on the page, but I recently noticed that as other modules expand the page downward (I have a collapsable panel in another column), this button shifts down as well. I suspect it continues to align itself with the center of the page as the page's height changes.
My question is whether there was a way to vertically align the button in the center as I currently do but also have it remain stationary should the length of the page change. Any suggestions would be greatly appreciated!
I think your issue requires using a wrapper around the element to give it a static reference in terms of its vertical center.
#wrapper {
height: 500px;
background-color: blue;
color: white;
}
#wrapper a {
margin: 0 auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div id="wrapper" class="row">
<a class="btn my-auto">Hello!</a>
</div>
<div class="row">
<p>
This is another row, but the one above is centered within the wrapper above.
</p>
</div>
</div>

Use Bootstrap navbar as a fixed top bar that doesn't collapse

I'm trying to do a simple thing: a top bar (like a fixed navbar) that has a brand name on the left and 2 icons on the right. I'm developping for mobile, so I don't want it to change (collapse, like a navbar does by default) for small screens.
I'm relatively new to Bootstrap, so I guess I'm doing something wrong.
In order to prevent the collapse, I put everything in the navbar-header div. I created a <span class="pull-right"> to get the icons to the right, but I can't get them to render correctly.
(I doubt if this matters, but I'm using Bootstrap 3.0.x.)
This is what I currently have: http://jsfiddle.net/rd73tecL/2/
Try using the following CSS to disable the collapsing effect (as referenced here: Bootstrap 3 - disable navbar collapse):
.navbar-collapse.collapse {
display: block !important;
}
.navbar-nav>li, .navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right !important;
}
I'm unsure as to what you mean by 2 icons on the right: to the immediate right of the logo or right of the navbar? If the latter case, you could put your nav bar links into a div and add the pull-right class to put it to the right of the navbar. You would then also need to add display: inline-block !important; to the css of your navbar logo, as shown in this JSfiddle
Hope that helps.
Try using this code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Fibe</a>
<span class="navbar-right pull-right">
<ul class="navbar-nav nav">
<li class="navbar-link"><span class="glyphicon glyphicon-search"></span></li>
<li class="navbar-link"><span class="glyphicon glyphicon-star"></span></li>
</ul>
</span>
</div>
</div>
</nav>
Just amended
<span class="navbar-right"> with <span class="navbar-right pull-right">
Hope this helps.

Form in Bootstrap navbar has extra padding in collapsed mode

I am using Bootstrap to build a site and am running into issues with the navbar. The navbar normally has the "brand" link and a search box, but when the navbar collapses I want it to be just the search box instead of just the brand link.
Here's the navbar uncollapsed:
navbar-sm
...and here's the navbar collapsed:
navbar-xs
and here's the code:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand hidden-xs">FU</a>
</div>
<div>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label class="sr-only" for="navbarSearchField">Search</label>
<input type="search" class="form-control" placeholder="Search" id="navbarSearchField">
</div>
</form>
</div>
</div>
</nav>
Any way I can get rid of the extra padding and lines above and below the search box? It shows up whether the search box is in the menu or on its own. As this is on an extra-small screen, I don't want to waste screen space if at all possible. :)
To remove the padding you can just override some CSS values of the .navbar-form. Use the appropriate media query so the changes only affect the xs screen size:
#media(max-width:768px) {
.navbar-form {
padding-top: 0;
padding-bottom: 0;
border: 0;
}
.navbar-form .form-group {
margin-bottom: 0;
}
}
See this demo fiddle.
Tip: When customizing Bootstrap CSS or any other framework it is useful to use your browser's inspection tools to figure out what CSS rules you need to modify.

Bootstrap Navbar content stacking

Bootstrap newbie here. I've only today started using Bootstrap to develop a website with, but something's going on that I can't figure out. I am using the following code to create my navigation:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav navbar-nav uppercase bold">
<li>Projecten</li>
<li>Over</li>
<li>Contact</li>
</ul>
<a class="navbar-brand pull-right" rel="home" href="#"><img src="images/97x30.png" style="margin-top:-4px;"></a>
</div>
</div>
The idea is that there's a set of links aligned to the left, and a logo is displayed aligned to the right. Now I have noticed that this works fine as long as the browser window size is larger than 768px (where the bootstrap css still assigns a width to .container) but when the window becomes smaller (and the .container class no longer has a width, I believe), the links on aligned to the left of the navbar start stacking vertically, instead of horizontally.
The uppercase and bold classes in the ul are included in my custom css, to style the links.
If I were to guess, it has something to do with the "block" alignment or perhaps the .container becoming too small to fit the links horizontally, but I am unable to figure this out, and could not find a similar problem on the web.
I figure this is probably something very simple and makes me look stupid, but I hope you can help. Thank you.
You can add CSS like this to prevent it from stacking..
.navbar-nav {
min-width:360px;
float: left;
margin: 0;
}
.navbar-nav>li {
float: left;
}
http://www.bootply.com/114462