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%;
}
Related
I've got a tricky problem using bootstrap 4.
In the following example, I have a row with two columns.
The first one contains a very long text without any space. The second one contains a small one, specified as "col-auto".
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
But, unfortunately, my columns are rendered on two distinct lines, as shown in the example below.
Instead, I would like my text to wrap, and display something like that (without the spaces):
Do you know if this possible? If yes, which CSS property should I apply on which tag? I searched for something like forcing the width:auto attribute to be effective, but I don't know how.
Thanks a lot
Use break-word:
Since col will let bootstrap handle the grid automatically this is not achievable with col and the only thing you can do is adding break-word to col class and avoid the text to overflow the parent div.
.col {
overflow-wrap: break-word;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
Use bootstrap col-x-x:
On the other hand, you can achieve it with col-6 and add it to both child div to let the browser now there is two-column with the same height in the same row but since your text is too long you still have to add break-word to the related div to avoid further mess up. For better understanding bootstrap grid and find the better solution to fit your exact need I suggest to read get the bootstrap document from here or w3school document on bootstrap grid system from here.
Here's the snippet to let it happen:
div.row>div:first-of-type.col-6 {
overflow-wrap: break-word;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red;" class="container">
<div class="row">
<div class="col-6">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-6">
RIGHT
</div>
</div>
</div>
</body>
</html>
NOTE: to avoid further issues I suggest to remove width: 500px; from the parent division.
Use bootstrap's .text-break if text is a plain text.
.text-break {
word-break: break-word !important; // IE & < Edge 18
overflow-wrap: break-word !important;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col text-break">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
If it is preformatted text, text-break does not work. And since bootstrap does not have any class that wraps long preformatted text, you need to write some custom CSS.
.pre-text-wrap {
white-space: normal !important;
word-break: break-all;
}
.pre-text-wrap {
white-space: normal !important;
word-break: break-all;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: red; width: 500px;" class="container">
<div class="row">
<div class="col">
<pre class="pre-text-wrap">
THIS_IS_A_SUPER_LONG_TEXT_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</pre>
</div>
<div class="col-auto">
RIGHT
</div>
</div>
</div>
</body>
</html>
Or you may use bootstrap's .text-wrap and only word-break: break-all;.
.text-break-all {
word-break: break-all;
}
I am building a layout with bootstrap. In the design most of the elements are boxed (so I use the "container" class).
Some rows have 1 column that is inside the container but 1 other column that needs to break out of the container and be full width.
Here is an image of what I want to achieve:
I really struggle to create that layout. Any ideas?
Here is a codepen of the code below: https://codepen.io/leonfrombeawwwer/pen/bXGvQb
<head>
<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">
</head>
<div class="container">
<div class="row">
<div class="col-6">
<div class="green-box"></div>
</div>
<div class="col-6">
<div class="blue-box"></div>
</div>
</div>
</div>
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
}
I tried a container-fluid container with percentage width for the one column that needs to stay inside in boxed layout. But that pushes all the other elements f.e. header navigation too.
I also tried absolute positioning and played with flexbox. Nothing ended up in a result that is useful in all viewports.
Thanks for your help.
I found the solution now. Please find it in that codepen: [https://codepen.io/leonfrombeawwwer/pen/bXGvQb][1]
[https://codepen.io/leonfrombeawwwer/pen/bXGvQb]1
or here:
<head>
<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">
</head>
<div class="container-fluid relative-container">
<div class="row">
<div class="col-md-6 placeholder"></div>
<div class="col-6">
<div class="green-box absolute-full-width-image"></div>
</div>
</div> <!-- .row -->
</div> <!-- .container-fluid .relative-container -->
<div class="container">
<div class="row">
<div class="col-6">
<div class="blue-box"></div>
</div>
<div class="col-md-6 placeholder"></div>
</div> <!-- .row -->
</div> <!-- .container -->
.green-box {
background: green;
height: 200px;
}
.blue-box {
background: blue;
height: 200px;
width: 120%;
}
.relative-container {
position relative;
}
.absolute-full-width-image {
position: absolute;
right: 0;
width: 110%;
}
I'm working with Bootstrap 4 and I've been searching for a solution to my ordering issue, but can't seem to get it right or find one in the archives. Here's the situation...
On a desktop, I need the following layout:
Then on a mobile device, the layout should look like:
Box 1 is given a class of "col-md-8", and Box 2 is given the class "col-md-4". But for the life of me, I can't figure out how to properly place Box 3 (or the proper class) to get it to appear correctly in both layouts. Anyone have any thoughts?
I appreciate the help in advance!
EDIT (2018/6/26):
Here's the resulting code that works:
<main id="body" role="maincontent">
<div class="container">
<h1>Page Title</h1>
<div class="row d-flex d-md-block clearfix">
<div class="col-md-8 main_content float-left">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="col-md-4 highlight float-right">
<p>Second Item</p>
</div>
<div class="col-md-4 float-left">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</main>
This has already been answered in similar questions such as: One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
Since BS4 uses flexbox, disable the flexbox using d-md-block, and use float- to make the 2nd column pull right on md screens...
<div class="container">
<div class="row d-flex d-md-block">
<div class="col-md-8 float-left">
1
</div>
<div class="col-md-4 float-right">
2
</div>
<div class="col-md-8">
3
</div>
</div>
</div>
https://www.codeply.com/go/4HZq18NKln
For mobile devices try using media queries and grid classes small. For instance, box1 col-sm-4 you can reference this guide https://getbootstrap.com/docs/4.0/layout/grid/
`something {
padding: 5px;
#include media-breakpoint-up(sm) {
padding: 20px;
}
#include media-breakpoint-up(md) {
padding: 40px;
}
For ordering, you can use ordering property and here is the mdn ref https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
You can reference this post Using media breakpoints in Bootstrap 4-alpha
Hope that will help you.
Assume phone screen width is 425px based on Google Chrome. Copy and paste the code and open in your browser to see the actual result.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
h1 {
color: #fff;
}
.left, .right {
height: 800px;
}
.one {
height: 500px;
background-color: red;
}
.two {
height: 100%;
background-color: green;
}
.three {
margin-top: 0.5em;
height: 275px;
background-color: blue;
}
#media screen and (max-width: 425px) {
.two {
width: 50%;
position: absolute;
left: 25%;
top: -285px;
}
.three {
margin-top: 51em;
}
}
</style>
</head>
<body>
<div class="row p-0 m-0">
<div class="left col-md-8 col-sm-12 p-2">
<div class="row p-0 m-0">
<div class="one col-12"><h1>One</h1></div>
<div class="three col-12"><h1>Three</h1></div>
</div>
</div>
<div class="right col-md-4 col-sm-12 p-2">
<div class="two"><h1>Two</h1></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.js"></script>
<script>
</script>
</body>
</html>
I have 3 div, I want the 2nd div to be on the right just like a chat app. How can I achieve that with standard CSS or bootstrap. I have tried pull-right but it just messes up the layout by shifting the 3rd div up and 2nd div to top right.
<div>div1</div>
<div class="pull-right">div2</div>
<div>div3</div>
by using bootstrap you can achieve this
.child{border:2px solid #000; height:200px; margin:5px 0; min-width:100px; }
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 child pull-left"></div>
</div>
<div class="row">
<div class="col-md-4 child pull-right"></div>
</div>
<div class="row">
<div class="col-md-4 child pull-left"></div>
</div>
</div>
</body>
</html>
I tried this code and try to add different display properties to header and div tags, but image in next div tag is coming top left corner. I want it to come in next line of header tag which is on right top(pull right).This is about position of div and header tags
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.css" rel="stylesheet"/>
<style type="text/css">
</style>
</head>
<body style="background-color: #1D1D1D" >
<div id="main" class="">
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
</div>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.1.0.js"></script>
<script src="Scripts/jquery.cycle2.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
</body>
</html>
you can add class="clearfix" after the header tag and then the image will come in the next line. Clearfix is a class in bootstrap
A display: block; using a css on one of this two element will be enought.
Indeed display: block tell a div to take all the width of the page.
<header class="site header" role="banner">
<h1 id="logo" class="pull-right"> Logo of site
</h1>
</header>
<div id="">
<div id="" class="" style="display:block;">
<img src="Images/1157217a.jpg?w=1800&fit=max&auto=compress,format&h=1800" width="240" height="312" alt="slideshow image">
</div>
</div>
Or simply use bootstrap structurales classes as "container", "row" to create a new section above the header ?
you can simply do with this float:left property, just check with this example
header {
float:left;
width:100%;
background: #c1c1c1; /* just for showing the header */
padding:15px;
}
.block-element {
float:left;
width:100%;
background: #ddd; /* just for showing the div */
padding:15px;
margin-top:30px;
}
<header>
<!-- something here -->
</header>
<div class="block-element">
<!-- something here -->
</div>
<div class="block-element">
<!-- something here -->
</div>