I am attempting to center the search bar in my navbar. I am using bootstrap, I tried text-center on the md-4 but it had no effect.
Here is a link to my code.
http://bootsnipp.com/snippets/50b38
Bootstrap uses a grid of 12 columns. Your code had the first column be 8 and the 2nd one be 4. This would mean that your first column would be 2/3 of the page. By making it col-md-4, it allows your middle div to be center.
<div class="row top-header">
<div class="container">
<div class="col-md-4">
<img src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
</div>
<div class="col-md-4">
<div id="search-center">
<div class="input-group">
<input type="text" class="form-control input-lg" placeholder="Search" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
Here is an updated source:
http://bootsnipp.com/user/snippets/E7WgX
over your code in css tag, i put that and seems ork
.top-header {
background-color: #D9D9D9;
text-align:center;
}
Expect it help you
Related
I have some buttons "the ones with information icon, and I want to align them so that to be arranged under each other vertically
image_1 shown the current alignment of the buttons.
Please let me know how to achieve aligning them vertically under each other using CSS and HTML
I thought of setting an equal margin to the left side starting from the check-box but I do not know how to do it
HTML markup:
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGGREGATED_AREAS')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_AGRICULTURAÖ_AREAS')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
<button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_SYNOPS_WATER_AREAS')">
<clr-icon shape="help-info" class="is-solid"></clr-icon>
</button>
img_1:
You can use Bootstrap classes such as row and column. So the layout would like this.
Read more about Bootstrap Grid system
<div>
<div class="row">
<div class="col-2">
<input type="checkbox" />
</div>
<div class="col-8">
Aggregated Areas
</div>
<div class="col-2">
<span style="border: 1px solid lightgreen">i</span>
</div>
</div>
<div class="row">
<div class="col-2">
<input type="checkbox" />
</div>
<div class="col-8">
Aggregated Areas
</div>
<div class="col-2">
<span style="border: 1px solid lightgreen">i</span>
</div>
</div>
<div class="row">
<div class="col-2">
<input type="checkbox" />
</div>
<div class="col-8">
Aggregated Areas
</div>
<div class="col-2">
<span style="border: 1px solid lightgreen">i</span>
</div>
</div>
</div>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
From the image I assume the box has a fixed width. You can use this as your limit and add an inline span between the text and the button and set it's width to fill the remaining available space. That should push the buttons to the right side.
I am trying to make a simple example where I have a row and inside that row is columns. One column is for the name of the left-hand side and on the right-hand side is the three buttons that exist. However, I am having issues placing the buttons properly on the right side as well as spacing them at an appropriate distance. I tried using the max-width in my CSS but I just ended up screwing up the project even more. Below is my HTML/CSS file:
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div>
<h4> Group Pattern Test</h4>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Save</button>
</div>
<div class="mx-auto">
<button class="btn btn-primary">Close</button>
</div>
<div class="ml-auto">
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
You would want to use a btn-toolbar to group your buttons in-line.
#submitGPBtn {
margin-right: 30px;
}
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
This question has been answered well here. But here's an example below, add float-right class to your button bar, you can put a breakpoint in the class like float-sm-right but float-right works on any viewport width.
#submitGPBtn {
margin-right: 30px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Group Pattern Test
</div>
<div class="col">
<div class="btn-toolbar float-right">
<button class="btn btn-primary">Save</button>
<button class="btn btn-primary">Close</button>
<button class="btn btn-primary" id="submitGPBtn">Submit</button>
</div>
</div>
</div>
In bootstrap ml-auto is fine to align buttons to the right, but you should apply it only to the first item after the "offset".
I added ml-1 to space the other buttons and a lightyellow background just to show where the container ends.
My personal suggestion when you use bootstrap is to code inside a container, you can't set its size to what you want but it prevents stretching in wide monitors.
.container {
background-color: lightyellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col text-left">
<h4> Group Pattern Test</h4>
</div>
<button class="btn btn-success ml-auto">Save</button>
<button class="btn btn-success ml-1">Close</button>
<button class="btn btn-success ml-1" id="submitGPBtn">Submit</button>
</div>
</div>
I need to make this header exactly like the image below. With the text in the center and the 2 images on each side. I've tried everything and the only way I had success was making the hole header into a whole image (not good). By the way, it needs to be responsive to mobile access, as the whole page is (I'm using bootstrap). Here is my whole code (I guess the only important part is the <header> though):
<body>
<header>
<div class="row">
<div class="col-sm-2 col-xs-1"></div>
<div class="col-sm-8 col-xs-10">
<img class="img-responsive logoheader" src="files/Screenshot_1.png" alt=""/>
</div>
<div class="col-sm-2 col-xs-1"></div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-1"></div>
<div class="col-sm-6 col-xs-10">
<center>
<h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4>
<h5>DECRETO 122/2017</h5>
</center>
<br>
<div id="dangerindex" class="alert alert-danger" style="display:none;"> </div>
<div id="warningindex" class="alert alert-warning" style="display:none;"> </div>
<form name="main-form" id="main-form" method="post" action="index2.php">
<label> NOME COMPLETO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" />
</div>
<label> DATA DE NASCIMENTO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker">
</div>
<button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
<button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
</form>
</body>
As you can see, the header is just a screenshot of what I want. How can I make it properly with CSS?
Here is the image (Screenshot_1.png):
And this is how my page looks like right now:
Edited based on comment.
Make your image logos the same dimension (I used 600 × 345px but tweak to your benefit).
Set your row container to flex to vertically center text to the logos.
Make img width:100% in your CSS to keep ratio on viewport resize.
Tweak .headerText font-size to your benefit.
Working Resizable Fiddle
With this setup you can maintain the row on mobile as well, considering it's 3 pictures, it may be too much to stack them vertically.
img {
width: 100%;
}
.headerText {
font-size: 9px;
line-height: 1.4;
display: flex;
flex:1;
align-items: center;
}
.flex {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
/* make text smaller on mobile */
#media (max-width: 767px) {
.headerText {
font-size: 9px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="row flex">
<div class="col-xs-4">
<img class="img-responsive logoheader" src="https://i.imgur.com/wuEStaT.jpg" alt="" />
</div>
<div class="col-xs-4 text-center text-uppercase headerText">
<span>
prefeitura municipal de guaiba<br>
estado do rio grande do sul<br>
gestao 2017/2020<br>
secretaria municipal de educacao
</span>
</div>
<div class="col-xs-4">
<img class="img-responsive logoheader" src="https://i.imgur.com/NInC1cx.jpg" alt="" />
</div>
</div>
</header>
<div class="jumbotron">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-xs-1"></div>
<div class="col-sm-6 col-xs-10">
<center>
<h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4>
<h5>DECRETO 122/2017</h5>
</center>
<br>
<div id="dangerindex" class="alert alert-danger" style="display:none;"> </div>
<div id="warningindex" class="alert alert-warning" style="display:none;"> </div>
<form name="main-form" id="main-form" method="post" action="index2.php">
<label> NOME COMPLETO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" />
</div>
<label> DATA DE NASCIMENTO DA CRIANÇA:*</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker">
</div>
<button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
<button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button>
</form>
Step One: Divide your (Screenshot_1.png) image file
Firstly, you are going to need to divide your image (Screenshot_1.png) into 3 parts. In doing so, you will have 3 image files, as follows:
Image 1: Your left Emblem.
Image 2: Your central text.
Image 3: Your right logo.
In dividing your image into 3 parts, you will find that you will be able to ensure that they become responsive to the screen sizes they are displayed on. Both in terms of size and also in that they then 'stack' on top of each other on smaller devices, such as Mobile Phones.
Step Two: Bootstrap Installation:
Head over to Bootstrap and follow their guide on installing Bootstrap to your website. Once you have successfully installed Bootstrap, you will be able to access their CSS Classes, which will allow your website to become responsive.
Additional Resource: Bootstrap Grid Layout
Step Three: Modify your HTML Code:
If you have correctly installed the Bootstrap files, you can then replace your header code, with the below code. Don't forget to replace [Image 1], [Image 2] and [Image 3] with the correct Image SRC.
<header>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 1]</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 2]</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 3]</div>
</div>
</header>
As a side note, it is worth knowing that each Row is made up of 12 'Columns'. When assigning a Column Number ('col-xs-4' etc), ensure that each row's columns add up to 12. The above should work fine but you would likely need to tinker with the numbers, in order to achieve the right column widths for your website.
I have something like this:
<div class="form-group col-sm-6">
<div id="total">$50,20</div>
<button class="btn btn-theme" data-role="button" id="purchase"><i class="fa fa-envelope-o"></i>Send</button>
</div>
I want the total to be to the left of the button, but it appears over the button. I already tried making the column bigger but it stays there so the problem is not on the size.
You want it on the left? like this?
then,
<div class="form-group col-sm-6">
<div class="col-xs-1">
<label id="total">$50,20</label>
</div>
<div class="col-xs-1">
<button class="btn btn-theme" data-role="button" id="purchase"><i class="fa fa-envelope-o"></i>Send</button>
</div>
</div>
i would do it like this
<div class="form-group col-sm-12">
<div class=" col-sm-6" id="total">$50,20</div>
<div class=" col-sm-6">
<button class="btn btn-theme" data-role="button" id="purchase"><i class="fa fa-envelope-o"></i>Send</button>
</div>
div is by default a block element and that means that it takes up the whole available space.
Try to add this css rules:
#total {
display: inline-block;
float: left;
}
Alternatively, you could make the amount a span element like
<span id="total">$50,20</span>
I'm using Bootstrap but with a non-collapse nav. I'm trying to have the search form placed in center of the col-md-6. I seem to have tried everything so far but nothing works but it still aligns left in the column. Anyone know how I can achieve that?
Here's my code:
<div class="navbar navbar-default">
<div class="container" style="margin-top:14px;">
<div class="row">
<div class="col-md-3">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#"><%= image_tag ("logo.png") %></a>
</div>
</div>
<div class="col-md-6">
<div class="navbar-header search">
<input type="text" id="search" class="form-control" placeholder="Search"></input>
</div>
</div>
<div class="col-md-3">
<div class="navbar-header pull-right">
<button type="button" class="btn btn-link" style="margin-top:7px;text-decoration:none;font-weight:bold;">Sign In</button>
</div>
</div>
</div>
</div>
</div>
Thanks alot in advance!
you can do it with following set of CSS rules:
<div class="row">
<div class="col-md-3">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="#"><%= image_tag ("logo.png") %></a>
</div>
</div>
<div class="col-md-6" style="
text-align: center;
">
<div class="text-center navbar-header search" style="
display: inline-block;
float: none;
margin: 0 auto;
">
<input type="text" id="search" class="form-control" placeholder="Search">
</div>
</div>
<div class="col-md-3">
<div class="navbar-header pull-right">
<button type="button" class="btn btn-link" style="margin-top:7px;text-decoration:none;font-weight:bold;">Sign In</button>
</div>
</div>
</div>
Make alignment within central column div text-align: center; and display the block with float: none;.
Here is plunk with properties assigned CSS classes: http://plnkr.co/edit/Iu3rnVK5dLi7fiaSHBRj?p=preview
make it's position absolute, check in firebug if it is inheriting float from any other class. In bootstrap you have to beware of these things as well.
after doing this go for auto margin or try with top left positions by giving values in percentage values
If you can replace the div parent with a form element you could do it without additional styles:
<div class="col-md-6">
<form class="form-inline text-center">
<input id="search" class="form-control" type="text" placeholder="Search">
</form>
</div>
JSFiddle
Bootstrap alignment classes