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
Related
I am trying to implement a single page application where I want divs to display one below the other. But on resizing the viewport to various screen sizes, the positioning is getting overlapped and leaving extra spaces in between. I have codepen example to explain the problem in a better way.
https://codepen.io/SaloniDesai/pen/zPBZJr
How to make the divs appear same for every screen size ?Do i need to shuffle the way I have created the layout of the page ?
<div id="headliner" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
<div id="search">
<form>
<input type="search" ng-model="vm.search.gif" value="" placeholder="type what you're looking for" />
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
<div class="row">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}" title="{{g.title}}">
</div>
</div>
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="row">
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}" height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
First, your bootstrap structure isn't good, there isn't container, neither rows or col.
Try this one:
<div class="container-fluid">
<div class="row">
<div id="headliner col-md-12" class="jumbotron text-center">
<h1>SearchGIFY app</h1>
<p>search for any GIF you want!</p>
</div>
</div>
<div class="row">
<div id="search">
<div class="col-md-12">
<form class="form-inline text-center col-md-6 col-md-offset-3">
<div class="form-group">
<input class="form-control" type="search" ng-model="vm.search.gif" value=""
placeholder="type what you're looking for"/>
</div>
<button type="submit" class="btn btn-primary" ng-click="vm.performSearch()">Search</button>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="card">
<img ng-repeat="g in vm.giphies" ng-src="{{g.images.original.url}}" height="{{g.images.fixed_height}}"
title="{{g.title}}">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="jumbotron text-center" id="trendingBar">
<h3>Trending gifs</h3>
<div class="thumbnail">
<img ng-repeat="trending in vm.trendingGifs" ng-src="{{trending.images.original.url}}"
height="{{trending.images.fixed_height.height}}" title="{{trending.title}}">
</div>
</div>
</div>
</div>
Second, you add a lot of absolute class with % height and width. You don't have to do that if you're using bootstrap, all the responsive stuff is handled by the bootstrap grid with col classes. Take a quick look at the grid bootstrap documentation : https://getbootstrap.com/docs/3.3/css/#grid
Here's the codepen working responsively with some modification : https://codepen.io/anon/pen/MOemgw ;)
I'm trying to use flexbox to align vertically a section.
So this is what I'm trying to align vertically:
HTML:
<!--Top Hero Section -->
<div class="d-flex hm-hero justify-content-center">
<div class="container">
<div class="row align-items-end">
<div class="col-12">
<h1 class="text-center">Fix Your Problem Today!</h1>
<p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
</div>
<!--Form Section -->
<div class="col-12">
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6">
<input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
</div>
<div class="col-12 col-md-4">
<input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
</div>
<div class="col-12 col-md-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
Regarding CSS, I've only applied this:
.hm-hero {
background: url("../img/main_pic.png") no-repeat;
background-size: fill;
min-height: 600px;
}
I can't figure out why flexbox is not working. I've tried two classes, align-content/items-center in whatever div possible and still can't get it to work.
So since I have that full width div with the background image, inside it is a container div, which I'm trying to get it to stay vertically. I really want to avoid putting a 200px margin top to this. Is this is a Bootstrap 4 bug?
I added the align-items-center class to the flex div parent and it worked. As long as you have a height on the .hm-hero the content will be centered. Hope this helps. JSFiddle
.hm-hero {
background: url("https://placehold.it/960x600") no-repeat;
background-size: fill;
min-height: 600px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<!--Top Hero Section -->
<div class="d-flex hm-hero justify-content-center align-items-center">
<div class="container">
<div class="row align-items-end">
<div class="col-12">
<h1 class="text-center">Fix Your Problem Today!</h1>
<p class="text-center">Start searching for a contractor or company around your area and get your problem fixed in a matter of hours!</p>
</div>
<!--Form Section -->
<div class="col-12">
<div class="form-group row justify-content-center">
<div class="col-12 col-md-6">
<input class="form-control" type="text" value="e.g. plumbing, carpentry" id="example-text-input">
</div>
<div class="col-12 col-md-4">
<input class="form-control" type="text" value="e.g. city name, postcode" id="example-text-input">
</div>
<div class="col-12 col-md-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
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 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
So I have a major style change whereas when all my views were originally setup I had used Bootstrap and relied on the container class to adjust for media queries at breakpoints of 1200px, 992px, and 768px. All my form input and other content work their padding and all off of the container for paddings, margins, etc... Now, it is requested that the width be 100%, but all the content to stay where it is so that the background colors styling fills the width of display.
I was trying to think of how I can add another container class to make this work over all of the views. What are some recommendations on this with keeping the constraints of content to the 1200px and so on (for media queries and such), but make the other areas spread to that 100%?
Here is an image capture of it now. It is just the tan and dark gray area with the topo image that would expand 100% while all else stays within constraints of container class.
And my code is structured as so you can see where my delima is with over-riding bootstraps container class:
<div class="container">
<form role="form">
<div class="naviaHead col-md-12">
<div class="naviaHeader">
<div class="inner">
<div class="col-md-6 loginArea">
<h1 class="col-md-8">Login</h1>
<div class="form-group">
<div class="form-group col-md-8 naviaInp">
<input type="text" name="userName" class="form-control" placeholder="username" data-ng-model="loginData.userName"autofocus>
</div>
<div class="form-group col-md-8 naviaInp">
<input type="password" name="passWord" class="form-control" placeholder="password" data-ng-model="loginData.password">
</div>
<div style="clear: both;">
<input type="button" class="naviaBtn naviaBlue" data-ng-click="login()" value="login">
<div data-ng-hide="message == ''" class="alert alert-danger">
{{message}}
</div>
</div>
<div class="loginForget">
<span><a class="naviaLink" href="#/logreg/forgotUser">forgot username</a> or <a class="naviaLink" href="#/logreg/forgotPass">forgot password</a></span>
</div>
<div class="sowLogin">
<img class="col-md-3" src="ppt/assets/images/login/sowIcon.svg">
<p class="col-md-9"><a class="naviaLink" href="https://pebb.flex-plan.com/part/PortalRegistration.aspx">PEBB eligible State of Washington employees please click here to access the portal</a></p>
</div>
</div>
</div>
<div class="col-md-6">
<img style="padding-left: 25%;" src="ppt/assets/images/login/naviaLogo.png">
</div>
</div>
</div>
</div>
</form>
<div class="loginLearn">
<div id="area1" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage1-full.png">
<div class="learnText">
<h3 class="teaserTitle">Online Account Access</h3>
<p class="teaserText">24/7 Access to balances, claim submissions and all things Navia!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area2" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage2-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">Navia Benefits Card</h3>
<p class="teaserText">Don't wait for reimbursement!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
<div id="area3" class="col-md-4 learnSections">
<img src="ppt/assets/images/login/teaserImage3-full.png">
<div class="learnText">
<h3 style="margin-top: 0;" class="teaserTitle">FlexConnect</h3>
<p class="teaserText">Link your FSA to your insurnace and file claims instantly!</p>
<button type="button" class="btn btn-primary learnButtons">learn more</button>
</div>
</div>
</div>
<div style="background-color: #ede8e2; height: 150px; clear: both;">
<!-- intentionally blank -->
</div>
</div>
This will solve your purpose
<div class="container-fluid" style="background-color:red;">//This will be 100% width
<div class="container">//Inside this put your content as it was to make it indent as previous
//Your page HTML here
</div>
</div>