I'm using Bootstrap 3, I'm not exactly sure why is offsetting to the
right.
<div class="container">
<div id="content">
<a href="/winning-films">
<div class="text-center banner">Check out the 2015 Salt Flats Film winners!!!</div>
</a>
<div class="row">
<div id="main-page">
<h2>SALT FLATS FILM FESTIVAL</h2>
<div class="center-slider">
<?php include_once('jssor_slider.php')?>
</div>
<h3>Presented by</h3>
<a href="http://www.kidsfindjoy.org">
<img class="img-responsive center center-block" src= "/img/joy-logo.jpg">
</a>
</div>
</div>
</div>
</div>
Is there someway to center the div with the container class on mobile?
It's hard to say without seeing the exact code, but as a general strategy inspect the page with something like chrome developer tools and see which element(s) are wider than the viewport, and thus widening the width or their parent elements.
Well, Here I have changed the order of the div with the class text-center banner, the <a></a> tag must be inside the div.
<div class="cointainer">
<div id="content">
<div class="text-center banner">Check out the 2015 Salt Flats Film winners!!!</div>
<div class="row">
<div id="main-page">
<h2>SALT FLATS FILM FESTIVAL</h2>
<div class="center-slider">
<!--?php include_once('jssor_slider.php')?-->
</div>
<h3>Presented by</h3>
<img class="img-responsive center center-block" src="/img/joy-logo.jpg">
</div>
</div>
</div>
</div>
The second suggest is to verify to use this line in your html head <meta name="viewport" content="width=device-width, initial-scale=1">
this will help you to center your page on load and disable zoom and scroll
The third suggest is to use Pingendo, if you are a new developer, this tool will help you to generate a beautiful view or interface with Bootstrap, and you will see the HTML code and CSS3 live when you draft elements of bootstrap to your view.
Regards!
Related
I am trying to get a left sidebar to behave a bit nicer on smaller width displays.
Here is the site:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
On this page you see the left sidebar and if you make the browser window narrower and narrower you will see that there gets to be a point when the left side of the sidebar disappears a bit beyond the browser window edge.
Here is pic (notice left side; right side looks cut just because of how I made the screenshot):
Since the sidebar behaved normally before I added the sticky block, I thought maybe I could just use a container div, where the presence of the sticky element would automatically maintain a proper relative position along with the menu that is above the sticky element, but that didn't help.
Here is the HTML for the sidebar:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 hidden-sm hidden-xs left-sidebar" style="text-align: center;">
<div class="menu block tile-default" id="sidebarmenu" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div id="sidebar-container">
<div id="leftsidebar">
<h4 class="text-center">Register for Free Live Video Webinar!</h4>
<a href="https://zoom.us/webinar/register/WN_Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<br>
<h4 class="text-center">Triad Chords Everywhere!</h4>
<img class="img-responsive" src="/img/chordswebinargraphic.png" alt="..." width="300" height="309">
<div class="caption">
<p style="background-color: #c8d9fe ; padding: 4px;">Set out on a path to master chords on the guitar. Understanding triads is the key to learning more advanced chord concepts such as 7th chords, extended chords, altered chords, hybrid chords, chord substitution, and more.</p>
<p>When: 7 September, 1:00 PM</p>
<p>Duration: 90 Minutes</p>
</div>
<div class="countdown" id="timer">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
Maybe I just don't have the relationship among the divs set properly. Curious if there is some simple adjustment that solves the problem. I suspect this isn't so much a CSS issue as a div structure issue in my HTML, just not sure how to properly set the divs to achieve the desired result.
Thanks in advance, Brian
Update you md class on both divs.
Use col-md-4 for side bar and col-md-8 on main content parent div. Below is the code:
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 hidden-sm hidden-xs left-sidebar">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-9">
There are "hidden-sm hidden-xs" classes on left side bar div in your html. These classes hide your div once the screen width is below a certain threshold.
For more info, please refer https://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp
Bootstrap Grids
I'm having an problem with the Bootstrap grid system can't seam to position my content the right way that I want to. Here is what I have so far.
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-2"><img src="logo.png" alt="" class="img-responsive"/></div>
<div class="col-md-2"><h3>My Website</h3></div>
</div>
</div>
</header>
Goal
What I want to achieve is to have a full width web page for large desktops and responsive for mobiles where the logo image and the "My website" slogan will be on the left and the content will be positioned in the center.
Here are some images of what i want to achieve on desktop and mobile http://s16.postimg.org/tbt4b5det/Untitled_1.png - Desktop
http://s10.postimg.org/mbijfjvkp/Untitled_2.png - Mobile
check below what have:
<section>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="/logo.png" alt="" class="img-responsive"/>
</div>
<div class="col-md-6 col-md-offset-3"><h4>Welcome</h4></div>
<div class="col-md-6 col-md-offset-3"><h4>How are you?</h4></div>
<div class="col-md-6 col-md-offset-3">
<div class="disclaimer">
<p>Some text here</p>
</div>
<div class="link">
<span>Follow Us</span>
</div>
</div>
</div>
</div>
</section>
Other Issues
It seams every time i test for different devices or simple resize the browzer the image goes extra small until it get to sm devices and than again continues to get smaller.
Thank You
I thank you for your help i'm new in web development any suggestion is appreciated.
The way I'd do it is by changing the container class to <div class="container-fluid" style="text-align:left;"> allowing for full width usage of a screen.
Then, just put a <div style="text-align: center;"> around what you want to center.
Though this will make all elements stretch the entire screen width, including the col-*-* classes. Just add col-*-offset-* as required to adjust for this.
Your img is getting smaller because of the img-responsive class.
I just started using Bootstrap and it's awesome so far. However I have one question, I created a content container and put a picture in it and I'm only going to have one in the row and I want it to go in the center of the page. I have tried a lot of things but to no avail, they don't work. Any help is appreciated! I'm also using Bootstrap version 3.3.6
This is my code for the container
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-6">
<div class="thumbnail">
<img src="random.jpg" alt="...">
<div class="caption">
<h3><center>I want the whole container in the center of the page.</center></h3>
</div>
</div>
</div>
</div>
</div>
Bootstrap has built in classes for you to use instead of the default tag. Try this for your image:
<img class="center-block" src="yourimage.png" />
As asked in the title, I am creating a website by using bootstrap v3.3.2.
The first question is that I am using the grid system to align the caption to the right of the thumbnail as shown below:
<div class="container">
<div class="thumbnail">
<div class="row">
<div class="col-md-6">
<a href="#">
<img class="img-responsive" src="images/pic.jpg">
</a>
</div>
<div class="col-md-6">
<div class="caption">
<h2>Title</h2>
<hr>
<p>A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.</p>
<hr>
<p class="caption-footer">
<span class="glyphicon glyphicon-heart"></span> Like it
<span class="glyphicon glyphicon-share"></span> Share it
</p>
</div>
</div>
</div>
</div>
</div>
Which turns out to be something like this:
As noticed, there is a large margin to the left of the image, which is not ideal. And when I resize the screen, it became more undesirable, with large margin to both side as shown below:
I think this may caused by the grid system since the col-md-6 has a fixed width. However I do not know how to fixe this.
The second question is that I try to align the two buttons to the bottom of the caption by adding a new class called caption-footer. However, this does not work.
Below is my CSS file for class caption-footer and how it turns out to be:
caption-footer{
position: absolute;
bottom:0;
left: 0;
}
I have checked quite a few links here (like: link1 link2). But none of them seems to work for my case.
Thanks in advance for any help!
One thing you can do simply place caption under col-md-12 div and buttons under another col-md-12 div.
<div class="container">
<div class="row">
<div class="col-md-6">
<a href="pulpitrock.jpg" class="thumbnail">
<p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
<img src="pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213">
</a>
</div>
<div class="col-md-6">
<div class="col-md-12">
A design specification provides explicit information about the requirements for a product and how the product is to be put together. It is the most traditional kind of specification, having been used historically in public contracting for buildings, highways, and other public works, and represents the kind of thinking in which architects and engineers have been trained.
</div>
<div class="col-md-12">
Download
Images
</div>
</div>
</div>
</div>
I'm not sure if it matters where or how many times I insert the header tag in this code example. I know it can be in the document more than one time, but is there a preferred or best practices guide for this situation? Here is the code:
<body>
<div id=cent>
<div class="container">
<div class=row>
<header> <!-- or Header tag here? -->
<div class="clearfix hidden-xs col-sm-12 layering">
<img class="foreground trigger" src="img/Kedoshim-Logo.jpg" alt="Kedoshim Burning Logo on Mountain"/>
</div>
<div class="clearfix hidden-sm hidden-md hidden-lg col-xs-12 layering">
<img class="foreground trigger" src="img/Kedoshim-Logo-Mobile.jpg" alt="Kedoshim Burning Logo on Mountain"/>
</div>
</header>
</div> <!-- close of row div for responsive headers -->
Can the header tag go around the whole row div or should it go around each image div or around each image? Or inside the row div as I have shown?
Thanks for your help.