CSS and Bootstrap help

I tried to make the code like in the image but with no success. I’m a beginner so plesease guys give me a little help.

CSS

body {
			background: #EEEEEE;
		}
		.vous-voulez {
            background-color: #DFE3E4;
        }
        .vous-voulez-button .btn-success {
            color: #fff;
            background-color: #023014;
            border-color: #fff;
            border-width: 3px;
            border-radius: 0;
            box-shadow: 0px 0px 0 3px #5f5f5f;
        }
        .vous-voulez-button {
            background-color: #DFE3E4;      
        }
        .recherche {
            background-color: #DFE3E4;   
        }

HTML:

<main class="container-fluid">
<div class="home-top-selects container-fluid">
   <div class="vous-voulez ">
        <div class="row">   
            <div class="vous-voulez-button col-sm-6">           
                <h4>Vous voulez vendre votre bien rapidement?</h4>
                <button type="button" class="btn btn-success btn-block">Cliquez ici pour une annonce gratuitement!</button>                          
            </div>
            <div class="recherche col-sm-6">            
                <h4>Recherche par numero de telephone</h4>
                <form>
                    <div class="row">
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="usr" />  
                        </div>
                        <div class="col-sm-3">
                            <button type="button" class="btn btn-default active">CHERCHER</button>
                        </div>
                    </div>  
                </form>
            </div>
        </div>
    </div>
    <div class="text-p">
        <div class="row">   
            <div class="col-sm-6">          
                <div class="row">
                    <div class="col-sm-9">
                        <p>Cliquez sur l'une des icones suivantes pour masquer la recherche</p>
                    </div>
                    <div class="col-sm-3">
                        <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="false"></span></button>
                        <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></button>
                        <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></button>
                    </div>
                </div>  
            </div>
            <div class="col-sm-6">    
                <div class="row">
                    <div class="col-sm-9">
                        <p>Aimeriez-vous promouvoir votre actiuvite ou produit? <a href="#">Consultez nos tarifs</a></p>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</div>
</main>

Hi, @dragonlee, first the advice and after that a solution and a TL:DR version.

Bootstrap strength is the grid, so first, understand how the grid works. You’ve got a container, within the container you should place a row that can fit any number of columns up to 12. You decide how to divide it. Yes, you can place containers within containers, rows within rows and columns inside all that.

However, that creates a bit of a mess. When you start working with frameworks like that, try to do some exercises either on your head, paint or pen, and paper of how you will divide the content you need.
(For instance, you need two big “boxes” and two small ones.). This will help you out to understand how to build and use the most of any framework without having to nest columns to make “fixes”.
By the way, Bootstrap has got plenty of helper classes, that are awesome once you know how to apply them.

Checking your content, I noticed that you’ve got this:
`

` Why do you have two containers there? Since it's probably part of a larger site, I will assume a couple of things like having different complex column systems and different sections and whatnot. So, just a thought on that. You can use the `.clearfix` class if you have content that may be uneven or that could behave weirdly on some breakpoints.

Here’s the solution I came up with a couple of minutes of tinkering.

CSS:

body {
	background: #EEEEEE;
	padding: 50px;
}
.vous-voulez {
	background-color: #DFE3E4;
	box-shadow: 2px 2px 2px #797D7F;
	border-radius: 4px;
	text-align: center;
	padding: 10px;
    }
.vous-voulez-button-success{
	color: #fff;
	background-color: #023014;
	border-color: #fff;
	border-width: 3px;
	border-radius: 0;
	box-shadow: 0px 0px 0 3px #5f5f5f;
	margin-bottom: 10px;
}
.vous-voulez-button {
	background-color: #DFE3E4;      
}
.recherche {
	background-color: #a7a7a7;
	color: #ffffff;
}
.small-text {
	font-size: smaller;
	padding-top: 10px;
	display: inline-block;
}
.text-center {
	text-align: center;
}
.content-holder {
	padding: 20px 10px;
}

And the HTML:

<main class="container-fluid">
	<div class="row">
		<div class="col-md-6">
			<div class="vous-voulez">
				<h4>Vous voulez vendre votre bien rapidement?</h4>
			<button type="button" class="btn btn-success btn-block vous-voulez-button-success">Cliquez ici pour une annonce gratuitement!</button>
			</div><!-- /.vous-voulez -->
			<div class="content-holder">
				<p class="small-text">Cliquez sur l'une des icones suivantes pour masquer la recherche</p>
				<div class="btn-holder pull-right">
					<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-cog" aria-hidden="false"></span></button>
		                  	<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span></button>
		                  	<button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></button>
				</div><!-- /.btn-holder pull-right -->
			</div><!-- /.content-holder -->
		</div><!-- /.col-md-6 -->
		<div class="col-md-6">
			<div class="vous-voulez">
				<h4>Recherche par numero de telephone</h4>
			<form class="form-horizontal">
				<div class="form-group">
					<label for="inputEmail3" class="sr-only">Email</label>
					<div class="col-md-10">
						<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
					</div>
					<div class="col-md-2">
				  	<button type="submit" class="btn btn-default btn-block recherche">Send</button>	
				  </div>
				</div>
			</form><!-- /.form-horizontal -->
			</div><!-- /.vous-voulez -->
			<div class="content-holder">
				<p class="text-center">Aimeriez-vous promouvoir votre actiuvite ou produit? <a href="#">Consultez nos tarifs</a></p>
			</div><!-- /.content-holder -->
		</div><!-- /.col-md-6 -->
	</div><!-- /.row -->
</main><!-- /.container-fluid -->

What you should look into:

  • The way you think the layout will work being responsive. For instance, in your code you’ve got several nested columns when a simple div with a Bootstrap helper class pull-right works just fine and gives you a bit more room to do stuff. Then again, if you are going to add plenty of content below that in the same column then it’s probably not the optimal solution. I placed the second row you had the same one because it makes sense UX wise, due proximity. Think on how the information will flow on a mobile screen.
  • It is ok to add your custom classes, even if you’re using a framework, you don’t have any issues with that, just check where you place them (like text-p) and why those are there. If it’s just to make some small tweaks for the content on that column, add it to the column classes or the row or the container.
  • This CSS is not ordered (you can take a look at what I am talking about here: Order CSS properties it’s not a must, but it makes things way easier when you maintain different projects or huge ones).
  • Know the CSS selectors by heart. There are plenty of awesome content for that matter all over here. There’s nothing more frustrating than applying overrides and not knowing where/why it is not working!

I hope it helps you out. Do lots and lots of exercises and if you have the time, try to do some static clones of sites you like. Figure out how it works, or come up with a layout of your own and see if it matches.
Keep coding!

Thank you very much @lesthertod. You helped me with your advice.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.