I must be missing something obvious here, but I am a beginner with Bootstrap and I have no idea what it could be. I'm trying to get this picture and the adjacent paragraph to stack vertically on xs screens. No matter what I do, they just line up alongside each other, pushing the picture to the edge of the screen. Here's a picture of what is happening, and my code.
<div class="row para-text vertical-align">
<div class="col-xs-12 col-md-8 col-md-push-4">
<p>text....</p>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-md-4 col-md-pull-8">
<img class="img-full" src="img/artesia1.jpg" alt="">
</div>
</div>
Here are the css styles I've added, in case those are causing problems
.para-text {
padding:15px;
}
.vertical-align {
display: flex;
align-items: center;
}
I would recommend not using your css classes that you posted. When I did a simple example with your html code but no css, it seems to work fine:
Please see: http://www.bootply.com/GCu0vDtk6K
Note: I also removed your:
<div class="clearfix visible-sm-block"></div>
Looks like my problem was using Flexbox. I've opted out of using it and am going to find a different way to vertical align the image so that I can have better browser support.
Related
I'm trying to create a header in bootstrap 4 like this:
I'm facing several problems with this approach. Firstly the logo is not properly centered to the middle. I've tried several methods to avoid this including align=middle, margin on the bottom (which adds more space on the bottom than the space that's already on top-side) and the grid-system with col-1 and col-9. The last one creates to much space between the logo and the heading.
The image includes the version which contains the image in the HTML h1 element. Here is the source to create the logo:
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64 />Some text
<small class="text-white-50">
The new way of doing text-research</small></h1>
Am I doing something wrong? Bootstrap examples with an included logo are very rare. Maybe it has a reason...
Additional information
The small text shouldn't be centered.
I want to achieve this with bootstrap utilities only.
Use a flexbox for all items. Don't put the image and text inside the h1.
div {
display: flex;
align-items: center/* vertical alignment */
}
small {
font-size: 1rem;
}
<div>
<img src="https://via.placeholder.com/64x64" width=64 height=64 />
<h1 class="display-4 bg-primary text-light">Some text<small class="text-white-50">The new way of doing text-research</small></h1>
</div>
Since there is no html posted i am going to assume you have bootsrap basics in place:
Assuming you have something like this
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 header">
<span>
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64/>
some text
<small>The new way of doing text-research</small>
</h1>
</span>
</div>
</div>
</div>
EDIT: REMOVED CUSTOM CSS
PLease note that having the html in this way is not recommended.
But if you are insistent that you not use any custom css this solution should solve the problem.
I hope this is what you are looking for.
Check updated code pen https://codepen.io/Jsilvestri/pen/vzzJRy
I'm trying to put two images at the same line with Bootstrap, using two different columns. I aligned them, used some background color two see the result, etc.
But, when I change the resolution to see the responsive effect, they not resize by equal! the images haven't the same width, but yes, the same height. Does anyone have a guess?
Here is the HTML:
.coresq {
background-color: #131313;
}
.cordir {
background-color: #AAAAAA;
}
.top-shows {
margin-left: 0;
margin-right: 0;
}
.top-shows [class^="col-"] {
padding-right: 0;
padding-left: 0;
}
<div class="container">
<div class="row top-shows">
<div class="col-xs-4 coresq ">
<img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-responsive"/>
</div>
<div class="col-xs-8 cordir">
<img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-responsive"/>
</div>
</div>
</div>
When the display reduces, the responsive properties don't resize equally. Shouldn't? Aren't they at the same line?
You have two different column sizes.
col-xs-4 and col-xs-8
you need to use same solumn size for both images if you want them to have same width.
col-xs-6 and col-xs-6 would be the sizes you are looking for.
One image is using double cols (xs-8) than the other (xs-4), so when resizing, the smaller column gets eaten.
Try resizing this external JSFIDDLE with equal cols
(Also, make sure the images are equal size as in the fiddle above)
After some research, I have looking about Flex, that can do it, and saw the new version of bootstrap (4, but still in alpha).
I've reading a lot about, and decided to test. It works! Exactly the way I asked before, with little changes on code.
Well, the custom css is the same, but the Bootstrap is 4 (alpha, for testing) and the HTML is here:
<div class="container">
<div class="d-flex flex-row">
<div class="col-xs-4 coresq ">
<img src="img/slogan_part_1.jpg" alt="imagem" class="slogan_l img-fluid"/>
</div>
<div class="col-xs-8 cordir">
<img src="img/slogan_part_2.jpg" alt="imagem" class="slogan_r img-fluid"/>
</div>
</div>
</div>
.
PS: I don't know why, but the code on snippet preview is cutting the last div ending the code. There is a single point on finish.
After one hour for isolating the problem, I can post this :)
I've a problem with local file but not in production. THe only difference is that on production, html files are inlined.
I'm using default bootstrap 3.3.5 and this css class :
<style>
.v-center {
display: inline-block;
float: none;
}
</style>
My problem is that I don't have the same result with both code :
Code 1 :
<div class="row">
<div class="col-md-4 v-center">
col-md-4
</div><div class="col-md-8 v-center">
col-md-8
</div>
</div>
Code 2 :
<div class="row">
<div class="col-md-4 v-center">
col-md-4
</div>
<div class="col-md-8 v-center">
col-md-8
</div>
</div>
You can found here two examples :
http://relationeo.com/test.html
http://relationeo.com/test2.html
The bug is happening when window with is > 990px.
Why the carriage return breaks the col ?
Thanks
The problem is your CSS class "v-center". It sets the display to inline-block. With inline-block white space comes into play (at least the first character of white space, anyways). Just as you would expect:
Just
Testing
To be rendered as Just Testing rather than JustTesting, the same applies to inline or inline-block elements.
Long and short, don't mess with the Bootstrap grid if you expect to have consistent results. If you need to apply other classes, do so within the grid div, not on the same div. For example:
<div class="col-md-8"> <!-- this is grid div, so no other classes here -->
<div class="v-center">
...
</div>
</div>
I've not thought about this massively and I'm probably missing something very obvious but how does one properly apply background colours to '.row'
The code I've been using:
<div class="row">
<div class="col-lg-4 white-flood">
</div>
</div>
However this only applies to columns. I've tried wrapping them in a div, applying the style to the .row class among other things
Thanks :)
EDIT:
This should help people find out what my issue is (applying to .row should do the trick but something in my code is stopping it from working). The 4 thumb links should have awhite background.
Click here for site
Two options:
1) Set the background color to the row:
<div class="row white-flood">
<div class="col-lg-4"></div>
</div>
2) You need to use table layout
<div class="row" style="display: table">
<div class="col-lg-4 white-flood" style="float: none; display: table-cell"></div>
</div>
But this will slightly break the bootstrap design, as the table cant have a negative margin.
Added position: relative to my flood class and it worked...
I believe it is something to do with my responsive background intefering.
I am trying to have a centered main content div along with a right sidebar using Bootstrap 3.0.
I have tried the following code to achieve this.
BootPly
But when i resize the browser to shorter width, the sidebar gets pushed down and also the main content get wider. Is this behavior expected of bootstrap ? Do i need to add col-xs* to accommodate the shorter width ?
I am wondering if this is the correct way to achieve this design ?
Thanks !
Yes, it is default behaviour. Bootstrap 3 was built with "mobile first" in mind, so the layout is responsive by default. You can achieve this effect by writing a custom grid and not using the Bootstrap column classes, like col-sm-6 and so on.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content">
Main Content
</div>
<div class="sidebar">
Side bar
</div>
</div>
</div>
</div>
Then write some css. This is just an example, and you should customise to fit your own needs.
.sidebar { width: 33.3%; }
.content { width: 66.6%; }
You can fit two columns on the smallest screen size, but it's unlikely that this is what you are after. On small screens there's very little space for any substantial content to fit into two columns.
<div class="col-xs-6">
Main Content
</div>
<div class="col-xs-6">
Side bar
</div>
You are indeed correct that this is a feature of bootstrap :) You're also correct on using .col-xs-* to achieve your planned design. To add to what you're trying to do, (just in case you haven't tried this already) you can also combine the grid classes in order to accommodate the different screen sizes.
Here's an example:
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
Goodluck! :)