I have a question about aligning two bootstrap divs beside each other horizontally, whereas the left image "in one div" should have no margin to the left and the right text "in the other div" should be centered besides the image to the left. The right div may have some margin to the right
For some reason when I set my two divs beside each other and set margin to 0, I receive this result here as on the pic.
As can be seen, the div overlaps the other, why does that happen? What would I need to do in order to make it properly aligning to the right in the center?
I tried using col-md-offset-1 but it only displays it below the picture. What can I do best to keep it properly aligned to the right?
This is my html / css:
.row-provider-signup {
margin-top:6em;
margin-bottom:4em;
text-align:center;
}
.container-provider-signup > [class*="container"] {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left:0;
margin-right:0;
}
.provider-signup-header-text {
color: #212121;
font-family: Raleway;
font-size: 62px;
font-weight: 400;
line-height: 72px;
margin-bottom:1.5em;
}
.provider-signup-body-text {
color: #616161;
font-family: Raleway;
font-size: 16px;
font-weight: 400;
line-height: 25px;
letter-spacing: 0.2px;
text-align:center;
margin-bottom:6em;
}
.provider-signup-button {
width: 150px;
height: 45px;
border-radius: 4px;
background-color: #4a90e2;
}
.provider-signup-button-text {
color: #ffffff;
font-family: Raleway;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
}
<div class="container-provider-signup">
<div class="container">
<div class="row row-provider-signup">
<div class="col-md-6">
<img src="{{route('cacheImage', ['newDesign', 'panorama-signup.png']) }}"/>
</div>
<div class="col-md-6">
<p class="provider-signup-header-text">Test Header</p>
<p class="provider-signup-body-text">
Test Text <br/><br/>
Test Text <br/><br/>
Test Text <br/>
</p>
<button class="btn provider-signup-button"><span class="provider-signup-button-text">SIGN UP</span></button>
</div>
</div>
</div>
</div>
Related
Twitter Bootstrap 3.3.7
I have the following two navs:
<nav class="navbar navbar-default navbar-fixed-top" id="topNavBar">
<div class="container-fluid"></div>
</nav>
<nav class="navbar navbar-default navbar-lower" role="navigation" data-spy="affix" data-offset-top="50" data-offset-bottom="80">
<div class="container container-navbar">
<div class="row take-test-heading">
<asp:Label ID="lblTakeTestTitle" runat="server" Text="Take Text Title Here...."></asp:Label>
<asp:Label ID="lblTakeTestTimeRemaining" runat="server" Text="00:00"></asp:Label>
<i class="fa fa-bars pull-right"></i>
</div>
<div class="row take-test-heading-two">
</div>
</div>
</nav>
with the following CSS:
body {
margin-top: 50px;
padding-top: 0px !important;
}
.container-navbar {
}
.take-test-heading {
background-color: rgb(51, 122, 183);
height: 20px;
color: white;
font-size: 18px;
font-weight: 700;
margin-left: 10px;
margin-right: 20px;
margin-top: 5px;
}
.navbar-lower {
z-index: 999;
}
which gives me the following when the page is first rendered:
and then as I scroll (note the top affix):
I have a couple of issues that no matter what CSS changes I make I cannot seem to solve:
I want the blue bar "Take Text Title..." to be 100% and occupy the entire width of the viewport (yellow areas)
When scroll spy kicks in the navbar goes to 1170px (!) and is no longer full width (see green area). I want it to be full width all the time.
Cam someone please point me in the right direction here?
In bootstrap 3 .container has 15px of padding-left and padding-right. You can set both to 0px; manually.
Also setting margin-left and margin-right to 0px will do the trick
.take-test-heading {
background-color: rgb(51, 122, 183);
height: 20px;
color: white;
font-size: 18px;
font-weight: 700;
margin-left: 0px;
margin-right: 0px;
margin-top: 5px;
}
I have used page-break-inside: avoid; for page break, that work fine. But in second page there is no margin in top.
<div class="section-wrapper keep-together">
<div class="section-title">
<p class="title">{{ $section['certification']['title'] }}</p>
<p class="line"></p>
</div>
<div class="content">
<div class="content-row">
<div class="description">
<p>{!! $section['certification']['data']['details'] !!}</p>
</div>
</div>
</div>
</div>
.section-wrapper {
position: relative;
margin-bottom: 3%;
.section-title {
.title {
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
color: $color-blue;
padding: 0 80px;
}
}
.desc {
margin-bottom: 2rem;
font-weight: 300;
font-size: 1.5rem;
text-align: left;
}
}
}
}
Need some margin in second page. I am using laravel 5.7 and snappy pdf
I'm having trouble aligning text when the window is resized, e.g. on mobile.
Here's the HTML:
.count-panel {
float: left;
width: 64px;
border: 1px #888 solid;
}
.count {
font: 15px/18px Roboto, sans-serif;
font-size: 42px;
}
.message {
font-size: 20px;
}
.row {
clear: both;
margin-bottom: 16px;
}
<div class='table'>
<div class='row'>
<div class='count-panel'>
<span class='count'>1</span>
</div>
<div class='message'>This is line one</div>
</div>
<div class='row'>
<div class='count-panel'>
<span class='count'>2</span>
</div>
<div class='message'>This is line two which is longer than the rest so it can test wrapping</div>
</div>
<div class='row'>
<div class='count-panel'>
<span class='count'>3</span>
</div>
<div class='message'>This is line three</div>
</div>
At larger sizes: Larger
At smaller sizes: Smaller
I need the text in the second line to align with the others and not wrap hard left as in the image. Thanks.
That behaviour on mobile is due to the float applied to the .count-panel element. You could instead use flexbox and clean a bit the css code, like so:
Codepen demo
.count-panel {
border: 1px #888 solid;
flex: 0 0 64px;
}
.count {
font: 15px/18px Roboto, sans-serif;
font-size: 42px;
}
.message {
font-size: 20px;
}
.row {
margin-bottom: 16px;
display: flex;
}
It's just your float: left that's taking the count-panel out of sync.
I have replaced your example with display: flex instead. I would suggest avoiding float when positioning your elements as it was never intended to be used for layout. Flex is a much cleaner solution and I think it gives you more flexibility of layout choices. :-)
I've also amended the HTML layout slightly to include the border on the number itself so that it doesn't stretch the full size of the text content on smaller devices.
.count {
font: 42px Roboto, sans-serif;
min-width: 64px;
border: 1px #888 solid;
text-align: center;
max-height: max-content;
}
.message {
font-size: 20px;
}
.row {
display: flex;
flex-direction: row;
margin: 0 10px 16px 0;
}
<div class='table'>
<div class="row">
<span class="count">1</span>
<div class="message">This is line one</div>
</div>
<div class="row">
<span class="count">2</span>
<div class="message">This is line two which is longer than the rest so it can test wrapping</div>
</div>
<div class="row">
<span class="count">3</span>
<div class="message">This is line three</div>
</div>
</div>
How do I make a css like the image below. If there is an easy way, happy to change div structure.
I tried
<div className='row paragraph paragraph-paragraph-margin'>
<div className='col xs-12 beCenter'>
<div className='pointHistoryBigPoint'>
<span className='pointHistoryBigPointNum'>5,651</span>
<span className='pointHistoryBigPointUnit'>PTS</span>
<span className='pointHistoryBigPointStar'>*</span>
</div>
</div>
</div>
css
.pointHistoryBigPoint {
font-family: "Proxima Nova";
/*
width: 200px;
height: 52px;
margin: 0 auto;
*/
height: 100px;
}
.pointHistoryBigPointNum {
font-family: "Proxima Nova Semi Bold";
/*font-size: 60px;*/
}
.pointHistoryBigPointUnit {
/*font-size:20px;*/
}
.pointHistoryBigPointStar {
}
Use sup tag
<div className='row paragraph paragraph-paragraph-margin'>
<div className='col xs-12 beCenter'>
<div className='pointHistoryBigPoint'>
<span className='pointHistoryBigPointNum'>5,651</span>
<sup className='pointHistoryBigPointUnit'>PTS*</sup>
</div>
</div>
</div>
I added display: flex to your container so now each span takes the container height, and also set line-height to be equal to the font size, which will make you text stick to the top.
.pointHistoryBigPoint {
font-family: "Proxima Nova";
width: 200px;
height: 52px;
line-height: 52px;
margin: 0 auto;
display: flex;
}
.pointHistoryBigPointNum {
font-family: "Proxima Nova Semi Bold";
font-size: 60px;
}
.pointHistoryBigPointUnit {
font-size: 20px;
line-height: 20px;
}
.pointHistoryBigPointStar {
line-height: 20px;
}
<div className='row paragraph paragraph-paragraph-margin'>
<div class='col xs-12 beCenter'>
<div class='pointHistoryBigPoint'>
<span class='pointHistoryBigPointNum'>5,651</span>
<span class='pointHistoryBigPointUnit'>PTS</span>
<span class='pointHistoryBigPointStar'>*</span>
</div>
</div>
</div>
I've looked several times though all the posts I found online as well as here, but none of the methods seem to work.
The question might be a repeat of a common subject but the problem might be specific to this code...
<section class="x-graphic">
<div class="container">
<div class="col-md-2">
<img src="images/x1.png" class="x1">
</div>
<div class="col-md-1">
<img src="images/x2.png" class="x2">
</div>
<div class="col-md-2">
<div class="row x-items">
<div class="imageOne">
<img src="images/imageOne.png" title="imageOne"> text <p id="imageOne"></p>
</div>
<div class="imageTwo">
<img src="images/imageTwo.png" title="imageTwo"> text <p id="imageTwo"></p>
</div>
<div class="imageThree">
<img src="images/imageThree.png" title="imageThree"> text <p id="imageThree"></p>
</div>
<div class="imageFour">
<img src="images/imageFour.png" title="imageFour"> text <p id="imageFour"></p>
</div>
</div>
</div>
</div>
</section>
My CSS is:
body {
padding-top: 90px;
overflow-x: hidden;
}
.x1{
margin-top: 5%;
margin-left: 10%;
width: 160px;
margin-top: 20px;
}
.x2 {
width: 50px;
margin-top: 120px;
}
.x-items img {
height: auto;
width: 30px;
}
.x-graphic p {
margin-top: 130px;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: bold;
color: #000;
display: inline;
}
section p {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
margin-bottom: 40px;
}
Problems:
1) Nothing I do centers the <img> in the x-items row to the vertical center. I can center it horizontally, but not vertically.
2) I can't center the elements inside the container horizontally, and i'm only able to do this using a col-md-offset-x...