I want to align the button to right side.
<div class="navbar-header">
Logo
<button type="button" class="navbar-toggler" (click)="collapsed=!collapsed">
<span class="navbar-toggler-icon"></span>
</button>
</div>
Current alignment of menu bar
I have already tried using float on button but its not working.
Give display: flex; width: 100%; to the parent and put this tag after your a tag:
<div style="flex-grow: 1"></div>
Should be like this:
<div class="navbar-header" style="display: flex; width: 100%;">
Logo
<div style="flex-grow: 1"></div>
<button type="button" class="navbar-toggler" (click)="collapsed=!collapsed">
<span class="navbar-toggler-icon"></span>
</button>
</div>
Related
My goal is simple: having a label on the left, and a download button on the right.
They should result in the same line, preferably aligned in the middle of the headline.
But at least the following is not working:
<div>
<h1 style="display:inline-block">My Label left</h1>
<div style="float:right">
<a href="/export" target="_blank">
<button type="button" class="btn btn-outline-primary">
<span class="glyphicon glyphicon-download-alt"> Download</span>
</button>
</a>
</div>
</div>
https://jsfiddle.net/Lbav4mhe/
Add a class or id to the outer/wrapper div and then set some css to it, like the below code shows. (Also, you don't need that float: right if using the CSS I provided)
#wrapperDiv {
display: flex;
align-items: center;
justify-content: space-between;
}
<div id="wrapperDiv">
<h1>My Label left</h1>
<div>
<a href="/export" target="_blank">
<button type="button" class="btn btn-outline-primary">
<span class="glyphicon glyphicon-download-alt"> Download</span>
</button>
</a>
</div>
</div>
I have written this markup:
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand overflow-hidden pr-3" href="#Url.Action("Index","Home")">
<!--<img src="~/Content/Theme/images/logo-dark.png" alt="" />-->
<img src="~/Content/Theme/images/Velosi/applusLogo.jpg" style="height:50px" alt="" />
</a>
<div class="d-sm-none">
<h3>THIS SHOULD BE ONLY DISPLAYED ON MOBILE PHONES</h3>
</div>
<button class="navbar-toggler" type="button" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<div class="hamburger hamburger--emphatic">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</button>
I expect the
<div class="d-sm-none">
<h3>THIS SHOULD BE ONLY DISPLAYED ON MOBILE PHONES</h3>
</div>
to be only displayed on cell phones and not beyond, but it is displayed on every screen size. Why is that?
try this：
<div class="d-none d-sm-none d-md-block">
I am relatively new to web development in general and am having a layout crisis: I have a container-fluid that has a row split into two *col-md-6*s. Within a col-md-6 I want to be able to position elements horizontally. As shown in my code/picture; I am trying to make a simple div that is 95% the height of the button-group and shows up next to it...however it is showing up below it and is very short (I want it to be as tall as the button group). What is the protocol for sizing/positioning elements next to each other in Bootstrap like this?
<div class="container-fluid">
<div class="row">
<div class="col-md-6" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
CSS:
#prod_view{
background: lightcoral;
width: 69%;
height: 95%;
margin-left: 23%;
border: solid;
}
What it looks like now:
I want the "yo" box to be more rectangular and to the right of the button group.
Here's a flex layout that will do that. You can use the justify-content property to affect the horizontal alignment, and align-items will affect the vertical alignment. Here's a visual guide for flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.custom-row {
display: flex;
justify-content: space-between;
}
.custom-row > div:last-child {
width: 69%;
}
#prod_view {
height: 95%;
background: lightcoral;
border: solid;
}
<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-md-6 custom-row" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
</div>
Another way is with a single flexbox class. Add it to the row and col-md-6:
.flex {
display: flex;
}
<div class="container-fluid">
<div class="row flex">
<div class="col-md-6 flex" style="background-color: lightcyan">
<div class="btn-group-vertical btn-group-lg">
<button type="button" class="btn btn-primary">Quick Select</button>
<button type="button" class="btn btn-primary">Show in Depth</button>
<button type="button" class="btn btn-primary">Delete Product</button>
</div>
<div id="prod_view">
yo
</div>
</div>
</div>
</div>
http://www.codeply.com/go/wvCRJ0ufEB
In Bootstrap 4, flexbox is default so there is no need for the extra class.
With the following code, on a "middle screen", the result is OK.
But on a small screen (smartphones), it is not.
I wish the input and the submit button (magnifying glass) are aligned on the same line.
How I can do that?
<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-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="#">Diko Responsive</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form class="navbar-form navbar-right" action="index.php" method="get">
<div class="form-group" >
<input id="terme" name="terme" placeholder="Veuillez saisir un terme" class="form-control input-xs" type="search">
<button type="submit" class="btn btn-info"><span class="glyphicon glyphicon-search"></span></button>
</div>
</form>
</div>
</div>
</nav>
Thanks.
EDIT: I added this CSS file after the advices of #NiklasMH
#media (max-width : 768px){
.form-group input {
width: calc(70% - 32.5px);
}
.form-group button {
width: 40px;
}
}
But as you can see, both are still not aligned.
You almost there. You only forgot to call class=input-group
You no need to add another media queries there.
HTML
<div class="input-group">
<input id="terme" name="terme" placeholder="Veuillez saisir un terme" class="form-control input-xs" type="search">
<span class="input-group-btn">
<button class="btn btn-info" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
Here is the DEMO
I don't know the twitter-bootstrap that good, so this answer is more about what you can do to the CSS.
Bad practice
Some say it's bad practice, but you could eigther use a table to align them on the same row. Then you also can make the left or right column in fixed width like:
td:last-child {
width: 32px;
}
Good practice
Or you can use the calc-value in CSS, which is widly supported now (except in Opera Mini - ref caniuse.com), like:
.form-group input {
width: calc(100% - 44px); /* Minus a little more (4px) than the button-width */
}
.form-group button {
width: 40px;
}
Remember that padding will make the element bigger and force more space, so set box-sizing to border-box (default content-box) to avoid this:
.form-group input, .form-group button {
box-sizing: border-box;
}
JSFIDDLE
.form-group input, .form-group button {
box-sizing: border-box;
}
.form-group input {
width: calc(100% - 44px);
max-width: 160px;
}
.form-group button {
width: 40px;
}
<div class="form-group">
<input placeholder="text"/>
<button>btn</button>
</div>
I have a master page that has a header bar in the page that is using the bootstrap.
Here is the code
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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>
</div>
<div id="navbar" class="navbar-collapse collapse">
<div class="left">
<asp:ImageButton ID="btn_home" runat="server" ImageUrl="../Images/HeadHome.png" CssClass="headIcons" />
</div>
<div class="left">
<asp:ImageButton ID="btn_config" runat="server" ImageUrl="~/Images/HeadConfig.png" CssClass="headIcons" />
</div>
<div class="right">
<asp:ImageButton ID="btn_profile" runat="server" ImageUrl="~/Images/HeadProfile.png" CssClass="headIcons" />
</div>
</div>
<!--/.navbar-collapse -->
</div>
</nav>
Here is my Webform ASPX code
<div class="row">
<div class="col-md-12"">
<div class="b-orange" style="background-color: #f29123; height: 5px;"></div>
</div>
</div>
<div class="row">
<div class="col-md-12" style="top: 60px;">
<img src="../Images/bSimplex_Header_Logo.jpg" style="margin: 0 auto; display: block;" />
</div>
</div>
The problem is that the page adds the header but doesn't recognise the height so when i add things into the page it goes from the top and not from the header
Some images:
As you can the first row in my ASPX page is starting from the very top and not from the navbar in the master page.
That is because navbar-fixed-top makes the navbar sticky by position: fixed;.
To have page content always be below the navbar, add body padding:
body { padding-top: 50px; }
Or even better using less:
body { padding-top: #navbar-height; }
See Bootstrap documentation on fixed-to-top navbar