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.
Related
I'm new to web development, and I'm trying to make a static responsive website.
So far, I was able to make a responsive navigation bar, but I'm stuck at how to make this layout.
This layout on mobile should look like this:
So far, I've found this code on the bootstrap website, and it resizes images depending on the browser's width.
<img src="..." class="img-fluid" alt="...">
However, I don't know how to add text near the "image". If I put "image" and "text" in the same div, the code above acts weirdly. The image doesn't resize immediately. It looks like the div's size changes and then the image's size changes depending on that.
Can anyone help me to make this layout?
I guess you have to work better with the DIVs to get the result you want. Imagine that the divs is like organizers boxes and you don't want to mess up with the things inside.
You can do something like this:
<div class="row">
<div class="col-md-6">
<img src="https://cdn.auth0.com/blog/new-bootstrap4/logo.png" class="img-fluid" alt="...">
</div>
<div class="col-md-6">
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="col-md-12 bg-warning">
<p>empty text</p>
</div>
<div class="col-md-12">
<img src="https://itriangletechnolabs.com/blog/wp-content/uploads/2020/05/bootstrap-illustration.png" class="img-fluid" alt="...">
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 bg-warning">
<p>text</p>
</div>
<div class="col-md-12">
<img src="https://socpub.com/sites/default/files/images-2018/Bootstrap.jpg" class="img-fluid" alt="...">
</div>
</div>
</div>
As you can see in this fiddle: https://jsfiddle.net/xjohnatha/L34gb05r/1/ (just remember to resize the splitted window to get it responsive)
just add the bootstrap class accordingly :
total 12 columns in page so you have to divide accordingly
mobile device use class : "col-xs-6" or "col-xs-12"// according to requirement
Small device use class : "col-sm-6" or "col-sm-12"
medium device use class : "col-md-6" or "col-md-12"
large device use class : "col-lg-6" or "col-lg-12"
<div class ="col-sm-6">
<img src="" />
</div>
<div class ="col-sm-6">
//text
</div>
// for leave blank space use "col-sm-offset-6" so it will leave half container blank and element in other half.
I'm trying to display each image and its description on each half of the current browser screen. Here is my HTML:
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/img1.jpg" alt="" />
</div>
<div class="col-6">
<p>Here is the description</p>
</div>
</div>
</div>
When I resize and reach the mobile phone viewport, the image and text are still displaying on each half of the screen. How can I make them display on top of each other, i.e: the text should be displayed right below the image on the next line?
col-6 split the screen for every viewport. You should use col-sm, col-md, col-lg or col-xl, depending on which screen size you wish to add the grid breakpoint.
You can check more informations here: https://getbootstrap.com/docs/4.1/layout/grid/
You're using bootstrap, so just use the baked in responsive utility classes;
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="images/img1.jpg" alt="" />
</div>
<div class="col-12 col-md-6">
<p>Here is the description</p>
</div>
</div>
</div>
Use these breakpoints for mobile devices
#media(max-width:600px) //for mobile devices
#media(min-width:600px) //for laptop screens
Then use grid property
refer: Grid property
Hey guys I am trying to create a 50:50 ration on my split screen layout.Text on one side and picture on the other I was able to get this far.
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img" src="assets/img/prg.jpg">
</div>
</div>
</div>
CSS
.img {
width: auto;
height: 250px;
}
Try using Bootstrap's grid system. Here's some example HTML you could use:
<div class="row">
<div class="col-md-6">
<h2 class="section-heading">Trying some code:<br>Special Thanks</h2>
<p class="lead">A special thanks to the community of coders</a> for providing the help and support</p>
</div>
<div class="col-md-6">put your images in this section<img class="img" src="assets/img/prg.jpg"></div>
</div>
This will put the text section on the left side of the page and the responsive image on the right. If the page is collapsed so it can't fit both horizontally they will stack. You can change this if you like. For more information see Bootstrap's guide on the Grid System. http://getbootstrap.com/css/#grid
What you should use is col-xs-6 instead of col-sm-6 because col-sm-x is used for screens with min-width: 768px or higher.
You may be seeing it showing at the bottom because your using sm instead of xs and the screen resolution is below 768px.
Using Twitter Bootstrap 3, I have two colummns, one with an image and the other has text. I'm trying to place the two side by side for desktop view, but then for smaller screens (mobile,tablet) the text has to fall beneath the image. I have tried various float and positions css but unsuccessful.
Code:
<div class="row">
<h2>History</h2>
<div class="col-md-6">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6">
<p> text </p>
</div>
</div>
</div>
If anyone has the time to provide some details of what CSS i should be using, I would be greatly appreciated. :-)
By now you're just telling the browser: "Hey, if I am on a medium screen device (col-md-6) let's take 6 out of 12 blocks for displaying!"
You need to add the class for the mobile view too:
<div class="col-md-6 col-sm-12">
So now, the mobile browser also knows, that he should use the full 12 blocks to display.
For further information about how to use the grid system of bootstrap take a look at this.
try this
<img class="img-rounded" src="img/fldry-ban.png" style="width:100%;"/>
//or might be possible
<style>
.custom > img{
width:100%;
}
</style>
<div class="row">
<h2>History</h2>
<div class="col-md-6 col-sm-6 col-lg-6 custom">
<img class="img-rounded" src="img/fldry-ban.png"/>
</div>
<div class="col-md-6 col-sm-6 col-lg-6">
<p> text </p>
</div>
</div>
For mobile I'd like the div NAV to be moved to the very top.
Desktop:
CONTENT | TEASER
................. | NAV
Mobile:
NAV
CONTENT
TEASER
I've already reversed the layout, i.e. I set it up the way it is supposed to be for mobile (below 992px) and use the push/pull classes to push the NAV div to the bottom right for desktop viewports. Unfortunately so far it doesn't quite work yet.
Any help would be greatly appreciated.
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8"> NAVI </div>
<div class="col-md-8 col-md-pull-4 left" style="padding-bottom: 200px"> CONTENT </div>
<div class="col-md-4 col-md-push-8"> TEASER </div>
</div>
http://jsfiddle.net/aws9pv88/1/
I found the solution. Basically the HTML Markup is already correct.
All we need to do is position the Nav Layer absolute, give it a left and a margin-left, as well as defin a width, and give the Teaser div a margin-bottom.
See here: http://jsfiddle.net/aws9pv88/9/
<div class="container">
<div class="row">
<div class="col-md-4 col-md-push-8 nav"> NAVI </div>
<div class="col-md-8 col-md-pull-4" style="padding-bottom: 200px"> CONTENT </div>
<div class="col-md-4 col-md-push-8 teaser"> TEASER </div>
<div style="clear:left"></div>
</div>
This is a solution made up of bootsrap + absolute positioning.
If however somone find a bootstrap only solution, feel free to post it here.