I'm quite new to bootstrap, but I'm beginning to like the grid system.
I've created a test layout. The only thing I haven't accomplished by now, is putting a background around some row.
How can I have some padding on the left and the right?
Here's my example:
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=UTF-8">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container" id="container">
<div id="header" class="row">
<div class="span12">Hallo123</div>
</div>
<div id="main" class="row">
<div class="span10" id="one">
<div class="row">
<div class="span2">Hallo1</div>
<div class="span2">Hallo2</div>
<div class="span2">Hallo3</div>
<div class="span2">Hallo4</div>
<div class="span2">Hallo5</div>
</div>
</div>
<div class="span2" id="two">Hallo2</div>
</div>
</div>
</body>
</html>
CSS:
#main {
background-color: white;
box-shadow: 0px 0px 6px #888;
}
#header .span12 {
background-color: #DD1144;
}
#container {
background-color: #DF8505;
}
#one, #two, #three, #four {
background-color: #0088CC;
}
See if this helps:
http://jsfiddle.net/panchroma/JAFPq/
In simple cases where you need to extend the background beyound the width of the bootstrap grid, you could certainly do it by setting negative margins. This wouldn't work so well if you want the background to cover the entire width of the screen though, and it starts getting complicated as the grid collapses on narrow screens.
The best general solution I have found is to close the bootstrap container div just before the area where you want the background. Then start a new bootstrap container for the area where you need the background and wrap this in it's own div which are are free to manipulate however you want.
<div class="container" id="container">
<div id="header" class="row">
<div class="span12">Hallo123</div>
</div><!-- end header -->
</div><!-- end container -->
<div class="backgroundHere"><!-- start of div where you want the background -->
<div class="container">
<div id="main" class="row">
<div class="span10" id="one">
<div class="row">
<div class="span2">Hallo1</div>
<div class="span2">Hallo2</div>
<div class="span2">Hallo3</div>
<div class="span2">Hallo4</div>
<div class="span2">Hallo5</div>
</div><!-- end nested row -->
</div><!-- end span 10 -->
<div class="span2" id="two">Hallo2</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end backgroundHere -->
<!-- you could open another bootstrap container here if you have more content without the background -->
Depending on the specifics of your background, you may need to also use #media requests to specify what happens at wide and narrow screens, for example the box-shaddow padding in your case.
Good luck
Related
I have been experimenting with full responsive layouts between desktops, tablet, and mobile phone sizes for a bit but am having trouble with the layout below.
I was using a grid layout from bootstrap but since it is two columns, as the width shrinks, the second column of two goes below the left, main content section. I want to split it up as the screen caps below state.
This is the starting view:
This is what I want to happen:
This would be the mobile phone view:
So the wide view will get shrunk during testing and I want it to jump to the mobile view where the top side bar goes above the main content and matches the width of the main content while the bottom sidebar does the same thing to the bottom.
It is easy to put both sidebars on the bottom but I want to try to figure out the possibility of splitting it up.
For testing I am using flexbox, css3 and bootstrap5+ and no plugins or javascript.
Solution 1: You can use CSS float feature with float-end and float-start bootstrap classes ref:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid vh-100 vw-100 py-2 bg-light clearfix">
<div class="float-sm-end col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="float-sm-start col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="float-sm-end col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>
Go in Full page view and reduce browser width below 576px to see the responsive change.
I've used breakpoint small col-sm-* here, use different breakpoints to handle different devices.
There are only d-*-grid rules in entire boostrap v5.1.3 CSS file. Rest of the stuff is experimental.
Solution 2: Using flexbox, playing with order and wrap. Improved version of #Rana's answer:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light">
<div class="order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning">Content</div>
<div class="order-sm-2 order-1 col-sm-4 col-12 h-25 bg-secondary">Sidebar Top</div>
<div class="order-sm-3 order-3 col-sm-4 col-12 h-25 bg-info">Sidebar bottom</div>
</div>
You may want to try out Bootstrap's Flex order utility to achieve the desired result
https://getbootstrap.com/docs/5.0/utilities/flex/#order
Also, share a code example so others can see what you have already tried, I believe you may face some issues even with Flex's Order utility, but that depends on your HTML structure.
For such layout my preference would be to create a copy of the top column for mobile / desktop, and use d- utility to show hide the right one.
<div class="container">
<div class="row ">
<div class="col-12 d-md-none d-block">
<div class="box box-1">sidebar top col (only for mobile)</div>
</div>
<div class="col-md-8">
<div class="box box-2">main col</div>
</div>
<div class="col-md-4">
<div class="box box-3 d-none d-md-block">sidebar top col (only for desktop)</div>
<div class="box box-4">sidebar bottom col</div>
</div>
</div>
</div>
Example - https://jsbin.com/yidokokewu/1/edit?html,css,output
Alternatively if you are already using Bootstrap 5, then you should also consider using CSS Grid, Bootstrap 5 comes with a lot of useful utilities for that -
https://getbootstrap.com/docs/5.1/layout/css-grid/
If you do not want to duplicate your HTML to show one on desktop and the other on mobile then CSS Grid for layout is the best choice - it has some learning curve but it is worth trying out
You can try following properties
flex-flow: column;
flex-wrap: wrap/nowrap;
order: 1/2/3/....;
When screen-size reaches certain limit than change these values like in below snippet
.container {
display: flex;
flex-flow: column;
flex-wrap: wrap;
background-color: lightgray;
}
.containerBox {
width: 50%;
}
.containerBox1 {
background-color: lightgreen;
order: 2;
}
.containerBox2 {
background-color: yellow;
order: 1;
}
.containerBox3 {
background-color: lightblue;
order: 3;
}
#media screen and (max-width: 700px) {
.container {
background-color: grey;
flex-wrap: nowrap;
}
.containerBox {
width: 100%;
}
.containerBox1 {
order: 1;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container vh-100 vw-100">
<div class="containerBox containerBox1 h-25">Sidebar Top</div>
<div class="containerBox containerBox2 h-100">Content</div>
<div class="containerBox containerBox3 h-25">Sidebar bottom</div>
</div>
Using float-start for left column and float-end for right columns is the best solution. col-12 and col-sm-* were used only in order to defining width of columns. Avoid of using row class for parent div because this will force columns to act like flex items.
Also clearfix class for parent div is required to prevent overlapping following elements.
More information about float: https://getbootstrap.com/docs/5.1/utilities/float/
More information about clear-fix: https://getbootstrap.com/docs/5.1/helpers/clearfix/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="clearfix">
<div class="col-12 col-sm-4 float-end bg-secondary">Sidebar Top Area</div>
<div class="col-12 col-sm-8 float-start bg-primary">Content<br>Some Text<br>Some Text</div>
<div class="col-12 col-sm-4 float-end bg-success">Sidebar Bottom Area</div>
</div>
go to enter link description here
or
enter link description here
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-9 bg-success">col-12 col-sm-9</div>
<div class="col-12 col-sm-3 bg-warning">col-12 col-sm-3</div>
</div>
</div>
</div>
</body>
</html>
.content {
background-color: #faaa03;
height: 500px;
}
.sidebarTop {
background-color: #ccd0d5;
}
.sidebarBottom {
background-color: #99d2f2;
}
.custom-row {
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="custom-row clearfix d-flex flex-wrap d-lg-block">
<div class="col-12 col-md-8 col-lg-8 content order-2 float-lg-start">Content</div>
<div class="col-12 col-md-2 col-lg-4 sidebarTop order-1 float-lg-end">Sidebar Top Area</div>
<div class="col-12 col-md-2 col-lg-4 sidebarBottom order-3 float-lg-end">Sidebar Bottom Area</div>
</div>
</div>
Give this a Try
How can I set margin for div inside column div in bootstrap, like in the code I am trying to make margin 5px but it doesnt work!
<div class="container bg_red">
<h1>Test DIV boxes</h1>
<div class="row">
<div class="col-md-3 thin_border bg_green">
<div class="bg_blue">
Some content here for panel 1
</div>
</div>
<div class="col-md-9 thin_border">
Some content here for panel 2
</div>
</div>
</div>
Is this what you wanted? Check the margin-5 class that is added to one div and not the other so you can see the difference.
.thin_border {
border: 1px solid #EFEFEF;
}
.margin-5{
margin: 5px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container bg_red">
<h1>Test DIV boxes</h1>
<div class="row">
<div class="col-md-3 thin_border bg_green">
<div class="bg_blue margin-5">
Some content here for panel 1
</div>
</div>
<div class="col-md-9 thin_border">
Some content here for panel 2
</div>
</div>
</div>
I feel like using margin and padding will mess with the bootstrap grid in a way that makes it not work on all devices since your going outside of the grid. If anyone can clarify this that would be awesome. Anyways I'm having issues getting the left arrow to space out away from the 3 bike images in a way that keeps everything on the page perfectly centered. I've been messing with the grid, but no matter what I do I can't get the left arrow to move away from the first bike image. See screenshot for reference. Any help is appreciated.
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1" id="leftArrow"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1" id="rightArrow"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
<img ng-src="images/leftarrow.png">
change to
<img ng-src="images/leftarrow.png" class="img-responsive">
this will add max-width: 100%; to your image and won't break the <div class="col-md-1" id="leftArrow"> layout
In other words, your problem is that nav images is too big :)
I would rather use absolute positioning for the navigation elements.
Like
#leftArrow{
position: absolute;
left: -40px;
top: 50%;
}
I have seen a lot posts about this, I know it's simple but I cannot get my example to work and I would like to understand why as I still did not grasp the concept of positioning in CSS.
I am using simple bootstrap in my App. I have a container with row and col-md-6. My code looks like this.
<section id="automat" class="box bg-light-grey">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="images/iPod.png" class="scaleImage"/>
</div>
</div>
</div>
</section>
And my custom css style for image looks like this (depending on screen size I will control the size of img element).
.scaleImage {
width:300px;
height:auto;
position:relative;
margin:0 auto;
}
As you can see, I have tried to set the exact width of my element, with position:relative and margin:0 auto. According to the other posts, this is supposed to be enough to center my element inside my container, but it's not. It is still locked on the very left side of my col-md-6 container.
My question is following: Why my solution is not working and how do I need to change my code to get this to work?
Is this working?
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 text-center">
<img src="images/iPod.png" class="scaleImage" style="width:100%;height:100%"/>
</div>
<div class="col-md-3"></div>
</div>
</div>
You can try like this,
section{
background: gray;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
<div class="container text-center">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<img src="https://www.sfu.ca/content/sfu/publicsquare/_jcr_content/below-nav/parsys/image.img.jpg/1406566003083.jpg" class="scaleImage" />
</div>
</div>
</div>
</section>
You can use bootstrap class 'text-center' to center. So, you do not need to use margin:0 auto.
Here you have defined an offset too. You do not need offset to center a div.
.scaleImage {
width:300px;
height:auto;
position:relative;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="automat" class="box bg-light-grey">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<img src="https://d3nevzfk7ii3be.cloudfront.net/igi/tcbxa1Eb6YMETIW2.large" class="scaleImage"/>
</div>
</div>
</div>
</section>
margin: 0 auto would not work because image is inline-block element (look: Why doesn't margin:auto center an image?)
To align image do text-align: center on parent div or <div class="container text-center">.
try to add one more class, text-center to col-md-6. It will center align the content.
position:relative;
float:none;
width:100%;
max-width:300px;
margin:auto;
DISPLAY:BLOCK
so to center your element in the middle you need this combination of css properties
I need to move the red circle image to the position shown as in below photo:
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>領収書</title>
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
{% if receipt %}
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<h2>領収書
</h2>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3 col-xs-offset-3">
<h5>No. {{receipt['receipt_number']}}</h5>
<h5>{{receipt['date']}}</h5>
<hr/>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 text-center">
<h3>{{receipt['c_name']}} 様</h3>
<hr/>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3 text-center">
<h3><b>￥ {{receipt['amount']}}</b><br/>
</h3>
<hr/>
<h3>
但 {{receipt['quantity']}} {{receipt['product']}}<br/>
</h3>
<h4>
上記正に領収いたしました
</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 text-center col-xs-offset-6">
<h5>xxxxxxxxxxxxxxxxxxxxxxxxxx</h5>
<h5>xxxxxxxxxxxxxxxxxxxxxxx</h5>
<img src='inkan.PNG'/>
</div>
</div>
</div>
{% endif %}
<!-- /container -->
</body>
</html>
Could anybody tell me how to do it?
Just add these style to your img and play with "right" value;
<img src='inkan.PNG' style="position: absolute; right: 200px;"/>
Just add the image as a background, like this:
<div class="col-xs-6 text-center col-xs-offset-6" style="background:url(urlhere) no-repeat">
Refer to this link for more info.
Give the div an id and then add it ad css property background: url({url}); like so:
HTML:
<div id="myDiv"></div>
CSS:
#myDiv {
background: url({url});
}
Include that CSS code either from a separate file or in <style/> tags.
I also recommend you try the web course on CodeCademy to learn most of everything you need to know about HTML & CSS.
If you would use a Background, it wouldn't be printed by some Browsers.
Best way to solve this is that you use relative (or absolute) Positioning on the Image Element.
But you must fix a little thing on the col- divs from Bootstrap. Basically they don't have any position Attribute, so you can't really use the position Attribute on the child elements.
So first, let's fix the positioning Inheritance problem:
.row > div { position:relative; }
Go for this CSS Rule as example to have it relative, you may use also position: absolute and or additionally float:right, but I think this should be fine, depends on your content. I've used 100px for your Image as example size, change this as you need.
.inkan_image { position:relative; top:0px; right:0px; width:100px; height:100px }
In Your HTML you just need to add your class to the Image.
By the way: I would position the Image as first element in your Content, as it will float or will be positioned on the right side and the content just swaps in then.
<img src='inkan.jpg' class='inkan_image'>