Different alignment required for different resolutions in bootstrap - css

I am publishing a site using bootstrap 3. I'd like to center align the site logo for mobile view where as it must remained left aligned on all other devices. Is there any possible way to handle this issue I am totally stuck.
<div class="header_cont">
<div class="container">
<header class="row header">
<h1 class="logo col-lg-7 col-md-7">Property Ad</h1>
<div class="sign_up_section col-md-5 col-lg-5 pull-right">
<div class="social_links">...</div><!--social_links -->
<div class="sign_up_links">...</div><!--sign_up_links -->
</div><!--sign_up_section -->
</header><!--header -->
</div>

Related

How to align card images in bootstrap 4.4 so that all the cards have equal width and height.?

So basically while making a simple website with Django and bootstrap 4.4 I came up with this issue. I was using 'cards' to add images of books in a grid format like in a bookstore web application. But the cards are not having equal dimensions.
How to align card images in bootstrap 4.4 so that all the cards have equal width and height while keeping it responsive to the window size change.??
My problem in the image below. As you can see there the cards are not of same size when i add different images it changes its size as well.
enter image description here
html
<div class="container">
<div class="row">
{% for book in object_list %}
<div class="col s3">
<div class="card">
<img class="img-fluid" src="{{book.book_image}}" alt="">
<div class="card-body">
</div>
</div>
<p class="text-white">{{book.name}}</p>
</div>
{% endfor %}
</div>
</div>
and .css
body{
background: white url('images/webbg.jpg') no-repeat center center;
background-size: cover;
}
Example image of what I actually want to have enter image description here
I want exactly like what there is in the above picture with images loading from my database in a loop.(so not hardcoded image links embedded in html code)
It sounds like you could use .card-deck to achieve your goals
https://getbootstrap.com/docs/4.4/components/card/#card-decks
If .card-deck won't work for you you can use the new Grid Cards. They allow you to select how many cards you want per row based on screen size. The don't automatically set themselves to being equal height however that is easily remedied by adding .h-100 to the cards.
As an example, if you wanted 4 cards per row after the xl breakpoint, 3 after md and 2 on mobile you would write the following. Note there is some margin on the columns to give them some space as they wrap.
<div class="row row-cols-2 row-cols-md-3 row-cols-xl-4">
<div class="col mb-4">
<div class="card h-100">
<!-- content -->
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<!-- content -->
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<!-- content -->
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<!-- content -->
</div>
</div>
</div>

Bootstrap 4 Center element using Flexbox

Using Bootstrap 4 Alpha 6. I have the following markup:
<header class="jumbotron jumbotron-fluid">
<div class="container">
<div class="row justify-content-center flex-column-reverse flex-sm-row">
<div class="col-12 col-sm-6">
<h1 class="display-4">
<a class="border-0" href="/#v">Vic</a>
</h1>
<p class="lead mb-100">We utilize a default z-index scale in Bootstrap that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.</p>
<p>
<svg>...</svg>Boston, MA, US<br>
</p>
</div>
<div class="col-12 col-sm-2">
<a class="border-0" href="/#v">
<img class="d-flex rounded-circle avatar--m" alt="Random Name" src="/system/profiles/avatars/000/000/001/avatar_m/firefox-copy-link.jpg?1489589655">
</a> </div>
</div>
</div>
</header>
which produces the following result on mobile and desktop respectively:
Mobile
Desktop
The desktop version currently looks perfect. How do I center the image on mobile only?
You can use the Bootstrap 4 responsive margin utils on the image. Use mx-auto to center, and then mx-sm-0 to keep normal margins on sm an up.
<img class="d-flex rounded-circle mx-auto mx-sm-0" src="//placehold.it/80">
Demo: http://www.codeply.com/go/qDSHKeueac

White space caused in responsive Twitter Bootstrap view

I am not sure if this white space above the div is caused by a media query or by something in the twitter bootstrap css.
Here is the page at mid view: http://postimg.org/image/gq9dfuuah
Here is my markup for the top section of the page:
<div class="page-section intro">
<div class="container">
<div class="logo"><img src="../../images/logo-2.png" id="backdrop"></div>
<div class="intro_wrapper">
<div class="row">
<div class="col-md-6"><span class="pull-right">
<div class="mockup">
<img src="../../images/techandall_shadow_series_apple.png" id="backdrop">
</div>
</div></span>
<div class="col-md-6">
<span class="pull-right">
<div class="saying">Design, Development, Dedication</div>
<div class="left"><p class="lead center">We are highly experienced in Responsive Web Design, Database-driven websites, Content Management Systems, and Custom Web Applications.</p>
</div>
<div class="intro_buttons center-block">
<div class="center_button">
Get A Quote
</div>
</div>
</div></span>
</div>
</div><!-- feature_wrapper -->
</div><!--/.container-->

