I am trying to move an input group inside of my page header. When I try to use a row with columns, the HR doesn't run all the way through which bothers me.
This is what I am trying to achieve:
<div class="row">
<div class="col-md-8">
<div class="page-header">
<h3 class="text-primary">EMP <small>My Dashboards</small></h3>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i> Search</span>
<input type="text" class="form-control" placeholder="Search Results..." id="search" name="search">
</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/eo75juzL/
I am just trying to move the search input group to be right-aligned with the H3 and keep the line running all the way through.
I've updated your fiddle.
The horizontal line is part of the page-header, so I moved your columns within this div. Normal bootstrap behavior now applies, and your search box is right aligned.
To place your search box inside header You need to add this css.
.dash_input {
margin-top: -30px;
}
.dashboard {
margin-top: -40px;
}
.dash_input {
margin-top: -30px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="row">
<div class="page-header">
<div class=" dashboard col-md-8 col-lg-8 col-sm-8 col-xs-8 ">
<h3 class="text-primary">EMP <small>My Dashboards</small></h3>
</div>
<div class="dash_input col-md-4 col-lg-4 col-sm-4 col-xs-4 pull-right">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-search"></i> Search</span>
<input type="text" class="form-control" placeholder="Search Results..." id="search" name="search">
</div>
</div>
</div>
</div>
</body>
</html>
You had some problem with your div mark-up. tried to fix that. take a look at the above snippet. Also I would suggest you to use class="navbar". in that case you would have more flexibility.
Related
I'm trying to create a website using bootstrap where the title and the search bar is at the center of the screen. I tried adding the my-auto, but that doesn't do anything. It shouldn't be difficult, but I can't make it work. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container" style="margin-top: 8%;">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1>Movie</h1>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
<span class="input-group-btn">
<button type="button" class="btn btn-outline-primary">search</button>
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</span>
</div>
</div>
</form>
</div>
</div>
<p>movie!</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You can use display:flex; property to center the content.
.container{
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
text-align: center;
}
<div class="container" style="margin-top: 8%;">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div id="logo" class="text-center">
<h1>Movie</h1>
</div>
<form role="form" id="form-buscar">
<div class="form-group">
<div class="input-group">
<input id="1" class="form-control" type="text" name="search" placeholder="Search..." required/>
<span class="input-group-btn">
<button type="button" class="btn btn-outline-primary">search</button>
<i class="glyphicon glyphicon-search" aria-hidden="true"></i>
</span>
</div>
</div>
</form>
</div>
</div>
<p>movie!</p>
</div>
What youre looking for is flex box,
Try adding to the <div class="row"> the style of
display: flex;
flex-direction: column;
align-items: center;
I am trying to set a redigera button after the avsluta button
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
why my redigera button not set after the avsluta button
what I am trying
first I give the space 4 and then 4 and then 4 but avsluta button is set the below line
again I give the space 4 and then 3 and then 2 but avsluta button is set the below line
but not work
I am making a mistake partition of bootstrap or too many space I give
Reference:
Add "d-flex flex-row" to the div containing the buttons.
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4 d-flex flex-row">
<button class="form-control" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
Just add btn class for the button. By default all html elements are block elements. This will take a complete row for the display of the element. adding btn class will make the button an inline-block element. This will allow multiple elements in the same line.
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4">
<button class="form-control btn btn-primary" style="width:80px;height:50px;" type="button">Avsluta</button>
<button class="form-control btn btn-primary" style="width:90px; height:50px;" type="button">Redigera</button>
</div>
</div>
https://jsfiddle.net/aq9Laaew/17194/
I want 8 columns to be centered in the middle of the page but I'm having trouble actually getting it to stay in the middle and wrap properly when used at different device sizes.
Below is the relevant code for this part of the website. The wrapping issue with the text is shown in the large breakpoint I believe, and by the medium breakpoint things look fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Zac Litwinchuk : About</title>
<meta name="author" content="name">
<meta name="description" content="description here">
<meta name="keywords" content="keywords,here">
<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\style.css">
<script defer src="js\fontawesome-all.min.js"></script>
</head>
<body class="bg-secondary">
<div class="container-fluid bg-light">
<div class="col-md-10 offset-md-2 my-3 px-0 ">
<h2>Get In Touch</h2>
<p>Please feel free to contact me via the below form</p>
<p>Do not hesitate to contact me via social media. My social media links are in the footer section of my website.</p>
<p>A downloadable version of my resume is available at the below link.</p>
<a class="btn btn-success text-light">Download My Resume</a>
</div>
<hr>
<form class="offset-md-2 my-3 ">
<div class="form-row">
<div class="form-group col-md-5">
<label>First Name</label>
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="form-group col-md-5">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-10">
<label>Email Address</label>
<input type="email" class="form-control">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-10">
<label>Your Message</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</div>
<button type="submit" class="btn btn-success btn-lg">Send</button>
</form>
<footer class="row bg-dark text-light">
<div class="col-md-8 mt-2 mb-1">
<p> © | 2018</p>
</div>
<div class="col-md-4 text-right mt-2 mb-1">
<a class="text-light" href="#"><i class="fab fa-twitter-square fa-2x mr-1"></i></a>
<a class="text-light" href="#"><i class="fab fa-linkedin fa-2x mr-1"></i></a>
</div>
</footer>
</div>
<script src="js\jquery-3.2.1.slim.min.js"></script>
<script src="js\popper.min.js"></script>
<script src="js\bootstrap.min.js"></script>
<script src="js\typewriter.min.js"></script>
Try this
col-md-10 mx-auto instead of col-md-10 offset-md-2 my-3 px-0
You're very close to your desired result but there are some structural errors in your approach. You haven't wrapped your .col-*-* inside the .row element which will always result in your columns being slightly 'wrong' in their layout. The other issue is that offset-*-* applies to both the left and right right. So offset-md-2 actually means "Offset this column by 2 on the left, and 2 on the right".
A minimal approach demonstrating your desired layout would look something like the below code. I've added classes to show/hide certain text at various breakpoints so you can see how it would adjust:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="bg-success p-4 text-light d-block d-md-none d-lg-none"><strong class="mr-2">XS:</strong>I am 12 columns with no offset.</div>
<div class="bg-danger p-4 text-light d-none d-md-block d-lg-none"><strong class="mr-2">MD:</strong>I am 10 columns with 1 offset left and right.</div>
<div class="bg-info p-4 text-light d-none d-lg-block"><strong class="mr-2">LG:</strong>I am 8 columns with 2 offset left and right.</div>
</div>
</div>
</div>
You'll need to expand the snippet to view all the breakpoints so you can see how offset works in conjunction with col.
I am using BootStrap grid to design my html pages. Everything is working fine except for small screens. In small screens the views are overlapping like below
I am using the below code
div class="container" >
<div class="row">
<div class=" col-xs-6 col-sm-offset-1
col-sm-4 col-md-offset-2 col-md-3">
<div id="poster">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg">
</div>
</div>
<div class="col-sm-offset-1 col-sm-4 col-xs-6 col-md-2" >
<div id="ratingdiv">
<label>Your Rating</label>
<div id="rateYo"></div>
<div class="editbtn">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>
</div>
<div class="deletebtn">
<button>Delete</button>
</div>
</div>
</div>
</div>
</div>
I gave "col-xs-6" but still its not working.
Could some one tell me what I am doing wrong.
Really appreciate any ideas or suggestions.
Thanks in advance
You missed some closing tags. Here you go. Let me know if this is what you've expected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-8 col-md-6 col-lg-4">
<img src="http://ia.media-imdb.com/images/M/MV5BMTk2NTI1MTU4N15BMl5BanBnXkFtZTcwODg0OTY0Nw##._V1_SX300.jpg" class="img-responsive">
</div>
<div class="col-xs-6 col-sm-4 col-md-2 col-lg-2">
<div id="ratingdiv">
<div class="row">
<label>Your Rating</label>
<div id="rateYo"></div>
</div>
<div class="row">
<button type="button" class="btn btn-info btn-md">Edit</button>
<button type="button" class="btn btn-danger btn-md">Delete</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you don't have provide any css , that's why i got two opinions. first one i think you images overlapping the col-xs-6 and the solution is below . may be this will fix your issue
#poster {
width:100%;
float:left;
}
#poster img {
width:100%;
}
otherwise i think you have set position:absolute to #ratingdiv , if you set postion to #ratingdiv just change position:relative to the media queries
I'm using bootstrap to style the page, using standard bootstrap classes like container, row, col-sm-offset-n (to get appropriate spacing). But some of the components look very bad on mobile screen.
I have following bootstrap components on my page
container
|------row
|-----bootstrap panel
|------row
|-----div which holds error messages
|------row
|-----a form having a textarea and a button
|------row
|-----span tag
The website looks good on large screen but on smaller screen the textarea within the form gets to the leftmost side of the mobile screen. I want it to be shown in the middle. Similarly the last span tag gets attached to the leftmost side of the mobile screen. I want it to be shown in the middle.
Here is what is looks like on bigger and smaller screens respectively.
Larger Screens
Smaller Screens
You can see the problem here screen size
Below is the markup I used
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/images/favicon.png" type="image/x-icon">
<title>Say your heart out ...</title>
<!--<meta name='viewport' content='user-scalable=no'>-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/libs/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/libs/css/custom.css"/>
<link rel="stylesheet" href="/libs/css/toaster.min.css"/>
<script src="/libs/js/jquery.min.js" type="text/javascript"></script>
<script src="/libs/js/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<script src="/libs/js/angular.min.js" type="text/javascript"></script>
<script src="/libs/js/main.js" type="text/javascript"></script>
<script src="/libs/js/spin.min.js" type="text/javascript"></script>
<script src="/libs/js/angular-spinner.min.js" type="text/javascript"></script>
</head>
<body ng-app="mean" ng-controller="MainCtrl">
<toaster-container></toaster-container>
<br/>
<div class="container">
<div class="row">
<div class="col-sm-offset-3 col-md-7">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-envelope"></span>
<span><b>So what you wanna do before you die ...</b></span>
<span><span class="glyphicon glyphicon-refresh"></span>Load messages</span>
</div>
<div class="panel-body" >
<div ng-cloak class="row">
<div class="spinner" ng-show="formModel.loadingData">
<span us-spinner></span>
<br/><br/><br/><br/><br/>
<p style="text-align:center">Loading Awesomeness ... </p>
</div>
<div class="col-xs-12">
<ul class="demo1">
<li class="news-item" ng-repeat="item in records" on-last-element>
<table>
<tr>
<td>
<img height="60" ng-src="/images/{{($index+11) % 10}}.png" class="img-circle" /> </td>
<td style="">{{item.message}} <span class="text-primary">#{{item.username}}</span></td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-offset-3 col-sm-7 col-xs-12">
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.messageEmpty">
Oh gosh ! Really you don't wanna do anything before you are gone !!! ohh... come on
</p>
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.messageTooLong">
You are trying to do too many things buddy, just 150 characters !!!
</p>
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.usernameEmpty">
Looks like you forgot to mention your name !!!</p>
<p style="text-align:center" ng-cloak class="alert alert-danger"
ng-show="formModel.usernameTooLong">
Sorry we can't handle such a long name, please type a short name !!!</p>
</div>
</div>
<div class="row">
<form name="messageForm"
novalidate="novalidate" ng-submit="onSubmit()" id="message-box">
<div class="form-group" >
<textarea class="col-sm-offset-4 col-sm-5 col-xs-12 " required
ng-model="formModel.message"
style="border:double 4px #2B689D;border-radius: 0.5em;"
rows="3" id="message"
placeholder="Choose your life's best 150 characters followed by # and your name, then shoot it.."></textarea>
<br/>
<button style="margin-left: 5px" class="col-sm-1 col-xs-12 btn btn-primary" type="submit">Shoot it</button>
<br/>
</div>
<br/><br/>
<p class="col-sm-offset-3 col-xs-12 col-sm-7 alert alert-success"
style="text-align:center">
e.g. Will love to go to antarctica for adventure, feels kinda penguin#amy
</p>
<br/>
</form>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12">
<span style="font-weight:bold;">
Made with the help of <span style="text-decoration:line-through">5 </span>15 cups of coffee by
</span>
<a style="color:white" href="https://twitter.com/alammahtab08" target="_blank">#alammahtab08</a>
</div><br/>
</div>
</div>
<script src="/libs/js/angular-animate.min.js"></script>
<script src="/libs/js/toaster.min.js"></script>
</body>
</html>
After comments below added bootstrap classes for small screens col-xs and col-sm
Now it looks as this
Just copy and replace below class in your textarea. Refer below image to understand how column class works.
col-sm-offset-4 col-xs-12 col-sm-5
For spacing problem in mobile view you need to use media query, See the below code.
You can add your custom class also for button.
#media (max-width: 768px){
.btn-primary{
margin-top: 2rem;
margin-bottom: 2rem;
}
}