How can I the div on the left and the image on the right at the same height using Bootstrap? They can stack when the screen width gets smaller, but at larger sizes they need to be equal.
<!-- main -->
<div id="main" class="row">
<div class="left col-md-6">
<h1>SCAQMD's Air Alerts lets you stay informed about air quality in your area.</h1>
<div id="round">
<img src="img/arrow.png" alt="arrow">
Sign Up
</div>
<div id="signup">
<h2>SIGN UP TODAY</h2>
<div><!-- line -->
</div>
<h3>to receive Air Alerts<br>Customized for you!</h3>
</div>
</div>
<div class="right col-md-6">
<img src="img/hero.jpg" class="pull-right img-responsive">
</div>
</div>
<!-- main -->
Related
I'm trying to make the images in the slider to be full width or responsive.
The HTML is here on PasteBin
<div class="main-slider slider-pro" id="main-slider" data-slider-width="100%" data-slider-height="850px" data-slider-arrows="true" data-slider-buttons="true">
<div class="sp-slides">
<!-- Slide 1-->
<div class="sp-slide">
<img class="sp-image" data-large="assets/media/components/b-main-slider/bg-1.jpg" src="assets/media/components/b-main-slider/bg-2.jpg" alt="slider" />
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="main-slider__info sp-layer" data-width="100%" data-show-transition="left" data-hide-transition="left" data-show-duration="2000" data-show-delay="1200" data-hide-delay="1200">welcome to koka</div>
<div class="main-slider__title sp-layer" data-width="100%" data-show-transition="left" data-hide-transition="left" data-show-duration="2000" data-show-delay="1200" data-hide-delay="1200">
<div class="typed-strings">
<ul>
<li>welcome to <span class="main-slider__title-emphasis">WELCOME</span></li>
<li>PROFITABLE <span class="main-slider__title-emphasis">DIGITAL MARKETING</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Basically the images from the slider are shown only on the left side (70% of the slide). While in the right side of the slide, there is an empty space. (30%)
I have an issue with bootstrap's grid layout. My columns are overlapping one another when I resize the screen to a smaller layout.
I'm not sure what the issue is.
Here is a picture of what is going on:
Here is my code
<div class='container-fluid'>
<div class="row"> <!-- 1 -->
<div class="col-sm-5 col-md-4">
<h1>JOHN SMITH</h1>
</div>
</div>
<div class='row'> <!-- 2 -->
<div class="col-sm-5 col-md-4">
<h2>VULCAN FLATBED</h2>
</div>
</div>
<div class="row"> <!-- 3 -->
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">
<div class='row'>
<img src="vulcan.jpg" alt="vehicle image" width='391'/>
</div>
<div class='row'>
<button type='submit'>
<img src="book_now_button#2x.png" alt="book now">
</button>
</div>
</div>
<div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;"> <!-- RIGHT SIDE -->
<div class='row'>
<h3>CAN HELP WITH</h3>
<p>LIFTING & YARD WORK</p>
</div>
<div class='row'>
<h3>AVAILABLE</h3>
<p>ALL WEEKENDS</p>
</div>
<div class='row'>
<h3>NOTE</h3>
<p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS,
WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN
ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU
SOME HELP WITH LIFTING OR YARDWORK I AM YOUR GUY. BOOK NOW TO CONTACT
ME AND LET ME HELP YOU OUT.
</p>
</div>
</div>
</div> <!-- end 3 -->
<hr>
</div> <!-- end wrap -->
According to Bootstrap Docs, for each .row you need to have a .col-*-* as direct child but you don't have it in a few of them. Which cause the overflow.
Plus don't use the html tag width, it is deprecated. use class="img-responsive" from bootstrap to achieve max-width:100%
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class='container-fluid'>
<div class="row">
<!-- 1 -->
<div class="col-sm-5 col-md-4">
<h1>JOHN SMITH</h1>
</div>
</div>
<div class='row'>
<!-- 2 -->
<div class="col-sm-5 col-md-4">
<h2>VULCAN FLATBED</h2>
</div>
</div>
<div class="row">
<!-- 3 -->
<div class="col-sm-4 col-md-4 col-lg-4" style="background-color:yellow;">
<div class='row'>
<div class="col-xs-12">
<img class="img-responsive" src="//lorempixel.com/500/200" alt="vehicle image" />
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<button type='submit'>
<img src="book_now_button#2x.png" alt="book now">
</button>
</div>
</div>
</div>
<div class="col-sm-8 col-md-8 col-lg-8" style="background-color:pink;">
<!-- RIGHT SIDE -->
<div class='row'>
<div class="col-xs-12">
<h3>CAN HELP WITH</h3>
<p>LIFTING & YARD WORK</p>
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<h3>AVAILABLE</h3>
<p>ALL WEEKENDS</p>
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<h3>NOTE</h3>
<p>HI, MY NAME IS JOHN AND I HAVE A GREAT TRUCK FOR TRANSPORTING CARS, WORK MATTERIAL, OR HEAVY OBJECTS. I HAVE A FULL TIME JOB SO I CAN ONLY HELP YOU ON THE WEEKENDS. I LOVE WORKING WITH MY HANDS SO IF YOU SOME HELP WITH LIFTING OR YARDWORK I
AM YOUR GUY. BOOK NOW TO CONTACT ME AND LET ME HELP YOU OUT.
</p>
</div>
</div>
</div>
I believe your problem is that you have many elements with the "row" class that don't have any columns in them. The hierarchy goes container > row > col. Without a column, there is no need for anything to be declared a row, and it affects the layout in unusual ways without them.
Another problem is your image. Remove the "width" attribute, and add the following class attribute: class="img-responsive". See the Images section of the bootstrap docs for details.
In my case, I was using box-sizing: content-box; for all my elements in css. That is why padding was creating problems with overall computed width of the elements. So, I changed it to box-sizing: border-box; from box-sizing: content-box;
Ref:
https://getbootstrap.com/docs/4.0/getting-started/introduction/#box-sizing
I want to reduce jumbotron's height not with pixels but percentage of something (ex. div's height, windows height). What is the best way to do it appropriate with different window sizes and responsive design.
Here is my code:
<!-- START PAGE CONTENT WRAPPER -->
<div class="page-content-wrapper">
<!-- START PAGE CONTENT -->
<div class="content">
<div class="social-wrapper">
<div class="social " data-pages="social">
<!-- START JUMBOTRON -->
<div class="jumbotron" data-pages="parallax" data-social="cover">
<div class="cover-photo">
<img alt="Cover photo" src="assets/img/social/cover.png" />
</div>
<div class="container-fluid container-fixed-lg sm-p-l-20 sm-p-r-20">
<div class="inner">
<div class="pull-bottom bottom-left m-b-40">
<h5 class="text-white no-margin">Team Members</h5>
<h1 class="text-white no-margin"><span class="semi-bold">Lemp</span> Team</h1>
</div>
</div>
</div>
</div>
<!-- END JUMBOTRON -->
</div>
<!-- END PAGE CONTENT -->
Thanks.
You can make the jumbotron maintain aspect ratio.
Check Sean Dempsey fiddle.
Just modify
<div class="box sixteen-nine">
<div class="content">
<span>16:9</span>
</div>
to your jumbotron
You can see Chris Coyer full explanation
I am using this code in a page in bootstrap 3.
<div class="description_text">
<div class="row">
<!-- Sunny -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/sunnylogo.png" alt="Sunny logo">
</div>
<div class="horizontal_center">
Sunny
</div>
</div>
<!-- End Sunny -->
<!-- Walking -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/walkinglogo.png" alt="Walking logo">
</div>
<div class="horizontal_center">
Walking
</div>
</div>
<!-- End Walking -->
<!-- Windy -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/windylogo.png" alt="Windy logo">
</div>
<div class="horizontal_center">
Windy
</div>
</div>
<!-- End Windy -->
<!-- Rain -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/rainlogo.png" alt="Rain logo">
</div>
<div class="horizontal_center">
Rain
</div>
</div>
<!-- End Rain -->
<!-- Snow -->
<div class="col-md-2">
<div class="horizontal_center">
<img src="img/snowlogo.png" alt="Snow logo">
</div>
<div class="horizontal_center">
Snow
</div>
</div>
<!-- Snow -->
</div>
</div>
When window is full screen, it is OK.
But if I make it small, it making problem.
It goes to vertically.
I want to stop this property of bootstrap in this page.
Can anyone please help me?
Thanks in advance for helping.
You can use more then one class according to resolution
col-md-2 Medium devices Desktops (≥992px)
col-sm-2 Small devices Tablets (≥768px)
col-xs-2 Extra small devices Phones (<768px)
Use
<div class="col-md-2 col-sm-2 col-xs-2"></div>
Simply don't use bootstrap's col-md-x and row classes. Make your own divs and style them by yourself.
Or you could style the col-md-2 class like so:
.col-md-2{
float: left;
}
I've been spinning my wheels on trying to get a div panel element to appear on the top right of the page, on the same line as the h1 element:
<div class="container">
<div class="page-header">
<h1>
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary">
...content...
</div>
</div>
...
</div>
I'm a bit of an amateur with CSS/HTML, but I've tried the pull-left/right classes along with every permutation of display/position, etc. The outcome is always garbled. Any suggestions?
you have to add pull-left to the h1 too.. to have both of them floated..
also add a .cleafix class to the page-header div
<div class="container">
<div class="page-header clearfix">
<h1 class="pull-left">
<img src="logo.png"> Page title
</h1>
<div class="panel panel-primary pull-right">
...content...
</div>
</div>
...
</div>
I wouldn't use the .page-header for this, it doesn't clear and it's meant for text. Use the grid system so that you can set a size for your panel as they are not a set width and requires a wrapper to have a width. It will layout very cleanly this way.
Just a note: when you use the .pull-right and .pull-left classes on anything in Bootstrap these cover all viewport sizes and the results can look pretty yucky as the viewport gets smaller.
DEMO: http://jsbin.com/sadup/1
<div class="container">
<div class="row">
<div class="col-sm-8">
<img src="http://placehold.it/200x75/444444/FFFFFF&text=logo" class="img-responsive" alt="Logo">
</div>
<!--/.col-sm-8 -->
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<!--/.col-sm-4 -->
</div>
<!--/.row -->
</div>
<!--/.container -->