Bootstrap 3 stacking issue - 1st col drops on medium

I have the code below in Bootstrap 3. It all works perfectly except if you are on the tablet the logo drops down and doesn't stay top left. It works great on phone and works great on desktop.... What am I missing?
http://www.bootply.com/K3G0VtD0OS
<!-- always Stay top right and maintain the same size-->
<div class="col-xs-6 col-sm-2 pull-right">
<div class="row">
<div class="pull-right"> sharing icons </div>
<div class=""> account login </div>
</div>
<!-- LOGO Always stay top left no matter what size-->
<div class="col-xs-2 col-sm-12 col-md-2 logo pull-left"> logo image </div>
<!-- Always stay to the right of logo but at tablet, drop below the 1st and second column -->
<div class="col-xs-12 col-md-8 pull-left">
<div class="row">
<div class="col-xs-12 col-md-1"> </div>
<div class="col-xs-12 col-md-11"> Search bar goes here </div>
</div>
I believe that this is occurring because you only allow 2 bootstrap columns for BOTH "sharing icons" and "account login". So when you get to tablet size, 2 columns is not enough room and it wraps the "account login" (it does not wrap "sharing icons" because that element has the pull-right class on it).
You can fix this by reducing the unnecessary 8 columns for the search bar to 7 when in col-sm (tablet size), so that the wrapper for "sharing icons" and "account login" can have 3 columns instead of 2, while allowing it to still be 8 in col-md and higher.
Updated bootply
Change One:
<div class="col-xs-6 col-sm-3 col-md-2 pull-right"> <!-- Change col-sm-2 to col-sm-3 and add col-md-2 -->
<div class="row">
<div class="pull-right"> sharing icons </div>
<div class=""> account login </div>
</div>
</div>
Change Two:
<div class="col-xs-12 col-sm-7 col-md-8 pull-left"> <!-- Add col-sm-7 -->
<div class="row">
<div class="col-xs-12 col-md-1"> </div>
<div class="col-xs-12 col-md-11"> Search bar goes here </div>
</div>
</div>

Bootstrap 3 Grid Layout Issue on Tablet

I have problem with the Bootstrap grid system on my new website /services-page (kenpils.se.
I would prefer 3 rows with 2 columns instead to make the text in the columns better readable on tablet. Right now the columns are to narrow due to the icon on the left side of each column.
As far as I understand, each row is one div which makes it difficult to slide up the "commercial-column" next to the "editorial-column". There is also a divide30-class between the two rows.
Would appreciate some advice.
The solution to this I have found works best is to duplicate your content in a tablet layout. then use visible-* (documented here) class attributes to hide and make visible specific content to specific screen resolutions. You will need to add visible-* class attributes to your <div class="row"> and change your col-sm-4 to col-md-4 see below:
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 1-->
</div>
<div class="col-md-4">
<!-- Your Content 2-->
</div>
<div class="col-md-4">
<!-- Your Content 3-->
</div>
</div>
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 4-->
</div>
<div class="col-md-4">
<!-- Your Content 5-->
</div>
<div class="col-md-4">
<!-- Your Content 6-->
</div>
</div>
Then add a section under that in your code duplicating the information and hiding it on larger screen resolutions. see below:
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 1-->
</div>
<div class="col-sm-6">
<!-- Your Content 2-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 3-->
</div>
<div class="col-sm-6">
<!-- Your Content 4-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 5-->
</div>
<div class="col-sm-6">
<!-- Your Content 6-->
</div>
</div>
This will provide the formatting you desire. Hope this helps.
NOTE: THE BELOW SOLUTION DOESNT ALTER THE LAYOUT AT ALL as you require. It provides an alternative solution !
<div class="col-services">
<div class="row">
<div class="col-sm-4></div>
<div class="col-sm-4></div>
<div class="col-sm-4></div>
</div>
</div>
This means that the break wont occur until the width reduces below tablet-zone !
col-sm-4 -> break after tablet-zone width
col-md-4 -> break after normal desktop width
Replace it with
<div class="col-services">
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
</div>
This makes sure that the break occurs at the tablet level itself!

Resources