I'm having trouble centering a button in the bootstrap jumbotron. I have tried using text align center, margin auto 0 px, and other solutions on Stack Overflow. I have my button inside a container which is inside the jumbotron. I don't want to center the container because then the text on the jumbotron would also be centered, which I don't want. I just want the button to be centered.
Here is my HTML Code
<div class="jumbotron">
<div class="container" >
<h2>Keep your heart as if you have just entered this world and your mind as if you have lived it one hundred times.</h2>
<button type="button" class="btn btn-primary text-center">
Projects
</button>
</div>
</div>
Here is my CSS Code
.jumbotron {
padding: 20em;
background-image: url("../img/website-background.jpg") !important;
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.jumbotron .container h2 {
color: white;
position: relative;
bottom: 100px;
}
.jumbotron .container button {
text-align: center;
}
On .jumbotron .container apply text-align: center; which will also align the heading in center so target .jumbotron .container h2 and align it left if you want using text-align: left;
OR
Just apply text-center class on container div inside jumbotron and then target the heading and align its text as left.
<div class="jumbotron">
<div class="container text-center">
<h2 class="text-left">Keep your heart as if you have just e it one hundred times.</h2>
<button type="button" class="btn btn-primary text-center">Projects</button>
</div>
</div>
Codepen: https://codepen.io/Omi236/pen/JJVENE?editors=1100
Wrap it in a div with text-center class.
<div class="jumbotron">
<div class="container" >
<h2>Keep your heart as if you have just entered this world and your mind as if you have lived it one hundred times.</h2>
<div class="text-center">
<button type="button" class="btn btn-primary text-center">
Projects
</button>
</div>
</div>
</div>
Wrap your button inside a div & apply the following styles on that:
.wrapper {
width: 100px;
margin: 150px auto;
}
HTML would be like:
<div class="wrapper">
<button type="button" class="btn btn-primary text-center">
</div>
Related
I am trying to design Google search page and facing some problems.
I have completed almost every thing but got stuck in aligning "Google Search" button and "I am feeling Lucky button" in line and in center below search bar.
Below is my HTML and CSS for entire layout.
body,a{
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px;
margin: 5px;
text-align: center;
}
.i{
margin-left: auto;
margin-right: auto;
margin-top: 135px;
}
nav{
text-align: right;
padding-top: 5px;
}
.sb input{
border-radius: 25px ;
border: 0.5px solid ;
height: 40px;
width: 480px;
}
.foo{
font-size: medium;
padding-left: 40px;
padding-right: 40px;
}
<nav>
<div>
Google Image Search
Advance Search
</div>
</nav>
<img src="image.png" class="i">
<form action="https://google.com/search" class="f">
<div class="sb">
<input type="text" name="q" class="foo">
</div>
<div class="gs">
<input type="submit" value="Google Search">
</div>
</form>
<div class="fl">
<a href="https://www.google.com/doodles">
<button>I am feeling lucky</button>
</a>
</div>
Here is my output: http://jsfiddle.net/zqwmogvd/#&togetherjs=Rd6Qeg60cd
Here is how I would do it. I would wrap the two buttons in a parent div with a classname buttons-wrap or any class name of my choosing:
<form action="https://google.com/search" class="f">
<div class="sb">
<input type="text" name="q" class="foo">
</div>
<div class="buttons-wrap">
<div class="gs">
<input type="submit" value="Google Search">
</div>
<div class="fl">
<a href="https://www.google.com/doodles">
<button>I am feeling lucky</button>
</a>
</div>
</div>
</form>
I would then reference the .buttons-wrap class in CSS and use flexbox to center it:
.buttons-wrap {
display: flex;
justify-content: center;
margin-top: 3px;
}
If you don't know flexbox, you can also use the following:
.buttons-wrap>div {
display: inline-block;
margin-top: 3px
}
> selects the children elements.
.button-wrap {
display: flex;
justify-content:center;
margin-top:10px
}
flex is the value of css display. By using display:flex in parent elements, child elements automatically align like columns or rows with auto width and auto height.
The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container.
I have an app with a Leaflet.js map and a sidebar. On the desktop, it appears to look fine, but when I run page inspector and select a mobile version, there is whitespace at the bottom of the page(outside of the map/sidebar), along with an odd grey box.
I cannot inspect either the whitespace or the grey box when I mouseover them with the pointer. I have tried changing the body CSS to no avail (including no bottom margin/padding for the body).
I am a bit mystified here. Here's the basic HTML structure:
<body>
<!-- links to scripts go here -->
<!-- Content Starts here -->
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<div class="filterContainer">
<!-- filter map data with radio buttons here -->
</div>
<div class="filterContainer">
<!-- filter map data with radio buttons here -->
</div>
</div>
<!-- filter map data with calendar -->
<div id="datepicker"></div>
</nav>
<!-- Page Content -->
<div id="content">
<!-- map -->
<div id="map" style="min-width: 100vh; min-height: 100vh">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<span>Filter Events</span>
</button>
</div>
</div>
</div>
<script>
</script>
And, some of the relevant CSS:
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
height:100%;
max-height:100%;
overflow: hidden;
padding-bottom: 1px;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
}
.filterContainer ul{
list-style: none;
margin: 0;
margin-top: -12%;
margin-left: -12%;
}
#content{
width:100%;
height:100%;
}
#map{
height:100%;
}
And, finally, an image of the problem:
I have below coding which I'm trying to put a number in a circle, a glyphicon and label below. The glyphicon and the label had align center already, but I still can't get the circle and the number to align center. Any idea how to do it guys?
html:
<div id="ttlwait" class="col-xs-3">
<div id="circlePos" class="col-xs-12">
<div id="waitnum" class="numberCircle" style="text-align:center;">0</div>
<div style="text-align:center;">
<span id="gly-user1" class="glyphicon glyphicon-user" style="color:red;"></span>
</div>
<p id="gly-userw" style="text-align:center;">People</p>
</div>
css:
#ttlwait{
background-color:yellow;
}
.numberCircle{
font-size:8vmin;
color:red;
border: 2px solid red;
border-radius: 50%;
height:12vmin;
width:12vmin;
}
JSFIDDLE
Just add display:inline-block to the .numberCircle, and center all items inside the container.
CSS
.numberCircle {
font-size:8vmin;
color:red;
border: 2px solid red;
border-radius: 50%;
height:12vmin;
width:12vmin;
display: inline-block;
}
HTML
<div id="ttlwait" class="col-xs-3">
<div id="circlePos" class="col-xs-12 text-center">
<div id="waitnum" class="numberCircle" style="text-align:center;">0</div>
<div style="text-align:center;"> <span id="gly-user1" class="glyphicon glyphicon-user" style="color:red;"></span>
</div>
<p id="gly-userw" style="text-align:center;">People</p>
</div>
Don´t forget to center all elements inside the container, you can
achieve this by setting .text-center class, or use text-align: center
DEMO HERE
Note: I am unable to edit the HTML, so I have to find a workaround.
HTML:
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">...</div>
<div id="rightColWrapper" class="rightColumn663Wrapper">...</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
The issue is that all of the divs inside #container, EXCEPT for #leftColWrapper and #rightColWrapper, need to be 100% width of #container, but #leftColWrapper and #rightColWrapper need to be stacked next to each other and centered (together) within the 100% #container, with a max-width of 1224px.
I tried utilizing the following jQuery to add a wrapper div around #left... and #right..., but it ended up grabbing the ads in those containers and placing them in the component where the JS for the page is stored.
(function($) {
$("#leftColWrapper, #rightColWrapper").wrapAll("<div class=\"colWrapper\" />");
})(jQuery);
I either need another solution to wrap those two divs together, so that I can set a max-width of 1224px and center them, or I need to know why this jQuery is picking up those ads and duplicating them within the JS component.
#container{
text-align: center;
font-size: 0;
}
#container > div{
outline: 1px solid #333;
display: inline-block;
min-height: 10px;
text-align: left;
width: 100%;
font-size: 14px;
}
#container #leftColWrapper, #container #rightColWrapper{
width: 50%;
max-width: 612px;
}
<div id="container">
<div id="breadcrumbAds">...</div>
<div id="breadcrumbWrapper">...</div>
<div id="containerTopParsys">...</div>
<div id="leftColWrapper" class="column663Wrapper">width: 50%;<br>
max-width: 612px;</div><div id="rightColWrapper" class="rightColumn663Wrapper">width: 50%;<br>
max-width: 612px;</div>
<div style="clear:both;"></div>
<div id="containerBottomParsys">...</div>
<div style="clear:both;"></div>
<div id="bgpromo">...</div>
<div style="clear:both;">...</div>
<div style="clear:both;"></div>
</div>
How do you make a one page scrolling site like this.
I tried using "peachananr" plugin from here but it didn't work instead it messed up my layout.
Eg after doing:
<div class="main">
<section id = "mainPage" class="container mainPage" >
</section>
<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
Projects:
</span>
</section>
</div>
My whole page came together o.O ! (all sections came together in one) my page is basically a one page website like this
This is my css for the way i layout each section page:
body, html {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
/* look this up */
}
.container {
width: 100%;
text-align: center;
height: 100%;
}
.mainPage {
height:100%;
width:100%;
background: url(Imgs/13.jpg);
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.projectContents {
position: relative;
height:100%;
width:100%;
background: white;
}
This is my Html:
<section id = "mainPage" class="container mainPage" >
</section>
<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
Projects:
</span>
</section>
Please how do i resolve this issue or can you please give any solution. Examples will be greatly appreciated !! :D Thanks alottt !
ps i call the plugin in my js file like so $(".main").onepage_scroll();
Make sure you are loading the onepage-scroll css and javascript... It works fine without any of your CSS. Style from there.
HTML
<div class="main">
<section id = "mainPage" class="container mainPage" >
</section>
<section id = "projectContents" class = " projectContents" >
<span style = "display: block; float: left; margin-top: 50px; font-size:40px; font-family: 'Alegreya Sans SC', sans-serif;">
Projects:
</span>
</section>
</div>
JS
$('.main').onepage_scroll()
DEMO
Make bind to mouse scroll, and create slides.
<div class="b-slider">
<div class="b-sider__item">
Item 1
</div>
<div class="b-sider__item">
Item 2
</div>
<div class="b-sider__item">
Item 3
</div>
<div class="b-sider__item">
Item 4
</div>
<div class="b-sider__item">
Item 5
</div>
</div>
And use jcarousel slider plugin with vertical scroll options
$('.b-slider').jcarousel('next');
I don't really have a background with scrolling pages but I found this site that might help you in your code.
The structure is quite simple, adding a section class for each section of the site, and slide for each slide within a section:
<div id="fullpage">
<div class="section">WHATEVER</div>
<div class="section">WHATEVER</div>
<div class="section">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
<div class="slide">Slide</div>
<div class="slide">Slide 4</div>
</div>
<div class="section">WHATEVER</div>
</div>
To initialize the plugin with default options, is as simple as this:
$(document).ready(function() {
$('#fullpage').fullpage();
});
Here is an example: http://alvarotrigo.com/fullPage