On mobile device the the sidebar is shown above my products. I want that it should go down the my products.
The side bar is on the left and content on the right. Also is there a better way to create a sidebar than what I did here.
https://jsfiddle.net/3pLnc4y1/
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="row">
<div class="col-md-2">
Home/Categories
</div>
<div class="col-md-10">
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
sdsd
</div>
<div class="col-md-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
The easiest way to do this would be with Flexbox. I created a sample Codepen for you here: https://codepen.io/CWSites/pen/pqGowo
The code itself can be however you like, for simplicity I just made a few divs.
<div class="container">
<div class="sidebar">
Sidebar Here
</div>
<div class="content">
Hello World
</div>
</div>
The CSS is where the magic happens. You will need a containing div with some flex styles applied in order to use flexbox. Your sidebar and your content divs will also need some flexbox code of their own. In my sample I have the media query set for screens 600px and smaller but you can adjust that to whatever you like.
Starting off you'll want your sidebar order to be 1 so it displays first going left to right, however on a smaller screen I flip the flexbox order so sidebar is now 2 and content is 1.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.sidebar {
width: 30%;
order: 1;
}
.content {
width: 70%;
order: 2;
}
#media only screen and (max-width: 600px) {
.container {
flex-direction: column;
}
.sidebar {
order: 2;
}
.content {
order: 1;
}
}
When working with Flexbox, I find this guide extremely helpful.
Use have to use use the order class utility :
Doc : https://getbootstrap.com/docs/4.2/layout/grid/#reordering
JsFiddle : https://jsfiddle.net/b9ejhstw/1/
HTML:
<div class="row">
<div class="col-xs-12 col-md-10 order-md-last"> <!-- <--- HERE --->
<h2>My shop</h2>
<div class="row">
<div class="col-md-3">
sdsd
</div>
<div class="col-md-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
<div class="col-sm-3">
sdsd
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
Home/Categories
</div>
</div>
Related
I am a bit new to bootstrap and would like some guidance regarding how to use "d-flex" to align the content center. I tried applying "d-flex justify-content-center" like what the documentation says but the alignments still does not work. Is there anything I am doing wrong? I attached an image below; looking for centered spacing after the "Testing!" so the pictures are more aligned in the center from top to bottom. I believe I got the horizontal alignment correct.
<div class="container">
<div class="row ">
<div class="col text-center">
<h1>Testing!</h1>
</div>
</div>
<div class="row body text-center">
<div class="col-6">
<h2>Shop Collections</h2>
<img class="img-fluid"src="images/rx782alloy.jpg" >
</div>
<div class="col-6">
<h2>Catalog</h2>
<img class="img-fluid" src="images/batmanbeyond.jpg" >
</div>
</div>
</div>
```[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/xz54x.png
Please check out this fiddle. I believe this will answer your question. I have given you a guideline that will clarify your concept regarding d-flex. The design is responsive, change the view to see the result.
https://jsfiddle.net/hilalrehan/9vyd6Lu2/140/
.adjust {
padding-top: 30px;
position: relative;
}
.text-area{
min-height: 139px;
}
.box {
padding: 0.2rem;
flex: 0 0 20rem;
}
.set{
flex-flow: wrap;
justify-content: center;
min-width: 20rem;
}
#media (min-width: 576px) {
.set {
max-width: none;
}
.box {
padding: 0rem;
}
}
#media (min-width: 1200px) {
.set {
justify-content: flex-end;
}
.box {
flex: 0 0 8rem;
}
}
<html>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 order-2 order-lg-6 col-xl-6">
<h2 class="display-2"> Testing </h2>
<div class="d-flex set mx-auto ">
<div class="box">
<div class="text-area display-4 text-center text-white bg-success"> Shop Collections </div>
<div class="img bg-success"> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid"> </div>
</div>
<div class="box">
<div class="text-area display-4 text-center adjust-text black bg-warning"> <div class="adjust"> Catalog</div> </div>
<div class="img bg-white "> <img src="https://i.stack.imgur.com/xz54x.png" class="img-fluid" > </div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
I'm working on a page (Angular) that dynamically displays bootstrap cards that looks as follows:
<div class="row">
<div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ngFor="let m of myVals">
<h4 class="card-header text-center">{{m.Title}}</h4>
<div class="card-body">
<h5>{{m.Year}}</h5>
<img [src]="m.Poster" [alt]="m.Title" class="card-img-top">
</div>
</div>
</div>
The issue I'm facing is with the element <h4 class="card-header text-center">{{m.Title}}</h4>
The challenge is that sometimes the title gets displayed on 2 lines, other times on 1 (but never more than 2) and, so, the cards aren't looking uniform.
What I'm wondering is if there's a Bootstrap / CSS way to always make the card-header display as 2 lines high regardless of the text within it. I've tried setting a CSS style of line-height: 2, but it's not affecting it at all. Any correct / better way to accomplish this?
Thanks!
You can add the custom CSS to do it. check working fiddle below -
.card-header-custom {
min-height:80px;
display:flex;
justify-content:center;
align-items:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Card Header and Footer</h2>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header big content Header big content </div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header card-header-custom">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
</div>
</div>
</div>
</body>
</html>
HTML:
<div>
<h4>
<span>One line heading</span>
</h4>
<h4>
<span>Assume this heading has two lines</span>
</h4>
</div>
CSS:
h4 {
height: 2.5em;
}
h4 span {
line-height: 1.25em;
}
Have the following code with simple Bootstrap 4.0 grid.
Codepen
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
background-color: #005267;
min-height: 700px;
height: auto;
min-height: 100%;
overflow-y: scroll;
padding-bottom: 20px;
font-family: Arial, Geneva, Helvetica, sans-serif;
}
.vertical-align {
display: flex;
align-items: center;
}
.hr_news {
font-weight:bold;
}
/*2 kill*/
.header_bg {
background-color:red;
height:90px;
vertical-align: middle;
}
.brd_black {border:0px solid #000;}
</style>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Новости обучения и развития</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-2" style="height:90px;"><img src="http://igorisaev.com/logo.png" class="float-left">
</div>
<div class="brd_black col-2 bg-white"> </div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>Новости обучения и развития</h4></div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
When I added hyperlink to image and start to resize page, empty col-2 cloumn steps over first column with image. If I remove hyperlink all works fine. Why this happens and how can i fix it?
below, you can find 3 scenarios:
as your code in the attached code-pen
if you remove the <a> from around your logo
if you use col-4
the 3rd option should work for you, if not, kindly share what you're looking for
.vertical-align {
display: flex;
align-items: center;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<br/>
<br/>
<br/>
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-2" style="height:90px;">
<img src="https://www.akberiqbal.com/apple-touch-icon-144x144.png" class="float-left">
</div>
<div class="brd_black col-2 bg-white"> </div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>THIS IS YOUR CODE</h4>
</div>
</div>
<br/>
<br/>
<br/>
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-2" style="height:90px;">
<img src="https://www.akberiqbal.com/apple-touch-icon-144x144.png" class="float-left">
</div>
<div class="brd_black col-2 bg-white"> </div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>this is when you remove <a> from around the logo</h4>
</div>
</div>
<br/>
<br/>
<br/>
<div class="row">
<div class="brd_black align-self-center bg-white vertical-align col-4" style="height:90px;">
<img src="https://www.akberiqbal.com/apple-touch-icon-144x144.png" class="float-left">
</div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>this is when you have col-4 instead of empty col-2</h4>
</div>
</div>
</div>
I'm working with Angular (v4.3.1) and Bootstrap (v4.0.0-alpha.6). A template contains two subcomponents like so:
<div class="card-deck">
<comp1></comp1>
<comp2></comp2>
</div>
Both subcomponent's templates have as root element's class the .card Bootstrap class.
<div class="card">
...
</div>
This, once compiled results in the following HTML
<div class="card-deck">
<comp1 _nghost-c3="">
<div _ngcontent-c3="" class="card">
...
</div>
</comp1>
<comp2 _nghost-c4="">
<div _ngcontent-c4="" class="card">
...
</div>
</comp2>
</div>
The problem is that the .card-deck styling doesn't get applyed properly if there is an element wrapping the .card elements.
A Bootstrap only example, the problem is strictly related to Bootstrap css and not Angular obviously.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
Anyone knows a way to get both the components structure and the styling working?
The wrappers are causing trouble because a div doesn't have any flex css properties, While the .card classes are using flex:1 0 0;
Option 1 (preferred): Apply the .card class to the angular host element wrapper, instead of the first child element.
I've not used angular, going by these docs you could set a class on the host element. Using #Component.host.
Or define some rules using angulars custom renderer.
I can't advice you on the best approach, I lack the knowledge on angular.
In the end you would want to end up with <comp1 _nghost-c3="" class="card">
Option 2 (not very sane): Pretend that the wrappers are cards,
and style them like a card would be styled.
I would advice against this.
It can cause troubles in the long run. IE newer bootstrap versions could change the css styling, and you might forget to update these custom rules.
.card-deck > div {
display: flex;
flex: 1 0 0;
flex-direction:column;
}
.card-deck > div:not(:last-child){
margin-right:15px;
}
.card-deck > div:not(:first-child)
{
margin-left:15px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script data-require="bootstrap#4.0.5" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- Displayed properly -->
<div id="deck-without-wrapper" class="card-deck">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
<br>
<!-- NOT displayed properly -->
<div id="deck-with-wrapper" class="card-deck">
<div id="wrapper1">
<div class="card">
<div class="card-block">
<p>Card1</p>
</div>
</div>
</div>
<div id="wrapper2">
<div class="card">
<div class="card-block">
<p>Card2</p>
</div>
</div>
</div>
</div>
</body>
</html>
I have the following code using bootstrap 3:
<div class="row">
<div class="col-lg-12">
<div class="row">
<div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-lg-6">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double" class="col-lg-6" >
<img style="margin:auto" src="cinq1.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
The size of div test1 is based on the amount of text and fontsize of test1. So the bottom border does not automatically align with div test2. I am able to fix this by changing padding values of test1. But that means each change of text to test1 will require change of padding values as well which is not good stable coding. I thought the grid system of Bootstrap 3 would adjust for this so is there something I'm missing?
There is no default way in Bootstrap 3 (There will be in 4) to make to columns of dynamic data equal height... but you could use jQuery. Here I made your two columns "sm" so they show up side by side here in the snippet, and changed the broken image to some short text:
$(function() {
var leftHeight = $('#test1').height();
var rightHeight = $('#test2').height();
if (leftHeight > rightHeight) {
$('#test2').height(leftHeight);
} else {
$('#test1').height(rightHeight);
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div id="test1" style="text-align:center; border-style:double; font-size:14px" class="col-sm-6">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double" class="col-sm-6">
Less text
</div>
</div>
</div>
</div>
Without javascript you can achieve it--
It's a bootstrap experiment--the official experiment
you just need to add .row-eq-height with row class.
and add the following css.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="row row-eq-height" >
<div id="test1" style="text-align:center; border-style:double; font-size:14px;" class="col-lg-6 ">
JVM Infotech is a multifunctional company that can serve many of your educational needs.
</div>
<div id="test2" style=" border-style:double; " class="col-lg-6 " >
<img style="margin:auto" src="cinq1.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</body>
</html>
Note: it uses flex.