Hello guys i have trouble with my code. I have a bootstrap button and thats is fine but how can i put space between the button and end of the page. because its only on iphone the problem. Its very weird because when im holding in normal its good the button but when i turn my iphone there is no space anymore.
This is my button:
<div class="row">
<div class="text-center">
<button type="button" class="learn btn btn-info">Learn more</button>
</div>
</div>
As Ashiqur suggested, add some margin to the bottom of the button
.learn {
margin-bottom: 1rem;
}
Maybe put CSS like this to your button :
button.learn {
margin-bottom: 10px;
// Or :
padding-bottom: 10px;
}
maybe you should add this :
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
Related
I'm having problems making two elements align perfectly. They're in the same line, the one to the left is an input element and the one to the right is a div, in a "bar" (also a div). Please see the picture.
How it looks right now
What I want it to look like is for the two elements to have the exact same height, filling from top to bottom of the grey div with classname "wrapper".
I have simplified the code, and the button clearly doesn't work. What you can see in the code here is a small part of a react app, but that's irrelevant because the problem is in the CSS. The button needs to be a div.
The CSS code:
body{background-color: black}
.wrapper
{
background-color: grey;
padding: 0;
margin: 0;
}
input
{
font-size: 30px;
}
.button
{
background-color: green;
padding-left: 10px;
width: 100px;
height: 100%;
display: inline-block;
}
and the HTML code:
<body>
<div class="wrapper">
<input type="text" size="5"/>
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
I've tried setting the "display" of the elements to "inline" and "inline-block" back and forth, and tried to set the height to 100% for these elements which doesn't seem to work.
Thankful for any advice.
Just use flexbox
body {
background-color: black
}
.wrapper {
background-color: grey;
padding: 0;
margin: 0;
display: flex;
}
input {
font-size: 30px;
}
.button {
background-color: green;
padding-left: 10px;
width: 100px;
}
<body>
<div class="wrapper">
<input type="text" size="5" />
<div class="button">
<p>
Button
</p>
</div>
</div>
</body>
On the wrapper class add display: flex; and on the input tag add flex: stretch;
I made a little start-up for a computer science project.
For this project, we have to build just a regular website with HTML, CSS and if wanted, javascript.
I got my navigator menu thing from w3-schools but after putting the button in the top-container instead of the header, it suddenly centered instead of showing up left.
I deleted the text-align: center; from the top-container and put in button {
text-align: left;
}
Didn't work
HTML
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<div id="main">
<section class="top-container">
<h2>Just some bullshit here</h2>
<button
id="openNav"
class="w3-button w3-teal w3-xlarge"
onclick="w3_open()">☰
</button>
</section>
CSS
.top-container {
background-color: #f1f1f1;
padding: 30px;
}
button{
text-align: left
}
I expect the button being on the left side instead of being in the centre.
(here's a link to the whole code https://jsfiddle.net/Ellefien12/qg6thu5v/1/, I don't know why, but it is working in there, but when I have it in NetBeans 11, it isn't working)
Here's how it looks in firefox
Put your button inside the div
<div class="wrapper">
<button id="openNav" class="w3-button w3-teal w3-xlarge"
onclick="w3_open()">☰</button>
</div>
And then position the element
.wrapper {
text-align: left;
}
#openNav {
position: absolute;
top: 50%;
}
I'm making a card/grid layout using wells in bootstrap. My problem is that the button needs to always be positioned on the bottom of the well at all times with the well having a fixed height. The button is at the bottom but is also overlapping the text.
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.well {
min-height: 280px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container content-sm customClass">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Test123</h3> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Join server!
</div>
</div>
</div>
</div>
Make sure to click show full page. The button is overlapping some of the text. What would I need to do to make it so where the text positions itself so where it avoids contact with the button? Changing the height fixes it somewhat, but it needs to stay at this height.
If you wanted each of your well class height to be fixed, You need to move each of your btn-purple class outside of your well class as well. Also, To retain the look of your current layout, Place some of your css property from your well class to your col-sm-12 class (parent container)
Here is a sample jsfiddle to guide you: https://jsfiddle.net/u7ecv316/1/
Note: I've place a col-item class in col-sm-12 then place the btn-purple outside of well class. I've also override the css properties of well class too.
Hope this will guide you well
So I am trying to make this admin page responsive and there are some problems when I resize the page. I want the div with the Inventory to be aligned with the 3 buttons.
This is my container which needs to properly adapt when resizing the viewport.
.reports{
border: 1px solid red;
overflow-y: scroll;
/*overflow-x: hidden; */
height: 100%;
}
.row{
height: 4.5em;
width: 100%;
margin-left: 0;
}
.actions{
float: right;
width: 30%;
}
.entry-group{
border: 1px solid red;
float: left;
width: 70%;
}
.title{
border: 1px solid red;
float: right;
width: 72.5%;
height: 3.7em;
word-wrap: break-word;
margin-left: 2em;
}
<div class="reports">
<div class="list-group-item row">
<div class="entry-group">
<button class="btn btn-primary date" >2016-09-19</button>
<div class="title">
<h4 class="list-group-item-heading">2080136 - Inventory</h4>
<p class="list-group-item-text">2 Napier Court West Southend On Sea SS1 1JU</p>
</div>
</div>
<div class="actions">
<button class="btn btn-primary download">Download</button>
<button class="btn btn-primary edit">Edit</button>
</div>
</div>
</div>
I think there is a few issues with the code here. Firstly, I believe it odd to have DIVs between your 'tr' and td', and not having a 'table' element.
I think you are trying to mix different ways of doing things: bootstrap and HTML tables.
My suggestion is use something like layoutit.com to build a layout with divs only in bootstrap. You can easily still integrate it into your back end technology, and get the divs responsive by editing the class names, e.g. col-sm-1.
I understand that you want to use tables for reports, having said that, it should be carried through completely, without divs inbetween.
Add this:
.list-group-item-heading {
margin-top: 0;
}
https://jsfiddle.net/kefhvc7y/
Add:
.title h4 {
margin-top: 0px;
}
.date {
float: left;
}
and remove margin-left: 2em; from .title.
Here is an updated version of your fiddle: https://jsfiddle.net/r11p5n4d/
I am trying to make an iOS app using HTML and CSS. For responsive design i am using twitter bootstrap. Now what i need is to make a header (at the top of the screen), a form, in the middle of the screen. That form should be scrollable only if user wants to add more details (it would be dynamic, if user enters the required details only, then it should not be scrollable). I am experiencing a problem where I am not able to place the form in the center of the screen. I want it to be vertically as well as horizontally centered.
When i change margin-top, i am able to make it in the middle, but it isnt responsive and gets displaced in ipad resolution. Please help, i am not a designer and new to twitter bootstrap.
Here the fiddle: http://jsfiddle.net/TLX7Z/1/
Here is my code:
HTML
<body class='pagination-centered'>
<div class='navbar-inner headercontainer'>
<center><div id="hello"><a href='index.html'><h1>Hello there</h1></a></div></center>
</div>
<div class='mainbodycontainer row-fluid pagination-centered'>
<div class='sampleapp'>
<div id='title1'>Here, Enter the details</div><br>
<input placeholder = "first feild" class="address span10" type="text">
<div id= "div1"><input class="address span10" id="friend1" type="text" placeholder = "feild 2"></div>
<div id='wrapper'><div id='button2' class="btn btn-danger"><i class="icon-white icon-minus"></i> Remove</div>
<div id='button' class="btn btn-success"><i class="icon-white icon-plus"></i> add</div></div>
<div <div id="submit-button" class="btn btn-success ">Go</button>
<label><div id ="result"></div></label>
</div>
</body>
CSS
#import url('http://twitter.github.com/bootstrap/2.3.2/assets/css/bootstrap.css');
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
margin: 0;
width: 100%;
height: 100%;
padding 0;
}
.headercontainer
{
width: 100%;
}
.sampleapp
{
margin-top: 20%;
}
use this and just replace width & height with values:
this will put your sample app in center of the page :
.sampleapp{
width: width;
height: height;
position: fixed;
top: 50%;
left: 50%;
margin-left: -width/2;
margin-top: -height/2;
}
Fiddle