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
Related
I have a container with a padding of 5 (p-5) applied to it.
However, I want the padding to be removed automatically when on a small screen without writing more CSS only using the bootstrap classes.
<div class="container-fluid text-center p-5">
<div class="row">
<div class="col-sm-4 d-none d-sm-none d-md-none d-lg-block">
<accordion />
</div>
</div>
</div>
You can use the .d-sm-none class on the div containing the padding to hide it on small screens:
<div class="container-fluid text-center p-5 d-sm-none">
<div class="row">
<div class="col-sm-4 d-none d-md-none d-lg-block">
<accordion />
</div>
</div>
</div>
The .d-sm-none class will make the div hide on "small" sized screens or smaller, which means the 5px padding will be removed on these screens.
Best!
So I've tried a few of the solutions provided here (and elsewhere on the web) to see if I could break out of the bootstrap container, but I'm not having any luck. To describe it, I have a .fluid-container to put a full-width background behind a normal .container. Where things get tricky is that I need the first column in .container to break out and extend all the way to the left edge of the screen.
What it should look like:
What I've gotten it to do:
Here's my HTML:
<div class="container-fluid bg-darkblue bg-image-footer py-5">
<div class="container">
<div class="row" id="footer-content">
<div class="col-5 px-0 py-3 bg-limegreen">
Form content goes here.
</div>
<div class="col-1"> </div>
<div class="col-2 text-white">
<p class="avenir text-limegreen text-upper">Contact Us</p>
<p>(202) 555-1212</p>
<p>email#email.com</p>
<p>New York, NY</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Client Name</p>
<p>About</p>
<p>Careers</p>
<p>Accessibility</p>
</div>
<div class="col-2">
<p class="avenir text-limegreen text-upper">Social</p>
</div>
</div>
</div>
</div>
To reiterate -- the goal here is to move the left edge of the lime green box all the way to the left edge of the screen, without moving the right edge out of the grid system or screwing with the rest of the layout.
All CSS is straightforward Bootstrap 5, with the exception of a few things to control color like .bg-limegreen.
Bootstrap layouts should never have immediately-nested containers. Instead, use standard row/column nesting. Avoid trying to "break out" of anything unless you actually need overlap across columns. That's rarely the case.
Also note that I replaced some of your custom classes with existing Bootstrap classes (text-light and text-uppercase). You'd be wise to get to know what Bootstrap offers very well to avoid building redundant CSS technical debt. See Bootstrap's text utilities.
I'd also encourage you to override Bootstrap's semantically-named classes for color rather than creating new, non-semantic ones. For example, text-limegreen might instead be an override of text-success, even if just for the footer. Have a look at Bootstrap's color utilities.
.bg-darkblue {
background: darkblue;
}
.bg-limegreen {
background: limegreen;
}
.text-limegreen {
color: limegreen;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container-fluid bg-darkblue bg-image-footer py-5">
<div class="row" id="footer-content">
<div class="col-5 px-0 py-3 bg-limegreen">
<div class="row justify-content-end">
<div class="col-8 text-light">
Form content goes here.
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-6">
<div class="row justify-content-start text-light pt-2">
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Contact Us</p>
<p>(202) 555-1212</p>
<p>email#email.com</p>
<p>New York, NY</p>
</div>
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Client Name</p>
<p>About</p>
<p>Careers</p>
<p>Accessibility</p>
</div>
<div class="col-3">
<p class="avenir text-limegreen text-uppercase">Social</p>
</div>
</div>
</div>
</div>
i'm using bootstrap 4, i have a div that got d-flex and it's supposed to display direction row at the "lg" (screens 1200px and greater) breakpoint and when it's used on a mobile phone "sm" or "xs" breakpoint would be used and it would display direction column and behave like a column, but no matter how i try it, it just stays a row all the time
i tried
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
and
<div class="d-flex flex-xs-column flex-lg-row justify-content-lg-around">
but it doesn't work..am i misunderstanding the breakpoint system or something? i mean i would do the same using the CSS media queries.
here is the full code
<div class="w-75 my-5 mx-auto">
<h1 class=" text-center my-3">Awards won</h1>
<div class="d-flex flex-sm-column flex-lg-row justify-content-lg-around">
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award1.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Best cake made in 2019</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award2.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Winners of the national cake baking contest</span>
</div>
<div class="d-flex flex-column col-sm-4 align-items-center">
<img src="./assets/award3.PNG" width="150" height="150" class="award-img">
<span> Award title </span>
<hr class="bg-dark w-50 m-0"/>
<span class="w-75 text-center text-break">Most satisfied customers award</span>
</div>
</div>
</div>
solved it, it seems bootstrap handles the xs breakpoint by not including a breakpoint value in the class utility
<div class="d-flex flex-column flex-lg-row justify-content-around">
this works
You should be using css to accomplish this. Bootstrap should be used for the grid. CSS to style elements. It'll make your markup a whole lot clearer and avoids using unnecessary inline classes. Heres an example
html
<div class="col-sm-4">
<div class="item">
<div class="item__title">Heres a title</div>
<div class="item__content">
some content
</div>
</div>
</div>
css
.item{
display: flex;
flex-direction: column;
#media (min-width: 1200px){
flex-direction: row;
}
}
I'm trying to display some objects in 3 columns using Bootstrap 4. When using this code it only appears in 1 column, like this: web 1 column.
But my idea is to be displayed like this (more or less): web template 3 columns.
<div class="row-mt-5">
<div ng-repeat="woman in women">
<div class= "col-lg-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
</div>
I want to learn to use Bootstrap classes for object positioning.
First you need to know about the basic layout structure, learn it here, Please note that you need to define the grid layout for all the screens (sm md lg xl) the details are found in the link provided. Please refer to the below fiddle the code fix for your issue. I have included the ng-app and ng-controller for testing purposes, please ignore that.
HTML:
<div class="container-fluid" ng-app="myApp" ng-controller="MyController">
<div class="row">
<div class= "col-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text">
<h5>{{woman.field}}{{woman.job}}</h5>
</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
JSFiddle: here
Just started using Blueprint CSS and now playing with the grids but have a simple problem. I created a navbar at the top of my page with each link 2 columns wide (using span-2). What is the right way to center these links inside the grid columns without hacking away at the css.
<div id="navbar" class="container showgrid">
<div class="span-2 border">
News
</div>
<div class="span-2 border">
Gigs
</div>
<div class="span-2 border">
Tunes
</div>
<div class="span-2 border">
Email List
</div>
</div>
I would create a helper class like this:
css:
.text-center{ text-align:center; }
html:
<div class="span-2 border text-center">
News
</div>
<div class="span-2 border text-center">
Gigs
</div>