In small screens, my responsive image gets smaller till it disappears, even tho I specified that I wanted the images to be on top of each other on small screens, hence my col-md-6 col-sm-12. Any idea what's wrong with my code ?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12 d-flex">
<div class="media block-6 services d-flex align-items-center">
<div class="col-md-6 col-sm-12 d-flex">
<div class="media-body pl-4 pl-md-0 pr-md-4 text-md-left">
<h3 class="heading">Title</h3>
<p class="mb-0">Description</p>
</div>
</div>
<div class="col-md-6 col-sm-12 d-flex">
<div class="d-flex align-items-center justify-content-center">
<img class="img-fluid" src="https://www.plantes-et-sante.fr/images/photo-8.jpg_720_1000_2">
</div>
</div>
</div>
</div>
</div>
Go ahead and resize the screen here, knowing that I need to have the flex display.
https://jsfiddle.net/ero14xqf/
.col-* must always be contained inside .row...
<div class="row">
<div class="col-md-12 d-flex">
<div class="row media block-6 services d-flex align-items-center">
<div class="col-md-6 col-sm-12 d-flex">
<div class="media-body pl-4 pl-md-0 pr-md-4 text-md-left">
<h3 class="heading">Title</h3>
<p class="mb-0">Description</p>
</div>
</div>
<div class="col-md-6 col-sm-12 d-flex">
<div class="d-flex align-items-center justify-content-center">
<img class="img-fluid" src="https://www.plantes-et-sante.fr/images/photo-8.jpg_720_1000_2">
</div>
</div>
</div>
</div>
</div>
Related
This question already has answers here:
Order columns through Bootstrap4
(6 answers)
Closed 6 months ago.
I layout my content to display on the left an image in a div, then text with a link in another div
However in responsive mode, my content div with the link goes above my div with image
Is it possible to have the display corresponding to the order of my divs?
I would like to display the image first and then my content
there is my html :
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end mb-4 mb-lg-0">
<div class="w-100 img-fluid px-3 px-lg-0">
<img src="#" alt="#">
</div>
</div>
<div class="col-12 col-lg-6 text py-5">
<h1>title</h1>
<div class="pr-0 pr-0">
<h2>subtitle</h2>
</div>
<p>{# some content #}</p>
link
</div>
Here you go...
Image first:
#my_img {
width: 200px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end mb-4 mb-lg-0">
<div class="w-100 img-fluid px-3 px-lg-0">
<img id="my_img" src="https://img.freepik.com/free-photo/portrait-giraffe-sunlight-daytime-with-blurry-space_181624-47393.jpg?w=2000" alt="#">
</div>
</div>
<div class="col-12 col-lg-6 text py-5">
<h1>title</h1>
<div class="pr-0 pr-0">
<h2>subtitle</h2>
</div>
<p>{# some content #}</p>
link
</div>
</div>
Content first:
Use Bootstrap's order classes.
#my_img {
width: 200px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12 col-lg-6 d-flex justify-content-center justify-content-lg-end mb-4 mb-lg-0 order-lg-1 order-2">
<div class="w-100 img-fluid px-3 px-lg-0">
<img id="my_img" src="https://img.freepik.com/free-photo/portrait-giraffe-sunlight-daytime-with-blurry-space_181624-47393.jpg?w=2000" alt="#">
</div>
</div>
<div class="col-12 col-lg-6 text py-5 order-lg-2 order-1">
<h1>title</h1>
<div class="pr-0 pr-0">
<h2>subtitle</h2>
</div>
<p>{# some content #}</p>
link
</div>
</div>
I'm trying to put extra margin space between columns on my Bootstrap grid layout.
I've tried adding custom CSS class like this
.classWithPad {
margin: 10px;
padding: 10px;
}
but didn't solve my problem, also I've tried adding ml-1 and mr-1 but I didn't get desired. Here is my code:
When I tried to add some extra margin/padding the corresponding column is moved to a new row.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="row mt-4 justify-content-between">
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
paragraphs...
</div>
<div class="col-md-6 pl-0 text-right">
paragraphs...
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
<div class="col-md-4 card border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
</div>
<div class="col-md-6 pl-0 text-right">
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
You generally don't want to mix structural and presentation elements. In this case, you've combined columns with cards. Put the cards inside the columns, and if you wanted them full-height you can use h-100 on them.
That, along with the container that should be present around outer rows, and you're all good. If you want more spacing, use px-* classes on the columns.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row mt-4 justify-content-between">
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>General Information</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Features</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 border-radius-15 bg-shadow pt-3">
<h5>Game Manufacturers</h5>
<hr/>
<div class="row">
<div class="col-md-6 pr-0">
<p>paragraphs...</p>
</div>
<div class="col-md-6 pl-0 text-right">
<p>paragraphs...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
I have comments section on my template, I use w-75 float-right but other column got pull to my comment side.
here my template code.
<div class="col-md-12 mb-3">
....
<!-- comments with no parrent -->
<div class="card mb-3">
<div class="card-body">
....
</div>
</div>
<!-- comments with parrent -->
<div class="card mb-3 w-75 float-right">
....
</div>
<br>
</div>
<!-- comments Form -->
<div class="col-md-12 mb-5">
....
</div>
I wan't like this
Instead of
<div class="card mb-3 w-75 float-right">
Set the left margin to auto, this will push this div element all the way to the right and leave the area to its left clear.
Like this:
<div class='card mb-3 w-75 ml-auto">
You'll want to add .row classes to force a new line, and ensure that each row has exactly 12 columns. To adhere to this, you'll want to remove your w-75 class, and change the parent to col-md-7 in conjunction with offset-md-5 (this totals 12). This allows your card to be offset on desktop screens (with no elements forcing their way in on the left) and stack correctly on mobile screens.
This can be seen in the following (click Run code snippet and then Full page to see the offset):
body {
margin: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-md-12 mb-3">
....
</div>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<!-- comments with no parent -->
<div class="card mb-3">
<div class="card-body">
....
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 offset-md-5">
<!-- comments with parent -->
<div class="card mb-3">
<div class="card-body">
....
</div>
</div>
<br>
</div>
</div>
<div class="row">
<!-- comments Form -->
<div class="col-md-12 mb-5">
....
</div>
</div>
I tried looking this up here but I can't find anything related to this specific problem.
I'm trying to make a header which has a button on the left and right of the screen with a logo in the middle, but whenever I make the window smaller or larger the button on the right doesnt stay aligned.
Small window
Large window
Here is the code:
<header>
<div id="container-fluid">
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
</header>
What am I missing here?
Thanks in advance.
Fixed it, code now looks like this:
<body>
<header>
<div id="container-fluid">
<div class="row">
<div class="col">
<span class="float-left">Menu</span>
</div>
<div class="col text-center">
Logo
</div>
<div class="col">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>
</body>
wrap your content so it can be aligned according to the parent container.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<header>
<div id="container-fluid">
<div class="row">
<div class="col-2">
<span class="float-left">Menu</span>
</div>
<div class="col-8 text-center">
Logo
</div>
<div class="col-2">
<span class="float-right">Contact</span>
</div>
</div>
</div>
</header>
You can use the flex-bootstrap-class and justify-content for this approach:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row d-flex justify-content-between bg-light">
<div class="p-2 bg-dark text-light">
Menu
</div>
<div class="p-2 bg-dark text-light">
Logo
</div>
<div class="p-2 bg-dark text-light">
Contact
</div>
</div>
</div>
You havn't defined what size of column grid you are using. Using col-xs,col-sm, col-md,col-lg will have different effects for the particular code. Run the snippet code in full page below and see how the col-size affects when the browser is resized.
Update - Bootstrap 4 has replaced the col-xs with col- .
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<div id="container-fluid">
Col:xs
<div class="row">
<div class=" col-2">
Menu
</div>
<div class="col-8 text-center ">
Logo
</div>
<div class="col-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:sm
<div class="row">
<div class=" col-sm-2">
Menu
</div>
<div class="col-sm-8 text-center ">
Logo
</div>
<div class="col-sm-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:md
<div class="row">
<div class=" col-md-2">
Menu
</div>
<div class="col-md-8 text-center ">
Logo
</div>
<div class="col-md-2 float-right">
Contact
</div>
</div>
</div>
<br>
<br>
<div id="container-fluid">
Col:lg
<div class="row">
<div class=" col-lg-2">
Menu
</div>
<div class="col-lg-8 text-center ">
Logo
</div>
<div class="col-lg-2 float-right">
Contact
</div>
</div>
</div>
I've got these divs that I would like to align in their container in a 4 by 6 grid. I've got this code for the first row:
<div class="container-fluid">
<div class="swb col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="swb-button col-xs-3">
<p class="swb-button-name">1</p>
</div>
<div class="swb-button col-xs-3">
<p class="swb-button-name">2</p>
</div>
<div class="swb-button col-xs-3">
<p class="swb-button-name">3</p>
</div>
<div class="swb-button col-xs-3">
<p class="swb-button-name">4</p>
</div>
</div>
</div>
</div>
but they're clumping together like so:
Since they are 3 bootstrap widths wide, they should be spacing out.
What am I doing wrong?
Just change col-xs-3 to col-sm-3. If you want them to go completely across the screen get rid of your second div. col-xs-* no longer exists in the latest v4 release.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="swb col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="row">
<div class="swb-button col-sm-3">
<p class="swb-button-name">1</p>
</div>
<div class="swb-button col-sm-3">
<p class="swb-button-name">2</p>
</div>
<div class="swb-button col-sm-3">
<p class="swb-button-name">3</p>
</div>
<div class="swb-button col-sm-3">
<p class="swb-button-name">4</p>
</div>
</div>
</div>
</div>