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.
Related
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<body class="grey darken-4">
<div class="container">
<div class="row">
<!-- I have tried adding center, center-align as a class to div tags but it in correctly formats. My form elements to the center which was not what I except -->
<div class="col s12 m6 l10">
<!-- adding center, center- align to the row still doesn't fix the issues still -->
<div class="card">
<div class="card-content">
<span class="card-title center ">Loan Calculator</span>
<form action="">
<div class="input-group">
<div class="input-field">
<span>$</span>
<input type="number" class="form-control" placeholder="Amount">
</div>
<div class="input-field">
<span>%</span>
<input type="number" class="ïnput-field" placeholder="Loan" class="form-control">
</div>
<div class="input-field">
<input type="number" class="form-control" placeholder="Years To Pay">
</div>
<div class="center">
<input type="submit" value="CALCULATE" class="btn black">
</div>
<h5 class="text-darken-3 center " id="result">Results</h5>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
I don't know if this is a current issue with Materialize CSS itself.
My goal is to properly format the card so that it has 6 columns for medium display. However, the card, when resized to small width, behaves in a erratic manner (the content is aligned to the left, and the space on the right is left empty).
The cause of the "issue" (I would say it is by-design) is the combination of float: left; and margin-left: auto; with no margin-right: auto; rules applied for columns with .col.m* classes. Because of this, columns are always snapped to the left of the containing row.
If you want to override this to center your column, you need to specify an offset. What Materialize CSS Grid (implemented with float) expects you to do is to express that the column taking ½ of the containing row width should be offset by 6 divided by 2 columns on both sides (aka "centered").
Offsets in Materialize CSS are provided with the offset-* set of classes. In your case, you only need the offset-m* and offset-l* subsets. Let's take a look:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<body class="grey darken-4">
<div class="container">
<div class="row">
<!-- I have tried adding center, center-align as a class to div tags but it in correctly formats. My form elements to the center which was not what I except -->
<div class="col s12 m6 l10 offset-m3 offset-l2">
<!-- adding center, center- align to the row still doesn't fix the issues still -->
<div class="card">
<div class="card-content">
<span class="card-title center ">Loan Calculator</span>
<form action="">
<div class="input-group">
<div class="input-field">
<span>$</span>
<input type="number" class="form-control" placeholder="Amount">
</div>
<div class="input-field">
<span>%</span>
<input type="number" class="ïnput-field" placeholder="Loan" class="form-control">
</div>
<div class="input-field">
<input type="number" class="form-control" placeholder="Years To Pay">
</div>
<div class="center">
<input type="submit" value="CALCULATE" class="btn black">
</div>
<h5 class="text-darken-3 center " id="result">Results</h5>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
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 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>
I'm trying to have a responsive input and a logo ontop of it using bootstrap. I tried every thing within my knowledge to do it. Columns (gridsystem), resize, etc. No matter how I do it. It turns out buggy. i.e when I size the browser window down it starts getting out of order.
Resize the result window to see how everything is pulled out of porportion.
http://jsfiddle.net/Cbuyn/
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="http://placehold.it/500x300" class="img-responsive" alt="Responsive image">
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
This is done with Bootstrap 3. I'm out of ideas..
If you want to center your image (assuming you add an id="main-img" to the image):
#main-img {
margin-left: auto;
margin-right: auto;
}
jsFiddle Demo (image centered)
If you want to make the image full width:
#main-img {
width: 100%;
}
jsFiddle Demo (image full width) (Updated as per comments)
I see from the comments that you have a solution. That said, the following works fine without adding the additional classes. It will be 100% at xs and sm sizes, then beginning at the md size, it will be 50% of the container. Remember, responsive isn't about people resizing their browser, it's about different device sizes. Most people (other than developers who build responsive websites and are trying to test them) don't resize their browsers when they are looking at a page. Also, if you're on a mobile type device, in most cases you can't resize your browser. So, if you want the 992px (md) and up viewports to see the input/image at only 50% of the container, your code was perfectly fine.
DEMO
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="http://placehold.it/500x300" class="img-responsive" alt="Responsive image" />
</div>
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="" />
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
As #dan stated, if you want the image to be the same width as the input you can add:
img {
width: 100%;
}
or to center it and make it remain no larger than it's max-size:
img {
display: block;
margin: auto:
}